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

Question

我需要为ckeditor创建一个自定义插件，以允许用户创建一个cutom 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.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复制到 Angular 应用程序中的资产文件夹中

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

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

最后在你的组件中，只需像这样声明编辑器：

public Editor = CustomEditor;

Answer 2

您还需要提供配置选项。

请查看此链接