5

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

4

3 回答 3

18

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

升级版：

  1. 克隆原始仓库：

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

  1. 安装依赖项

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
  1. 添加ckeditor代码到package.json
"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>'
    };
}
  1. 也将它添加到你的 template.html
<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

希望这对您有所帮助。

于 2019-12-07T10:19:56.737 回答
3

步骤 7 之后

将 ckeditor 代码添加到 package.json "dependencies": { ... "@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>
于 2020-08-28T04:38:33.833 回答
0

以下步骤对我有用：

  1. 将“ckeditor5\build”文件夹中的所有内容复制到您的资产文件夹。

  2. 在您的 app.module.ts 文件中导入模块，例如 -

//app.module.ts 文件
从'@ckeditor/ckeditor5-angular'导入{CKEditorModule}；
...
进口：[...，CKEditorModule，]
...
  1. 现在，在您的组件中像这样导入自定义 ckeditor -

从 '../../../assets/ckeditor.js' 导入 * 作为 CustomEditor；

  1. 像这样创建编辑器的对象

公共编辑器 = 自定义编辑器。编辑；

是的，您必须使用来自 CustomEditor 对象的 Editor 属性

  1. 通过设置其配置属性来设置 ckeditor 工具栏，例如：

<ckeditor [config]="{ 工具栏：['heading', '|', 'bold'. . . . . . . ] }" [editor]="Editor">

请确保设置配置属性，因为如果您不这样做，它会抱怨。

于 2021-10-07T11:03:37.400 回答