将自定义 CSS class 添加到 CKEdtior5 和 Vue2 中的元素 `.ck-content`

Question

如何将自定义 CSS class 添加到元素 .ck-content，换句话说，添加到 CKEditor5 和 Vue2 中的可编辑格式化文本容器？

ck-content是输入框；我们必须将它与上面的工具栏不同，CKEditor 的另一部分。所以如果我们想应用一些 class 只影响输入的内容，它不能影响工具栏。

似乎是显而易见的解决方案：

<ckeditor class="CustomClass" :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

将不起作用，因为 CustomClass 它不会应用于 .ck-content，甚至不会应用于根元素。

下面的解决方案也行不通，因为当 CKEditorWrapper 挂载时，CKEditor 挂载还没有完成。

import CK_EditorVueAdaptation from "@ckeditor/ckeditor5-vue2";

@Component({
  components: {
   ckeditor: (CK_EditorVueAdaptation as { component: VueClass<unknown>; }).component
  }
})
class CKEditorWrapper extends Vue {
  private mounted(): void {
    this.$el.getElementsByClassName("ck-content").item(0) // null
  } 
}

Answer 1

Vue CKeditor 组件在真正安装和渲染时发出 ready 事件。所以一个简单的解决方案：抓住它并将 class 添加到想要的节点，请记住 this.$el 是编辑器真实容器的兄弟节点。

<ckeditor
  ...
  @ready="onEditorReady"
/>
...
,
methods: {
    onEditorReady () {
      const myClass = 'anyCustomClass'
      const addCustomClass = () => this.$el.nextSibling
        .querySelector('.ck-content')
        .classList
        .add(myClass)

      this.$nextTick(addCustomClass)
    }
  }

将自定义 CSS class 添加到 CKEdtior5 和 Vue2 中的元素 `.ck-content`

Add custom CSS class to element `.ck-content` in CKEdtior5 and Vue2

vue.js

vuejs2

ckeditor5