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

Question

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

In the Vue CKEditor doc 它说：

if you need access to the editor object, you can use the editor property of the component’s instance:

component.instance.getData();

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

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

我的 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());
            });
          }
        );
      },