blowstack logo

Ckeditor 5 Nuxt integration

Last update

5 min.
  1. Install necessary official packages.
  2. Implement CKEditor 5 into your nuxt component.
  3. Integrate a custom build.

 

Install necessary official packages

 

In order to integrate CKEditor 5 into your nuxt app you need install a default ready build (i.e. classic build) and the vue version of CKEditor (the same for all kinds of builds). The code below will get for you all needed dependencies for the most popular classic build. 

 

Notice that currently nuxt uses Vue 2 that's why you need to install ckeditor5-vue2 (it was previously named without number) not the ckeditor5-vue which is now meant for Vue 3.

 

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

 

Imlement CKEditor 5 into your component

 

Let's create a new component for the editor. The body will be almost the same as in the standard vue edition but you have to handle errors come from window references (window object is not defined). These type of errors are very common in nuxt apps that referencing to the global objects like window or document. These globals are not available during server side processing and thus generate errors. All you have to do is to make sure that they will be accessed only when available. Fortunately they can be used on the client side and you can easily restrict your app to use them then. To make it happen you can use a global variable process as presented in the code below.

// components/ckeditornuxt

<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: {
      type: String,
      required: false
    },
    tagName: {
      type: String,
      required: false,
      default: 'div'
    },
    disabled: {
      type: Boolean,
      required: false,
    },
    uploadUrl: {
      type: String,
      required: false
    },
    config: {
      type: Object,
      required: false,
      default: function () {
      }
    }
  },
  data() {
    return {
      editor: ClassicEditor,
    }
  },
};
</script>

 

Now you can import newly created component anywhere in your app and intercept the content of the editor using v-model. Optionally you can as well pass any config you like, just look at the props of the component.

// 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>

 

Integrate a custom build

 

The standard editions are very poor equiped so you will probably want to integrate additional plugins to get more functionality. In most cases you won't be able to add new plugins in the standard way so making a custom build will be the only option for you. In the post create ckeditor 5 custom build I clarify how to make such build with any plugins you want. Before you start creating such build test whether a default one works fine.

After creating your custom build just add it in the ckeditornuxt component instead of your previous tested one.

// components/ckeditornuxt


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

 

Recent posts

BlowStack 2021
Portfolio Cheat
sheets