如何在 Angular 中使用在线构建 CKEditor？答案

【问题标题】：How to use online build CKEditor in angular?如何在 Angular 中使用在线构建 CKEditor？
【发布时间】：2020-06-27 05:26:36
【问题描述】：

我想将 ckeditor 嵌入到材质选项卡中。我想让编辑器支持字体颜色功能，所以我从以下链接在线构建ckeditor：

然后通过以下命令为 Angular 安装 CKEditor 5 WYSIWYG 编辑器组件：

npm install --save @ckeditor/ckeditor5-angular

按照下面web page中的说明，我把ckeditor.js和对应的翻译文件复制到src目录下，导入到组件文件中；然后修改tsconfig.json。

但是，编辑器不显示。

如何配置编辑器使其支持字体颜色功能？

这里是stackBlitz。

【问题讨论】：

【解决方案1】：

根据ckeditor5 document你需要按照这个步骤：-

你需要安装npm install --save @ckeditor/ckeditor5-angular && npm install --save @ckeditor/ckeditor5-build-classic作为CKeditor依赖。
在主应用程序模块中导入 CKeditor 模块 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';。 && 在imports 中添加CKEditorModule。

@NgModule({ 进口：[ CKEditor模块 ] })
在 app.component 中添加依赖，例如 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
像这样在应用组件中添加public Editor = ClassicEditor;。

导出类 AppComponent { 公共编辑器 = 经典编辑器； }
添加.html文件，如<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

希望这对你有帮助:-)

【讨论】：