How to use CKEditor and its plugins with Nuxt.js
Tags: nuxt, vue, javascript, ckeditor
Published: 2021-11-20 14:06:04

CKEditor is Javascript based rich text editor. It has clean UX loaded with features makes it a no-brainer choice for your next custom Javascript CMS.
It can be tedious to figure out its integration with Vue.js Framework like Nuxt.js
**Let's jump straight to steps.**

## Create Nuxt App
If you already have ongoing project, then you can skip this step. 

Use `create-nuxt-app` package using npx.
```
npx create-nuxt-app ckeditor-nuxt-sample
```


Choose options suitable to you, here are my selection for this article.
![Create Nuxt App for integrating CKEditor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js6n1916un11r7c1vyxf.png)


## Create Page where you want to use CKEditor

Create file named `sample-editor.vue` in `pages` directory in your Nuxt project. You can name it the way you want.

Here is initial code in the file.
```
<template>
 <h1>Sample Editor will go on this page.</h1>
</template>
<script>
export default {}
</script>
```

You can now see this page at https://localhost:3000/sample-editor

## Install Packages
Install these packages for CKEditor and full build.
```
npm i @ckeditor/ckeditor5-vue@23.0.0 --save
npm i @blowstack/ckeditor5-full-free-build@1.0.2 --save
```

## Initiate CKEditor and its config
The second package mentioned above has CKEditor build contains all the free plugins for CKEditor. Thanks to BlowStack.
Initialize CKEditor and Build in script section of your vue component.

```
let FullFreeBuildEditor;
let CKEditor;
if (process.client) {
  FullFreeBuildEditor = require('@blowstack/ckeditor5-full-free-build');
  CKEditor = require('@ckeditor/ckeditor5-vue')
}else {
  CKEditor = { component : {template:'<div></div>'}}
}
```
Note-  CKEditor can be used only on the client render and not server render hence `process.client` check.

Now you can register the component provided by this package in components section on your page.
```
components: {
    ckeditor: CKEditor.component
},
```

Next you need to pass FullFreeBuildEditor to editor prop of CKEditor component, so that it knows about which features to render.

We first initialize `editor` property in data section like below.
```
data() {
  return {
      editor: FullFreeBuildEditor,
  }
},
```

Now we pass it to ckeditor as a prop. See snippet below.
```
 <ckeditor :editor="editor" />
```

After this you can see CKEditor like this
![Basic CKEditor in Nuxt.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b6cvgqnvevtcfo2p8ka.png)

Still this is not complete. 
How will you bind it to data property of your component? Use `v-model`. Here's how.
```
 <ckeditor :editor="editor" v-model="editorInput" />
```
Let's try to display the output just below the editor using following snippet.
```
<div class="container mt-3">
  <div class="row">
    <h2 class="col-md-12">Output</h2>
      <div>{{editorInput}}</div>
  </div>
</div>
```

You'll see something like this.
![Output for CKEditor in Nuxt.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1awgn36o55cd7dz9bfv.png)

If you want to see preview of this output then you can use `v-html` directive. Something like this.
```
<div class="container mt-3">
  <div class="row">
    <h2 class="col-md-12">Preview</h2>
      <div v-html="editorInput"></div>
  </div>
</div>
```

## Edit Configuration
The number of features which CKEditor supports can be overwhelming for your users. You can modify the look and limit the features if you want. For that `config` prop of CKEditor comes into picture.

Add new data property called `editorConfig` to your component and add it as a prop to `ckeditor` component. See the snippet
```
data(){
  // Other properties
  editorConfig: {
    width: 'auto',
    plugins: [
      'Bold',
      'Link',
      'List',
      'FontSize',
    ],
  }
}
```
CKEditor Line changes as follows
```
 <ckeditor :editor="editor" :config="editorConfig" v-model="editorInput" />
```

Above 2 changes tells `ckeditor` to only include `bold`,`link`,`list`,`fontSize` plugins and hence only these options. Here is the output.
![Simple CKEditor after making config changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xultaflt77batcgknq6j.png)

You can view full list of plugins [here](https://www.npmjs.com/package/@blowstack/ckeditor-nuxt).

Now you have integrated CKEditor totally within your Nuxt.js project. 
You'd now see that your code for page component is little unclean. Let's see how to tackle this.

## Refactor to separate component
Now, we'll cleanup some code. Suppose in real world project, you'll need to use this rich editor at multiple pages. Then you should refactor the code into separate component. Let's call it `rich-editor`.
For that create `rich-editor.vue` inside `components` directory. We will encapsulate CKEditor code inside this.

**Pro Tip: If you do this refactor step. You can easily replace CKEditor with some other editor if needed.**

We will move editor config to prop of this `rich-editor` component. This will allow us to have rich-editor with different configuration and different features at every page where we need it.

We will also move `value` to prop, so that we can pass `v-model` on the component and that variable will bind to the input of the rich-editor.

Here is the code for `rich-editor.vue`

```
<template>
  <ckeditor
    :editor="editor"
    :value="value"
    :config="config"
    @input="event => $emit('input', event)"
  />
</template>
<script>
  let FullFreeBuildEditor;
  let CKEditor;
  if (process.client) {
    FullFreeBuildEditor = require('@blowstack/ckeditor5-full-free-build');
    CKEditor = require('@ckeditor/ckeditor5-vue')
  }else {
    CKEditor = { component : {template:'<div></div>'}}
  }

  export default {
    name: 'ck-editor',
    components: {
      ckeditor: CKEditor.component
    },
    props: {
      value: {
        type: String,
        required: false
      },
      config: {
       type: Object,
       required: false,
       default: function () {}
     }
    },
    data() {
      return {
        editor: FullFreeBuildEditor,
      }
    },
  };
</script>
```
## MathType Plugins
If you want to type Mathematics Equations or Chemistry Equations, then you need this plugin.
You just need to add `MathType` to the array of plugins in editor config prop.

```
editorConfig: {
  width: 'auto',
  plugins: [
    'Bold',
    'Link',
    'List',
    'FontSize',
    `MathType`
  ],
}
```

That's all. Allow any complicated maths equations or chemical reactions into your Nuxt app. See Figure below.
![CKEditor with MathType plugin in Nuxt.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57oesehmw8fldmnm1u9w.png)

## Image Plugins
Image plugin allows you to upload images into your editor but you need to give an REST Endpoint where images will be posted. This endpoint should return URL to the uploaded image. That URL can be used to store and display the image along with other content. Here's what you change in config.
```
//CKEditor Config for Image Upload
editorConfig: {
  width: 'auto', 
  plugins: ['Bold','Link','List','FontSize', `MathType`,`Image`,`ImageUpload`,'SimpleUploadAdapter'],
    simpleUpload: {
       // The URL that the images are uploaded to.
       uploadUrl: 'https://yourwebsite.com/api/upload-image',
    },
}
```
Keep in mind `simpleUpload` and `uploadUrl` should be spelled correct in order for this to work. If you are facing any issues with this. Hit me up on DM.

## Embed Plugin
You can embed in video or social media link using `MediaEmbed` plugin. Simply push this to plugins array and you have done it. Here is the sample screenshot.
![CKEditor with Embedded Youtube video in Nuxt.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0hdd80h4z7xift34mt1.png)

## Conclusion
We integrated CKEditor with our fresh Nuxt.js project. After that we refactored code and played around with some different useful plugins. This can be difficult to figure out but its very powerful tool to have. Let me know if you face any difficulties in any of the above.

**You can also check the whole code on [this Github repo](https://github.com/mohitsehgal/ckeditor-nuxt-sample).**

Happy Coding.
Remember, currently this article works for Vue 2 only.