Блог

Я интегрировал 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.

Просто столкнулся с этой проблемой.

После некоторых исследований я выяснил, что вы можете это сделать:

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

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

Надеюсь, это поможет.