在ckeditor上创建自定义插件以进行角度应用

Question

我需要为ckeditor创建一个自定义插件，以允许用户创建一个html HTML元素。

我设法在小项目上创建了这个插件，包括我的脚本元素中的代码，如ckeditor示例中所示（其后：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html）。一切正常。

但是我的问题是将插件包含在我的Angular应用程序中。我不知道如何导入。

我尝试了多种方法来导入由webpack生成的内置ckeditor.js文件，但从未成功...

所以我的主要问题是我不明白如何从简单的项目中生成带有插件的内部版本并将其导入到Angular应用程序中。

感谢有人想解决这个问题？

Answer 1

我发现了怎么做。

1. 克隆ckeditor5-build-classic

   git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
   cd ckeditor5-build-classic
   

2. 安装依赖项以及您可能想要添加的任何其他插件（例如，对齐）

   npm i npm install --save-dev @ckeditor/ckeditor5-alignment

3. 使用已添加的插件更新src/ckeditor.js

   import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

   // Plugins to include in the build.
   ClassicEditor.builtinPlugins = [
       ...
       Alignment                                                            
   ]; 
   

4. 运行npm run build打包新版本

5. 将文件build/ckeditor.js复制到您的角度应用程序中的资产文件夹中

6. 这是导入文件的方式（路径可能因设置而异）：

   import * as CustomEditor from '@app/../assets/ckeditor.js';

最后在组件中像这样声明编辑器：

public Editor = CustomEditor;

Answer 2

您还需要提供配置选项。

Please check this link