Question

我试图在CkEditor5中创建一个包含两个部分的小部件：

1）公式的纯文本版本的输入（我要保存在模型和getData中的内容）

2）使用KaTeX渲染的文本公式的实时预览（实际应在编辑器中显示的内容）。

我遇到了a bug with the WidgetToolbar，所以我当前的方法是简单地插入两个自定义块元素，其中一个充当输入，另一个充当预览。当文档更改时，我试图检查输入内容是否已更改，然后将其插入预览中（我还没有进行实际转换）。

这是我用来插入元素的代码（已连接到自定义按钮）：

function createFormula( writer, editor ) {
    const formula = writer.createElement('formula');
    const formulaInput = writer.createElement('formulaInput');
    const formulaPreview = writer.createElement('formulaPreview');
    let formulaInputValue = null;

    editor.model.document.on('change:data', (eventInfo) => {

      if (formulaInput && formulaInput._children && formulaInput._children._nodes && formulaInput._children._nodes[0]) {
        let newValue = formulaInput._children._nodes[0]._data;

        if(formulaInputValue !== newValue) {
            formulaInputValue = newValue;
            writer.insertText(formulaInputValue, formulaPreview);
        }

      }


    });


    writer.append( formulaInput, formula );
    writer.append( formulaPreview, formula );

    return formula;
}

即使writer.insertText出现在editor.model.document.on（'change：data'）内，我仍然收到错误消息：

Uncaught CKEditorError: writer-incorrect-use: Trying to use a writer outside the change() block

我对如何完成侦听一个元素中的更改并将内容插入另一个元素的任务感到困惑。我注意到有一个'change' event associated with elements，但这不是一个可以用来侦听元素更改的实际方法。如果document.on（'change：data'）不算作更改块，那怎么办？有没有更好的听方法？有这个例子吗？我一直在浏览CkEditor5文档和其他插件，但是我还没有发现任何有用的示例。

Answer 1

要修改模型，请始终使用model.change()。如果您将writer传递给此调用之外的对象，即在某些异步任务中，由于模型更改是同步的，它将失败。在这种情况下，我建议您使用editor.model.change( writer => writer.insertText() )并且完全不要通过writer实例。

CKEditor5侦听变更事件并更新模型

1 个答案: