如何从 Angular 7 中的 ckeditor 5 检索数据？

Question

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

1. 我的CKEditor工具栏没有保存按钮，如何添加？

2. 当我点击保存按钮时如何检索数据？

3. 我想在表单中使用CKEditor，以便在单击提交按钮时检索数据。如何实现这一目标？

这是html代码：

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

这是打字稿：

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

在您的保存方法中，您不能只调用 this.Editor.getData()，因为编辑器不是具有您想要的数据的实例“编辑器”。在 onChange 方法中，您可以将值分配给另一个组件级变量，例如 editorData: String ，并在 save 方法中使用该变量（例如 this.editorData）。

• S·阿罗拉

顺便说一句，如果无论如何知道如何获取对“编辑器”实例的引用，请分享。当我遇到这个问题时，我并没有在 Change 上获取数据，而是在寻找一种在保存时只获取一次数据的方法。

更新：我找到了一个好方法，通过使用 ngModel 2 方式绑定来避免连续订阅 onChange，如角度 ckeditor 演示所示：https ://github.com/ckeditor/ckeditor5-angular/tree/master/src/app/演示形式