Интегрируйте CKEditor API для программных вызовов в компоненте

Question

Я создал специальный сервис панели инструментов для ручного применения стилей к целевому фрейму.

HTML

<button (click)="exec('bold')">B</button>
<div contenteditable (input)="onInput($event.target.innerHTML)" class="editor" #editor></div>

Машинопись

import {
  Component,
  Input,
  OnInit,
  Output,
  EventEmitter,
  OnChanges,
  ViewChild,
  ElementRef
} from '@angular/core';


@Component({
  selector: 'editor',
  templateUrl: './editor.html',
  styleUrls: ['./editor.scss']
})
export class Editor implements OnInit, OnChanges {
  @Input() value: any;
  @ViewChild('editor') editor: ElementRef;
  @Output() valueChange = new EventEmitter();


  ngOnInit() {
    document.execCommand("styleWithCSS", false, null);
    this.editor.nativeElement.innerHTML = this.value;
  }
  ngOnChanges(changes: any) {
    try {
      if (this.editor.nativeElement.innerHTML != this.value) {
        this.editor.nativeElement.innerHTML = this.value;
      }
    } catch (err) {

    }
  }

  exec(a, b = null) {
    document.execCommand(a, false, b);
  };

  onInput(newValue) {
    this.valueChange.emit(newValue);
  }
}

Работает, как и ожидалось, но хотелось бы использовать внешний API (CKEditor) для выполнения любых вызовов для обновления. Поэтому вместо execCommand я просто использую CKEditor для нацеливания на мой компонент. Насколько я понимаю, большинство из этих текстовых редакторов требуют от вас использования их внутренней панели инструментов, но я не хочу использовать это.

Я смоделировал пример того, что я пытаюсь сделать здесь: https://stackblitz.com/edit/angular-rich-editor-test-b3yvjv.

Answer 1

CKEditor обладает широкими возможностями настройки, вы можете создать свою личную функцию или изменить ее работу.

Проверьте эту ссылку, чтобы понять, как управлять собственной сборкой: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html

Установите этот флажок, чтобы понять, как создать личную функцию: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-a-block-widget.html

Кроме того, вы можете попробовать работать с событиями CKEditor: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html