ckeditor5 - CKEditor 5 将选定的内容从一个编辑器复制到另一个编辑器

Question

我在屏幕上有两个编辑器，一个是只读的。我想要做的是允许用户从只读编辑器中选择内容并通过单击按钮将其粘贴到另一个的当前位置。 (逻辑可能会操纵文本，这是我不想使用系统剪贴板的原因之一。)

到目前为止，我拥有能够粘贴文本的功能，如下所示。 (我正在使用 Angular 包装器，它解释了 CKEditorComponent 引用的存在。

  doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
    const editor = editorComponent.editorInstance;
    editor.model.change(writer => {
      writer.insertText(pasteEvent.text, editor.model.document.selection.getFirstPosition() );
    });
}

我从文档中找不到的是如何提取选定的文本。到目前为止，我所拥有的是:

  clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
    const editor = editorComponent.editorInstance;
    const selection = editor.model.document.selection;
    console.log('clickPasteAll selection', selection);
    console.log('clickPasteAll selectedcontent', editor.model.document.getSelectedContent);
  }

选择 似乎会根据在编辑器 View 中选择的内容而变化。 获取选定内容 功能未定义。如何获取内容？

Answer 1

经过一番摸索，我想出了如何做到这一点。我将在这里记录它，以期它可以帮助其他人避免我经历的发现过程。

在源文档中，我有一个 ckeditor 像这样的元素:

  <div *ngIf="document">
    <ckeditor #ckEditor
              [editor]="Editor" [config]="ckconfig" [disabled]="true"
              [(ngModel)]="document.text"></ckeditor>
    <button mat-flat-button (click)="clickPasteSelectedPlain(ckEditor)">Paste Selected Text Plain</button>
  </div>

在组件中调用 的函数点击事件是这样的:

  @Output() paste = new EventEmitter<PasteEvent>();
     ...
  clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
    const editor = editorComponent.editorInstance;
    this.paste.emit({
      content: editor.model.getSelectedContent(editor.model.document.selection),
      obj: this.document,
      quote: false
    });
  }

粘贴事件 被定义为导出的 接口(interface)为了节省空间，我将在这里省略。 内容 键将引用 DocumentFragment .

请注意，我正在传递 CKEditorComponent 作为参数。您也可以通过 Angular 访问它@ViewChild 声明，但请注意我的 ckeditor 在 内*ngIf 结构体。我认为这在 Angular 6 中运行良好，但过去我在使用 时遇到了困难。 @ViewChild 当目标有条件地在 DOM 中时引用。此方法始终有效，但请使用您想要的任何方法。

触发的事件发射 使用如下所示的方法进行处理:

  doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
    const editor = editorComponent.editorInstance;
    editor.model.insertContent(pasteEvent.content);
  }

因为内容是 文档片段 粘贴操作将包括所选源中包含的所有格式和文本属性。但这就是它的全部。