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

Question

我正在尝试创建一种下拉菜单，用户可以使用该下拉菜单将令牌插入到 CKEditor 中。 我发现我可以使用以下代码在编辑器中插入文本：

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

当我把它放在ClassicEditor.create.then进行测试时它起作用，但是当我把它放在$().click事件中时它什么也不做。 我可以从回调内部记录一些东西，所以我知道代码已执行但没有插入任何内容。

我一直试图让这个工作几个小时，但我能找到的所有例子都是 angular 或任何其他框架。

Answer 1

我解决了您遇到的问题如下

首先定义为空的新编辑器，然后安装 Ckeditor 5

  let neditor = null;

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

使用纯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);
                });
         
            }
        });