集成CKEditor API，在组件中以编程方式进行调用。

Question

我已经创建了一个自定义工具栏服务来手动应用样式到目标iframe。

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.comeditangular-rich-editor-test-b3yvjv.

Answer 1

CKEditor的可配置性很高，您可以创建您的个人功能或改变它的工作方式。

查看这个链接，了解如何管理你的自定义构建。https:/ckeditor.comdocsckeditor5最新构建指南developmentcustom-builds.html。

查看这个了解如何创建个人功能。https:/ckeditor.comdocsckeditor5latestframeworkguidestutorialsimplementing-a-block-widget.html。

此外，你可以尝试使用CKEditor的事件。https:/ckeditor.comdocsckeditor5latestbuildsguidesintegrationbasic-api.html。