如何将 CKEDITOR 安装到 angular 项目并添加插件

Question

我正在尝试将 ckeditor 安装到我的 angular 项目中。我已经尝试ckeditor4-angular通过 npm安装，但无法找到添加像 WIRIS mathType 这样的插件的方法。请问如何将编辑器安装到我的 angular 项目以及安装插件？

Answer 1

这是关于此https://github.com/ckeditor/ckeditor5-angular/issues/134的问题。您需要创建自定义 CKEditor 构建并在其中包含必要的插件。这是指南：https: //ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html 顺便说一句，我建议您使用最新版本的 CKEditor 5。

更新：

1. 克隆原始 repo：

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

2. 安装依赖

npm install

3. 安装必要的插件本身

npm install --save @wiris/mathtype-ckeditor5

4. 打开src/ckeditor.js编辑器的新插件：

...
import MathType from '@wiris/mathtype-ckeditor5';
...

ClassicEditor.builtinPlugins = [
   ...
   MathType
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            ...
            'MathType',
            ...
        ]
    },
    ...
};

5. 然后构建编辑器（您可能需要安装纱线）

yarn run build

6. 之后，将build文件夹中的所有内容复制到您的项目中。例如

src/assets/js/ck-editor-math-type/
   -> translations
      -> ...
   -> ckeditor.js

7. 将ckeditor代码添加到 package.json

"dependencies": {
   ...
   "@ckeditor/ckeditor5-angular": "^1.1.2",
   ...
}

8. 将 CKEditor 导入您的组件：

import * as ClassicEditor from '../../assets/js/ck-editor-math-type/ckeditor.js';

...
export class CkeditComponent implements OnInit {

    public Editor = ClassicEditor;

    public model = {
        editorData: '<p>Hello, world!</p>'
    };
}

9. 将它也添加到你的 template.html

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

希望这对你有帮助。