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

Question

我在 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 ); }

提前致谢。

Answer 1

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

小号。阿罗拉

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

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

Answer 2

如果您想避免使用 ngModel，我找到了另一种方法。

在您的模板中为编辑器命名（在此示例中，我将其命名为 myEditor）：

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

然后在你的组件代码中获取它的引用（出于某种原因，我无法导入 CKEditorComponent class，所以我不得不使用 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 '';
  }
}

Answer 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());
  
  }

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

How to retrieve data from ckeditor 5 in angular 7?

ckeditor

typescript

angular

angular7