如何在angular项目中安装CKEDITOR并添加插件

Question

我正在尝试在我的angular项目中安装ckeditor。我已经尝试过通过npm安装ckeditor4-angular，但无法找到添加像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 BTW我建议你使用最新版本的CKEditor 5。

更新：

1. 克隆原始存储库：

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

1. Install dependencies

npm install

1. 自行安装必需的插件

npm install --save @wiris/mathtype-ckeditor5

1. 在编辑器中打开src/ckeditor.js和新插件：

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

ClassicEditor.builtinPlugins = [
   ...
   MathType
];

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

然后

1. 构建编辑器(您可能需要安装yarn)

yarn run build

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

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

向package.json添加ckeditor代码的

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

1. 将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>

希望这能对你有所帮助。

Answer 2

在第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>