CKEditor 5 копировать выбранный контент из одного редактора в другой - PullRequest
Новая
       4

CKEditor 5 копировать выбранный контент из одного редактора в другой

0 голосов
/ 30 января 2019

У меня есть два редактора на экране, один только для чтения.То, что я хочу сделать, это позволить пользователю выбрать контент из редактора только для чтения и вставить его в текущую позицию другого, нажав кнопку.(логика может манипулировать текстом, что является одной из причин, по которой я не хочу использовать буфер обмена системы.)

Пока у меня есть функция, которая может вставлять текст следующим образом.(Я использую оболочку 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 не определена.получить контент?

1 Ответ

0 голосов
/ 31 января 2019

Немного покопавшись, я разобрался, как это сделать.Я запишу это здесь на случай, если это поможет кому-то в будущем избежать процесса открытия, через которое я прошел.

В исходном документе у меня есть элемент 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 определяется как экспортируемый интерфейс , который я здесь опущу для экономии места.Клавиша content будет ссылаться на DocumentFragment .

Обратите внимание, что я передаю CKEditorComponent как параметр.Вы также можете получить к нему доступ через объявление Angular @ ViewChild , но учтите, что мой ckeditor находится внутри структуры * ngIf .Я думаю, что это хорошо работает в Angular 6, но в прошлом у меня были трудности с ссылками @ ViewChild , когда цель была условно в DOM.Этот метод всегда работает, но используйте тот метод, который вам нужен.

Событие, генерируемое emit , обрабатывается с помощью метода, который выглядит следующим образом: 

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

Посколькусодержимое DocumentFragment операция вставки будет включать все атрибуты форматирования и текста, содержащиеся в выбранном источникеНо это все, что нужно.

...