代码之家 › 专栏 › 技术社区 › AlanObject

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

ckeditor5

4

AlanObject · 技术社区 · 6 年前

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

到目前为止,我有一个功能,可以粘贴文本如下(我用的是有角度的包装,它解释了 CKeditor组件 参考文献。

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

选择根据在编辑器视图中选择的内容而变化。这个 获取选定内容

1 回复 | 直到 6 年前

1

4

AlanObject 6 年前

我想了一下怎么做。我将在这里记录它的机会,它将帮助有人在路上避免发现的过程中,我所经历的。

在源文件上我有一个 文本编辑器 元素如下:

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

粘贴事件 接口为了节省空间,我将在这里省略。这个内容键将指向 DocumentFragment .

请注意,我正在传递 CKEditorComponent @视图子对象 文本编辑器 在一个 *ngIf公司结构。我认为这在Angular 6中效果很好,但在过去我在这方面遇到了困难当目标有条件地在DOM中时引用。这个方法总是有效的,但是你想用什么方法都行。

事件由发出使用如下方法处理:

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

文档碎片 粘贴操作将包括所选源中包含的所有格式和文本属性。但就这些。