Как настроить CKEditor 5 в приложении VueJS

Question

Я интегрировал CKeditor 5 для VueJS в свое приложение VueJS:

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

Это отлично работает.

Теперь я хочу настроить отображаемую панель инструментовЯ уже попробовал немного нестандартной конфигурации, которая на самом деле не работает.На панели инструментов отображаются только жирный, курсив, повтор и отмена.CKeditor делает это немного сложным, на мой взгляд, и странно документировано.

В соответствии с документацией Мне нужно запустить Array.from( editor.ui.componentFactory.names() );, чтобы получить список возможных параметров панели инструментов, поскольку от других зависит то, какие параметры доступны в моей сборке, нет центральнойВыделенный список, какие варианты доступны.Это также означает, что я понятия не имею, как называются опции, которые я хочу отключить.

Этот метод, конечно, не работает в VueJS.Я не могу получить список параметров панели инструментов. Как бы я мог получить этот список параметров в VueJS? Невозможно получить его из this.ClassicEditor, и он также не виден в Vue DevTools.Мне кажется, что ui.componentFactory.names недоступен в VueJS.

Кроме того, мне, возможно, придется добавить дополнительные функции, которые отсутствуют, как подчеркивание, верхний индекс, используя метод, описанный в документация , и я понятия не имею, как это сделать в контексте VueJS.

Я также попытался использовать сборку Documenteditor вместо классической сборки, поскольку кажется, что у дополнений больше опций, и это ближе к тому, что мне нужно.Но документация не говорит мне, как без проблем интегрировать это в VueJS.Я попробовал это сделать, но, похоже, он не хочет отображаться, и не отображаются сообщения об ошибках, указывающие мне, что я делаю неправильно.

Кто-нибудь знает, как настроить CKeditor 5 в контексте VueJS?Документация удивительно легка в использовании VueJS.