我正在尝试将ckeditor安装到我的角度项目中。我已经尝试通过npm安装ckeditor4-angular
,但是无法找到添加WIRIS mathType之类的插件的方法。请问我该如何将编辑器安装到我的angular项目中以及安装插件?
答案 0 :(得分:3)
在第7步之后
将ckeditor代码添加到package.json “依赖关系”:{ ... “ @ ckeditor / ckeditor5-angular”:“ ^ 1.1.2”, ... }
步骤8:
npm安装
第9步:
您可以在app.module.ts文件中添加
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
CKEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
步骤10: 在文件tsconfig.json中添加allowJs:ture
"compilerOptions": {
"allowJs": true,
}
步骤11:
将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>'
};
}
第12步:
也将它添加到您的template.html
<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>
答案 1 :(得分:2)
这是与此https://github.com/ckeditor/ckeditor5-angular/issues/134有关的问题。您需要创建自定义CKEditor构建,并在其中包含必要的插件。以下是指南:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html 顺便说一句,我建议您使用最新版本的CKEditor 5。
UPD:
git clone https://github.com/ckeditor/ckeditor5-build-classic.git
npm install
npm install --save @wiris/mathtype-ckeditor5
src/ckeditor.js
并向编辑器添加新插件:...
import MathType from '@wiris/mathtype-ckeditor5';
...
ClassicEditor.builtinPlugins = [
...
MathType
];
ClassicEditor.defaultConfig = {
toolbar: {
items: [
...
'MathType',
...
]
},
...
};
yarn run build
build
文件夹复制到您的项目。例如src/assets/js/ck-editor-math-type/
-> translations
-> ...
-> ckeditor.js
package.json
"dependencies": {
...
"@ckeditor/ckeditor5-angular": "^1.1.2",
...
}
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>'
};
}
<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>
希望这对您有所帮助。