如何导入（或添加为依赖项）CKEditor 5 自定义构建

Question

我使用 UI 创建了一个自定义构建： https://ckeditor.com/ckeditor-5/online-builder/

下载 zip 后，如何将其添加为我的 Angular 项目的依赖项？ 我按照这个教程进行操作： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html

我已经准备好构建，因此每个依赖项都已安装。 我如何在我的 Angular 项目中使用它？

首先我尝试添加 .tgz 作为依赖项： npm install ./ck5editor.tgz 但没有用。

Answer 1

如果您已使用 online builder 创建了自定义 CKEditor 5 版本，并希望将其集成到您的 Angular 项目中，请按以下步骤操作：

1. 创建并下载自定义版本：

   • 转到 CKEditor 5 在线构建器。
   • 根据需要自定义您的构建，然后在构建完成后下载 ZIP 文件。

2. 提取并放入项目中：

   • 解压下载的文件。您将得到一个文件夹（我们称之为

     ckeditor5

     ），其中包含自定义构建所需的所有内容。
   • 将提取的

     ckeditor5

     文件夹放入 Angular 项目的根目录中。

3. 更新

   .gitignore

   ：
   • 如果您使用版本控制，请确保允许提交自定义构建，不要忽略其内部

     node_modules

     和

     build

     目录。为此，请删除

     .gitignore

     中排除

     ckeditor5/node_modules

     和

     ckeditor5/build

     目录的所有行，或显式添加例外，例如：

     !ckeditor5/
     !ckeditor5/node_modules/
     !ckeditor5/build/
     

4. 将自定义构建添加为本地依赖项：

   • 打开您的

     package.json

     文件并将以下行添加到

     dependencies

     部分：

     "ckeditor5-custom-build": "file:ckeditor5"
     

   • 这告诉 npm 使用本地

     ckeditor5

     文件夹作为

     ckeditor5-custom-build

     依赖项的源。

5. 安装所需的 CKEditor React 包（适用于 Angular）

   • 对于 Angular，您不需要

     @ckeditor/ckeditor5-react

     包。相反，只需按照上一步中指定的方式安装 CKEditor 自定义构建，然后继续导入它，如下所示。

6. 安装依赖项:

   • 运行

     npm install

     将自定义构建添加到您的

     node_modules

     作为本地包。

7. 在 Angular 组件中使用自定义构建：

   • 导入 CKEditor 模块并在 Angular 组件中自定义构建。这是一个例子：

     import * as CustomEditor from 'ckeditor5-custom-build/build/ckeditor';
     import { Component } from '@angular/core';
     
     @Component({
       selector: 'app-editor',
       template: `<ckeditor [editor]="Editor"></ckeditor>`
     })
     export class EditorComponent {
       public Editor = CustomEditor;
     }
     

   • 确保安装

     @ckeditor/ckeditor5-angular

     :

     npm install @ckeditor/ckeditor5-angular
     

   • 然后将其导入到你的 Angular 模块中：

     import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
     
     @NgModule({
       imports: [CKEditorModule],
       ...
     })
     export class AppModule { }
     

按照这些步骤，您的 Angular 项目将使用您的自定义 CKEditor 5 构建作为依赖项。此设置适用于开发和生产环境。