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

【问题标题】：Integrate CKEditor API to programmatically make calls in component集成 CKEditor API 以编程方式在组件中进行调用
【发布时间】：2020-05-04 08:33:01
【问题描述】：

我创建了一个自定义工具栏服务来手动将样式应用于目标 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) 进行任何调用以进行更新。因此，我纯粹使用 CKEditor 来定位我的组件，而不是 execCommand。据我了解，这些文本编辑器中的大多数都要求您使用它们的内部工具栏，但我不想使用它。

我已经模拟了我在这里尝试做的一个示例：https://stackblitz.com/edit/angular-rich-editor-test-b3yvjv。

【问题讨论】：

标签： javascript angular ckeditor

【解决方案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

【讨论】：