CKEditor 5 在按钮单击时插入文本 - 纯 JS

Question

I'm trying to create a sort of dropdown menu that a user can insert tokens into a CKEditor with. I've found that I can insert text in an editor with this code:

editorInstance.model.change( writer => {
   let pos = editorInstance.model.document.selection.getFirstPosition();
   writer.insertText( "TEST", pos,0);
});

It works when I put it in the ClassicEditor.create.then for testing but it does nothing when I place this in a $().click event. I can log something from inside the callback so I know the code is executed but nothing is inserted.

I've been trying to get this working for hours now but all the examples I can find is in angular or any other frameworks.

Answer 1

I Solved the issue you faced as follows

first defined new editor that is null and Then instatiate Ckeditor 5

  let neditor = null;

   ClassicEditor.create(document.querySelector('#editor'))
               .then(editor => {
                   neditor = editor;
               })
                .catch(error => {
                    console.error(error);
                });

using pure js

document.addEventListener("click", (event) => {
            var button = event.target;
            if (event.target.type === 'button' && event.target.className.includes('testtokenbutton')) {

                neditor.model.change(writer => {
                    const insertPosition = neditor.model.document.selection.getFirstPosition();

                    writer.insertText(button.id, insertPosition);
                });
         
            }
        });