Ckeditor5 自定义构建集成在角度应用程序中

Question

我正在尝试在我的 Angular 应用程序中使用 ckeditor 5。我已经安装了受人尊敬的库并使用了。但默认的ckeditor5只显示有限的工具。所以我尝试使用 online builder 链接集成自定义构建。

我按照以下步骤构建自定义构建器

1. 我选择了“经典编辑器”
2. 我的编辑器所需的精选开源插件
3. 在工具栏配置中，我保持默认（Wrapped）
4. 在安装步骤中，我选择 Angular 作为技术，自托管（npm）作为集成方法，下载项目作为输出。

现在项目已下载，我进入该项目内部并执行了

npm install

， 如果我使用

ng serve

运行该项目，我可以在浏览器中看到编辑器

然后我做了

ng build

来构建该项目。在这个项目中创建了

dist

文件夹。在这个文件夹中我找到了

ckeditor5-custom-project

文件夹。在这个文件夹中发现了两个文件。

1. 3rdpartylicenses.txt（文件）
2. 浏览器（文件夹）

在

browser

文件夹中我发现了以下三个文件

1. index.html
2. 主-YKLNTVL.js
3. polyfills-SCHOHYNV.js
4. 样式-5INURTSO.css

因此，将此 dist 文件夹文件复制粘贴到我的

src > assets > ckeditor5

文件夹内的 Angular 应用程序中。

现在我如何在我的角度应用程序中使用这个文件夹来显示编辑器。任何人都可以建议后续步骤，或者我遵循的步骤是否正确？还是我哪里弄错了？

在 youtube 中找到了一些教程，但这些教程与当前最新的自定义构建无关。意味着当前版本的自定义构建中没有

ckeditor.js

文件

谢谢你

Answer 1

来自此演示 ckeditor5 存储库 https://github.com/ckeditor/ckeditor5-angular

我按照以下步骤在我的 Angular 应用程序中实现自定义的 ckeditor。

1. 在该存储库中，我复制了

   ./src/ckeditor

   和

   ./src/editor

   文件夹，并将其粘贴到

   ./src/

   文件夹下的角度应用程序中。

2. 将上面存储库中的 (package.json) 所需的 ckeditor5 包复制粘贴到我的 Angular 应用程序中。我已经使用了另一个版本的ckeditor5，所以我删除了该版本并粘贴了新版本的包。

3. 在我的 angular.json 文件的

   ckeditor5/ckeditor5.css

   部分下添加了

   styles

   。

4. 在我的

   xxx.module.ts

   文件中，我在导入部分添加了

   CKEditorModule

   。并从

   import { CKEditorModule } from 'src/ckeditor/ckeditor.module';

   进口

5. 在我的组件 html 文件中我添加了以下代码

<ckeditor
                    formControlName="content"
                    [editor]="Editor"
                    (ready)="onReady($event)"
                    id="content"
                    name="content">
                  </ckeditor>

6. 在我的组件 ts 文件中，我添加了以下内容

import { AngularEditor } from 'src/editor/editor';

// Added below variables
public Editor = AngularEditor;
public editorInstance?: AngularEditor;

// Added below method
public onReady( editor: AngularEditor ): void {
        this.editorInstance = editor;
}

注意：在我的应用程序中，旧的默认 ckeditor5 在很多地方都使用过。所以我遇到了类似重复模块错误的错误。为了解决这个问题，我从 package.json 中删除了现有的旧包并修改了所有组件