在 Vue (CKEditor) 中访问组件的实例

Question

我想在 CKEditor 实例中使用一种方法on('paste', function(evt)) 。

在 Vue CKEditor 文档中它说：

如果您需要访问编辑器 object，您可以使用组件实例的 editor 属性：

组件.instance.getData();

我无法理解它如何映射到我当前的模板，因为：

1. console.log(this.$refs.editor)被定义
2. console.log(this.$refs.editor.instance)未定义
3. console.log(this.$refs.editor.on())不是 function

我的vue文件：

<template>
    <div class="container">
        <ckeditor ref="editor" :editor-url="editorUrl" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

Answer 1

CKEditor 的 Vue 组件使用这些提供的事件https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#component-events 。 If you like like to use other events which are not provided by the CKEditor vue component, you can build the CKeditor from source https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html #ckeditor-5-built-from-source 。 这样就可以在Vue的组件的mounted()属性中配置CKeditor实例。

   import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";

   mounted: function() {
        ClassicEditor.create(document.querySelector("#editor"), editorConfig).then(
          editor => {
            this.editor = editor;
            this.editor.model.document.on("change", () => {
              this.updateContent(this.editor.getData());
            });
          }
        );
      },