实际上通过https://ckeditor.com/ckeditor-5/online-builder/可以解决大部分安装插件问题,记得去掉默认选中的ckbox,
这是付费插件, ``` 其次,选择的都是免费插件时,可以直接下载不需要其他步骤。 我是在laravel项目中cdn方式导入ckeditor的,在线构建更方便。
以下是自定义构建方法
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.
- Clone the original repo:
git clone https://github.com/ckeditor/ckeditor5-build-classic.git
- Install dependencies
npm install
- Install necessary plugin itself
npm install --save @wiris/mathtype-ckeditor5
- Open
src/ckeditor.js
and new plugin to the editor:
...
import MathType from '@wiris/mathtype-ckeditor5';
...
ClassicEditor.builtinPlugins = [
...
MathType
];
ClassicEditor.defaultConfig = {
toolbar: {
items: [
...
'MathType',
...
]
},
...
};
- Then build the editor (you maybe need to install yarn)
yarn run build
- After that copy everything from
build
folder to your project. For instance
src/assets/js/ck-editor-math-type/
-> translations
-> ...
-> ckeditor.js
- Add ckeditor code to
package.json
"dependencies": {
...
"@ckeditor/ckeditor5-angular": "^1.1.2",
...
}
- Import CKEditor to your component:
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>'
};
}
- Add it too your template.html
<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>
After step 7
Add ckeditor code to package.json "dependencies": { ... "@ckeditor/ckeditor5-angular": "^1.1.2", ... }
Step 8:
npm install
step 9:
In app.module.ts file you can add
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 { }
step 10: In file tsconfig.json add allowJs: ture
"compilerOptions": {
"allowJs": true,
}
step 11:
Import CKEditor to your component:
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>'
};
}
step 12:
Add it too your template.html
<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>