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

选择似乎会发生变化，具体取决于在编辑器视图中选择的内容。 getSelectedContent 函数未定义。如何获取内容？

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>

在组件中，在 click 事件上调用的函数如下：

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

PasteEvent 被定义为导出的界面，在此我将省略它以节省空间。内容键将引用 DocumentFragment 。

请注意，我正在传递 CKEditorComponent 作为参数。您也可以通过Angular @ViewChild 声明来访问它，但请注意，我的 ckeditor 位于 * ngIf 结构中。我认为在Angular 6中效果很好，但过去，当目标有条件地位于DOM中时，我很难使用 @ViewChild 引用。此方法始终有效，但可以使用所需的任何方法。

由 emit 触发的事件的处理方法如下：

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

因为内容是 DocumentFragment ，所以粘贴操作将包含所选源中包含的所有格式和文本属性。但这就是全部。

CKEditor 5将所选内容从一个编辑器复制到另一个编辑器

1 个答案: