Accessing instance of a component in Vue (CKEditor)

Question

I want to use a method in the CKEditor instance, on( 'paste', function( evt )).

In the Vue CKEditor doc it says:

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

component.instance.getData();

I cant understand how that maps to my current template, because:

1. console.log(this.$refs.editor) is defined
2. console.log(this.$refs.editor.instance) is undefined
3. console.log(this.$refs.editor.on()) is not a function

My vue file:

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

Answer 1

The Vue component of CKEditor uses these provided events 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. In this way, you can configure the CKeditor instance in Vue's component's mounted() property.

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