Ckeditor 5 Nuxt integration

Installing the Necessary Packages

To incorporate CKEditor 5 into your Nuxt application, you need to install the right packages. The choice of packages depends on whether you're using Nuxt 2 or Nuxt 3, as they rely on different versions of Vue.

• For Nuxt 2 (Vue 2): Use @ckeditor/ckeditor5-vue2, which is tailored for Vue 2.

• For Nuxt 3 (Vue 3): Use @ckeditor/ckeditor5-vue, designed for Vue 3 integration.

Installation Commands

If you're working with Nuxt 2, install the Vue 2 compatible version of CKEditor along with the classic build using:

npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic

For Nuxt 3 projects, the command to install the Vue 3 compatible version of CKEditor and the classic build is:

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

Choose the command based on the version of Nuxt and Vue you are using in your project.

Implementing CKEditor 5 in a Component

Create a new component to incorporate CKEditor into your project. The implementation should account for server-side rendering considerations, such as the absence of the window object during server-side execution. The following example demonstrates how to conditionally import and use CKEditor only on the client side, avoiding server-side rendering issues.

Create the CKEditor component (components/CkeditorNuxt.vue):

<template>
  <ckeditor :editor="editor" :value="value" :config="config" :tagName="tagName" :disabled="disabled" @input="event => $emit('input', event)" />
</template>

<script>
let ClassicEditor;
let CKEditor;

if (process.client) {
  ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
  CKEditor = require('@ckeditor/ckeditor5-vue2');
} else {
  CKEditor = { component: { template: '<div></div>' } };
}

export default {
  components: {
    ckeditor: CKEditor.component,
  },
  props: {
    value: String,
    tagName: {
      type: String,
      default: 'div',
    },
    disabled: Boolean,
    uploadUrl: String,
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      editor: ClassicEditor,
    };
  },
};
</script>

Use the component in your application (e.g., pages/index.vue)

template>
  <div class="container">
    <ckeditor-nuxt v-model="content" />
    <button @click="saveContent">Save</button>
  </div>
</template>

<script>
import CkeditorNuxt from '@/components/CkeditorNuxt';

export default {
  components: { CkeditorNuxt },
  data() {
    return {
      content: '',
    };
  },
  methods: {
    saveContent() {
      alert(this.content);
    },
  },
};
</script>

Integrating a Custom Build

The standard editions of CKEditor 5 may lack certain features, prompting the need for additional plugins to enhance functionality. Often, integrating new plugins directly into the standard setup is not feasible, necessitating the creation of a custom build. 

To create a custom build with your chosen plugins, follow the guidelines provided in the create CKEditor 5 custom build post. It's advisable to verify the performance of the default build before proceeding with a custom version. Once your custom build is ready, replace the standard build with your custom one in the CKEditorNuxt component
 

// components/ckeditornuxt


if (process.client) {
  ClassicEditor = require('./NewCustomBuild')
  CKEditor = require('@ckeditor/ckeditor5-vue2')
} else {
  CKEditor = { component : {template:'<div></div>'}}
}