How to customize CKEditor 5 in a VueJS app

Question

I integrated the CKeditor 5 for VueJS into my VueJS app:

<template>
  <div :class="[columnClass, errors[name] ? 'has-danger' : '']" class="form-group">
    <ckeditor :id="name"
              :readonly="readonly"
              :disabled="disabled"
              :editor="editor"
              :config="editorConfig"
              :value="value"
              class="form-control"
              @input="$emit('input', $event)"/>
    <small class="form-control-feedback">
      <span v-for="e in errors[name]" :key="e">{{ e }}</span>
    </small>
  </div>
</template>

<script>

import BaseInput from './BaseInput';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  name: 'TextEditor',
  extends: BaseInput,
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        toolbar: [ 'bold', 'italic', 'underline', 'strikethrough',  'subscript', 'superscript', '|', 'headings', '|', 'undo', 'redo' ],
        heading: {
          options: [
            {model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
            {model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
            {model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
            {model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'},
            {model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4'}
          ]
        }
      }
    };
  },
};
</script>

This works fine.

Now I want to customize the toolbar that is shown, I already tried a bit of custom configuration that is not really working. Only bold, italic, redo and undo are shown in my toolbar. CKeditor makes this a bit difficult in my opinion, and weirdly documented as well.

According to the documentation I have to run Array.from( editor.ui.componentFactory.names() ); to get a list of possible toolbar options, because it depends on other things what options are available in my build, there is no central dedicated list which options are available. This also means that I have no idea how the options that I want to disable are called.

That method of course does not work in VueJS. I can't get a listing of the toolbar options. How would I got about retrieving this list of options in VueJS? It is not possible to retrieve it from this.ClassicEditor and it is also not visible in the Vue DevTools. It seems to me that ui.componentFactory.names is not readily available in VueJS.

Added to that is that I possibly have to add extra functionality that is missing, like underline, superscript, using the method described in the documentation , and I have no idea how to do that in the VueJS context.

I also tried to use the Documenteditor build, instead of the Classical build since it seems that one has more options, and is closer to what I need. But the documentation does not tell me how to integrate that one in VueJS without problems. I tried it, but it seems to not want to render and no error messages are shown to tell me what I'm doing wrong.

Does anybody know how to customize CKeditor 5 within the VueJS context? The documentation is surprisingly light about the VueJS usage.

Answer 1

Just bumped into this problem as well.

After some research, i found out that you can do this:

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// Somewhere in your code...
console.log(ClassicEditor.defaultConfig.toolbar);

Hope this helps.