如何在 VueJS 應用程序中自定義 CKEditor 5

Question

我將CKeditor 5 for 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 構建，而不是 Classical 構建，因為它似乎有更多選擇，並且更接近我需要的。 但是文檔並沒有告訴我如何將它集成到 VueJS 中而不會出現問題。 我試過了，但它似乎不想渲染並且沒有顯示錯誤消息來告訴我我做錯了什么。

有人知道如何在 VueJS 上下文中自定義 CKeditor 5 嗎？ 該文檔對 VueJS 的使用非常簡單。

Answer 1

剛剛也碰到了這個問題。

經過一番研究，我發現你可以這樣做：

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

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

希望這可以幫助。