如何将CKEDITOR安装到angular项目并添加插件 [英] How to install CKEDITOR to angular project and add plugins
问题描述
我正在尝试将ckeditor安装到我的角度项目中.我已经尝试通过npm安装ckeditor4-angular
,但是找不到添加诸如WIRIS mathType这样的插件的方法.请问我该如何将编辑器安装到我的angular项目中以及安装插件?
I am trying to install ckeditor to my angular project. I already tried installing ckeditor4-angular
via npm but was unable to find a way to add plugins like the WIRIS mathType. Please how can i install the editor to my angular project and as well install plugins?
推荐答案
这是与此 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html 顺便说一句,我建议您使用最新版本的CKEditor 5.
Here is an issue regarding this https://github.com/ckeditor/ckeditor5-angular/issues/134. You need to create your custom CKEditor build and include necessary plugins into it. Here is the guide: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html BTW I suggest you to use CKEditor 5, the latest version.
UPD:
- 克隆原始存储库:
git clone https://github.com/ckeditor/ckeditor5-build-classic.git
- 安装依赖项
npm install
- 自行安装必要的插件
npm install --save @wiris/mathtype-ckeditor5
- 打开
src/ckeditor.js
并向编辑器添加新插件:
- Open
src/ckeditor.js
and new plugin to the editor:
...
import MathType from '@wiris/mathtype-ckeditor5';
...
ClassicEditor.builtinPlugins = [
...
MathType
];
ClassicEditor.defaultConfig = {
toolbar: {
items: [
...
'MathType',
...
]
},
...
};
- 然后构建编辑器(您可能需要安装yarn)
yarn run build
- 之后,将所有内容从
build
文件夹复制到您的项目中.例如
- After that copy everything from
build
folder to your project. For instance
src/assets/js/ck-editor-math-type/
-> translations
-> ...
-> ckeditor.js
- 将ckeditor代码添加到
package.json
"dependencies": {
...
"@ckeditor/ckeditor5-angular": "^1.1.2",
...
}
- 将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>'
};
}
- 也将它添加到您的template.html
<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>
希望这对您有所帮助.
这篇关于如何将CKEDITOR安装到angular项目并添加插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!