CKEditor 5 - 插入文本

Question

是否可以在当前选择的位置向编辑器中插入文本？

我试过了

import Text from '@ckeditor/ckeditor5-engine/src/model/text';

function insertText() {
  let text = new Text('test');
  ckEditor.model.insertContent(text, ckEditor.model.document.selection);
}

其中 ckEditor 是从 ClassicEditor.create

返回的编辑器对象

代码运行没有错误，但没有任何反应

我已经设法让类似的代码在插件中工作，但在这里我试图从主机应用程序中注入文本

Answer 1

I have managed to get similar code to work from within a plugin, but here I am trying to inject the text from the host app

当你将它实现为插件时它起作用了，因为你使用了 ClassicEditor 所依赖的同一个包中的 Text class。

当您在与编辑器一起使用捆绑包时尝试执行相同的操作时，您会在不知不觉中复制整个 @ckeditor/ckeditor5-engine 包。这个包的一个实例被捆绑到编辑器中，第二个你稍后使用（在你展示的片段中），所以 webpack 再次导入它。

这是我们目前面临的环境问题 – you can't add plugins to a CKEditor 5 build。

幸运的是，我们很久以前就注意到了这个问题，并且从那时起已经有了很大的改进。插入文本不需要导入任何东西：

editor.model.change( writer => {
    const insertPosition = editor.model.document.selection.getFirstPosition();
    writer.insertText( 'foo', insertPosition );
} );

writer.insertText() method can also insert a text with attributes，例如您可以像这样插入粗体文本：

editor.model.change( writer => {
    const insertPosition = editor.model.document.selection.getFirstPosition();
    writer.insertText( 'foo', { bold: true }, insertPosition );
} );

或者如果你想插入一个link，然后看

Answer 2

这对我有用，使用由 (ready) 返回的编辑器：

insertTag(tag: string) {
  const insertPosition = this.editor.model.document.selection.getFirstPosition();
  const viewFragment = this.editor.data.processor.toView(`<p>${tag}</p>`);
  const modelFragment = this.editor.data.toModel(viewFragment);
  this.mod.insertContent(modelFragment);
}

另见 the font。

Answer 3

只是添加，要在插入文本后启用输入焦点，请添加此代码。

editor.editing.view.focus()

CKEditor 5 - 插入文本

CKEditor 5 - insert text

ckeditor5