javascript - 如何在 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 使这有点困难，而且记录也很奇怪。

根据documentation我必须运行 Array.from( editor.ui.componentFactory.names() ); 来获取可能的工具栏选项列表，因为这取决于我的构建中可用的其他选项，那里没有可用选项的中央专用列表。这也意味着我不知道如何调用我想要禁用的选项。

该方法当然在 VueJS 中不起作用。我无法获得工具栏选项的列表。 我如何在 VueJS 中检索此选项列表？ 无法从 this.ClassicEditor 检索它，并且它在 Vue DevTools 中也不可见。在我看来，ui.componentFactory.names 在 VueJS 中并不容易使用。

除此之外，我可能必须使用 documentation 中描述的方法添加缺少的额外功能，例如下划线、上标。 ，我不知道如何在 VueJS 上下文中做到这一点。

我还尝试使用 Documenteditor 版本，而不是经典版本，因为它似乎有更多选项，并且更接近我的需要。但是documentation没有告诉我如何毫无问题地将其集成到 VueJS 中。我尝试过，但它似乎不想渲染，并且没有显示错误消息来告诉我做错了什么。

有人知道如何在 VueJS 上下文中自定义 CKeditor 5 吗？文档中关于 VueJS 用法的内容出人意料地少。

Answer 1

刚刚也遇到了这个问题。

经过一番研究，我发现你可以这样做:

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

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

希望这有帮助。