在 CKedtior5 和 Vue2 中将自定义 CSS 类添加到元素 `.ck-content`答案

【问题标题】：Add custom CSS class to element `.ck-content` in CKEdtior5 and Vue2在 CKedtior5 和 Vue2 中将自定义 CSS 类添加到元素 `.ck-content`
【发布时间】：2021-04-11 21:12:35
【问题描述】：

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

ck-content 是输入字段；我们必须将它与上面的工具栏、CKEditor 的其他部分区别开来。所以如果我们想应用一些只影响输入内容的类，它一定不能影响工具栏。

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

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

【问题讨论】：

こんにちは一些想法：从文档中我看到组件有一些事件，要在不同阶段触发，例如this。您是否尝试过在@ready 事件处理程序中添加一个函数，并使用JavaScript 的document.querySelector 查找DOM 节点，然后添加您的自定义类？
@マークさん，感谢您的评论！我想“准备好”就是答案。

标签： vue.js vuejs2 ckeditor5

【解决方案1】：

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

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

      this.$nextTick(addCustomClass)
    }
  }

【讨论】：