Garrido

How to add custom plugins to ckeditor using vuejs

Written by

Garrido

in

After a long time struggle with this i finally could writte a post explaining it

for me was not easy to understand the documentation, but after a lot of catch and errors i could do

we need to do two things

first, we need to download or cloning the ckeditor, in my case ckeditor-4 and then we move into the /dev folder and then into the /builder folder and execute ./build command to generate a locally version of ckeditor.

now we copy the generated folder inside the /release folder called /ckeditor and put this on the /public folder of our vue project.

after that y put my plugins inside the /plugins folder that is inside the /ckeditor folder in our /public folder.

now, i can call this like

the var editorUrl have the path to the our ckeditor, in my case /js/ckeditor which are inside of /public folder

import CKEditor from 'ckeditor4-vue';
export default {
  name: 'myComponent',
  data () {
    return {
      editorConfig: {
        extraPlugins: 'myplugin1, myplugin2',
        toolbar: [ [ 'Bold', 'MyPlugin1', 'Italic', 'MyPlugin2' ] ]
      },
      editorUrl: '/js/ckeditor/ckeditor.js'
    }
  },
  ...,
  components: {
    ckeditor: CKEditor.component
  },
}

if we dont use the attribute editor-url and only add extraPlugins, the editor will try to find our plugins in his own CDN rather than our.

More posts