如何在角度 7 中从 ckeditor 5 检索数据？答案

【问题标题】：How to retrieve data from ckeditor 5 in angular 7?如何在角度 7 中从 ckeditor 5 检索数据？
【发布时间】：2019-05-07 21:11:00
【问题描述】：

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

我在CKEditor的工具栏中没有保存按钮，如何添加？
点击保存按钮时如何检索数据？
我想在表单中使用 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 );
}

提前致谢。

【问题讨论】：

感谢@Nagesh Katna 的编辑

标签： angular typescript ckeditor angular7

【解决方案1】：

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

S。阿罗拉

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

更新：我找到了一种避免订阅 onChange 的好方法，方法是使用 ngModel 2 方式绑定，如 Angular ckeditor 演示所示：https://github.com/ckeditor/ckeditor5-angular/tree/master/src/app/demo-form

【讨论】：

【解决方案2】：

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

在您的模板中为编辑器命名（在本例中，我将其命名为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 '';
  }
}

【讨论】：

这里的this.ckEditor 是什么？
@CJRamki 这只是一个错字。它应该是this.myEditor。我已经更新了答案

【解决方案3】：

 <ckeditor id="editor"
  [editor]="editor"
  [config]="config"
  (ready)="onReady($event)"
  name="description"
  [(ngModel)]="model.description"
></ckeditor>

 onReady(editor) {
      editor.ui.getEditableElement().parentElement.insertBefore(
          editor.ui.view.toolbar.element,
          editor.ui.getEditableElement(),
      );
      this.newEditor = editor;
  }
  
  
  save(){
  
     console.log('this.newEditor data', this.newEditor.getData());
  
  }

【讨论】：