在 ckeditor 上为 angular 应用程序创建自定义插件

Question

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

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

但我的问题是在我的 Angular 应用程序中包含该插件。我不明白如何导入它。

我尝试了许多不同的方法来导入由 webpack 生成的构建的 ckeditor.js 文件，但从未奏效...

所以我的主要问题是我不明白如何从简单的项目中使用我的插件生成构建以将其导入我的 Angular 应用程序中..

谢谢，如果有人有解决这个问题的想法？？

Answer 1

我发现了如何做到这一点。

1. 克隆 ckeditor5-build-classic

   git clone -b stable https://github.com/ckeditor/ckeditor5.git
   cd ckeditor5/packages/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;