CKEditor 5：如何在Angular应用程序中访问原始文本

编程问答 2022-07-22

问题描述

我在Angular应用程序中使用CKEditor 5。我必须检查用户在编辑器中输入的文本至少有100个字符。问题在于绑定到编辑器的模型会接收文本+编辑器创建的用于格式化的html标记。因此，我想以某种方式将模型的第二个属性绑定到编辑器的原始文本。这可能吗？

在我的组件中，我可以像这样访问编辑器：

 @ViewChild('ckeditor',{ static: true }) private _ckEditor: CKEditorComponent;

我已经尝试过将其作为测试，但是找不到原始文本：

  onBlur() {
   console.log( this._ckEditor.editorInstance.document.getBody().getText());
  }

和html：

<ckeditor #ckeditor id="desc" name="desc" [editor]="editor" (blur)="onBlur()"
                [(ngModel)]="mymodel"></ckeditor>

解决方法

CK Editor 5 现在提供 Word Count Plugin，可用于统计编辑器中输入的单词和字符。

enter image description here

文档链接：https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html

angularangularckeditorckeditorckeditorckeditor5