[Vuejs]-InsertText() in ckeditor component for Vue.js

by

0👍

I ran into the same issue with Vue3 and CKEditor 5. Here is what I did for anyone that stumbles across this and still needs an answer.

Reference: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/editing-engine.html#model

Setup the editor:

<ckeditor id="templateEditor" :editor="editor" v-model="myModel.myProperty" @ready="onReady"></ckeditor>

In my case, I have a list of li tags and clicking on each would add some text to the editor.

<li><span class="clickable emailToken" @click="appendToken('{year}')">{year}</span> - current year</li>

Then add this block of code to your component code (I’m using TypeScript and the ClassicEditor – you should be able to replace ClassicEditor with the name of whichever editor you’re using):

let editor = {} as ClassicEditor;
function onReady(useEditor: ClassicEditor) {
  editor = useEditor;
}

function appendToken(token) {
  editor.model.change(writer => {
    writer.insertText(token, editor.model.document.selection.getFirstPosition());
  });
  editor.focus();
}

The ckeditor ready event passes the editor instance to the onReady function and stores that ready instance in editor. The appendToken function then uses that captured editor to make changes to the model.

-1👍

forgot about this:

methods: {
    addCodeInMsg(e){
      this.editor.change( writer => {
        const insertPosition = this.editor.model.document.selection.getFirstPosition();
        writer.insertText( 'CKEditor 5 rocks!', { linkHref: 'https://ckeditor.com/' }, insertPosition );
      } );
    }
  }

-1👍

I was able to do this through the editor-object you get when the CKeditor is ready.

In the on-ready-event, you get a editor and then I save that one for using such actions.

source: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-the-document-editor-build

Leave a comment