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

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

当您将其实现为插件时，它就起作用了，因为您使用了

Text

所依赖的同一包中的

ClassicEditor

类。

当您在编辑器中使用捆绑包时尝试执行相同的操作时，您会在不知不觉中复制整个

@ckeditor/ckeditor5-engine

包。该包的一个实例被捆绑到编辑器中，而您稍后使用的第二个实例（在您显示的代码片段中），因此 webpack 再次导入了它。

这是我们目前遇到的一个环境问题 – 您无法将插件添加到 CKEditor 5 版本中。

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

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

writer.insertText()

方法还可以插入带有attributes的文本，例如您可以像这样插入粗体文本：

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

或者如果您想插入链接，请参阅如何在 CKEditor 5 中以编程方式在当前位置插入链接

Answer 2

这对我有用，使用（准备好）返回的编辑器：

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);
}

另请参阅字体。

Answer 3

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

editor.editing.view.focus()

Answer 4

我不知道这是正确的方法...

在react中无法使用外部的editor 所以我将编辑器实例置于一种状态

 onBlur={(event, editor) => {
                    //console.log('Blur.', editor);
                    ckInstance(editor)

                }}

然后在 onclick 和 js 文件中使用它，就像

 const onBlureAddText = () => {
      editorState.model.change(writer => {
          const insertPosition = editorState.model.document.selection.getFirstPosition();
          writer.insertText('<Tag:1>', insertPosition);
      });

Answer 5

 const editorRef = useRef<CKEditor<ClassicEditor> | null>(null);
 
  const handleFilter = () => {
    if (questionTypeId === 3 && editorRef.current) {
      const editor = editorRef.current.editor!;
      // Execute the change inside the model's change method
      editor.model.change(writer => {
        // Insert the text
        const insertPosition = 
           editor.model.document.selection.getFirstPosition();
        writer.insertText('##InputBox##', insertPosition!);
    enter code here
        // Get the last position in the editor
        const lastPosition = 
          editor.model.document.selection.getLastPosition();
        
        // Focus the editor to make the cursor visible
        editor.editing.view.focus();
      });
    }
  }

By usig this Not only the text will be added but also the cursor pointer will also not disappear