集成 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.com/edit/angular-rich-editor-test-b3yvjv。

Answer 1

CKEditor 是高度可配置的，您可以创建您的个人功能或更改它的工作方式。

检查此 link 以了解如何管理您的自定义构建：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

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

Integrate CKEditor API to programmatically make calls in component

javascript

ckeditor

angular