angular - 如何在 Angular 7 中从 ckeditor 5 检索数据？

Question

我正在使用 我的 Angular 7 项目中的 CKEditor 5 .我遵循官方文档，并在编辑器内容更改时使用 检索数据'更改事件' .现在我想在单击保存按钮时检索数据。

我在 中没有保存按钮CKEditor 的工具栏 ，如何添加呢？

每当我单击该保存按钮时如何检索数据？

我想使用 CK编辑在表单中，以便在单击提交按钮时检索数据。如何做到这一点？

这是html代码:

<ckeditor [editor]="Editor"  (change)="onChange($event)"  >
</ckeditor>
<button (click)=save()>Save</button>

这是 typescript :

public Editor = ClassicEditor;

public onChange( { editor }: ChangeEvent ) {
const data = editor.getData();
console.log( data );
}

save(){
const data = this.Editor.getData();
console.log( data );
}

提前致谢。

Answer 1

如果您想避免使用 ngModel，我发现了另一种可以使用的方法。 .

在您的模板中为 editor 命名(在本例中，我将其命名为 myEditor ):

<ckeditor #myEditor [editor]="editor" data="<p>Hello, world!</p>"></ckeditor>

然后在你的组件代码中获取它的引用(由于某种原因，我无法导入 CKEditorComponent 类，所以我不得不使用 any 类型)。通过引用，可以获取编辑器实例并从该实例获取数据。这是一个示例(例如，可以通过单击按钮触发 saveArticle() 方法):

@Component({
  ...
})
export class ArticleEditComponent {
  @ViewChild('myEditor') myEditor: any;

  saveArticle() {
    console.log(this.getArticleContent());
  }

  private getArticleContent() {
    if (this.myEditor && this.myEditor.editorInstance) {
      return this.myEditor.editorInstance.getData();
    }

    return '';
  }
}