使用 ReactJS 将插件添加到 CKEditor5 的自定义构建

Question

我正在尝试将插件添加到 CKEditor5 的经典版本中。 我已按照此页面上的说明进行操作： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

我可以说我已经正确完成了所有操作，因为当我打开sample/index.html时，一切正常。

现在是时候将这个自定义构建与我的 react 应用程序集成了。

此页面上的说明，“描述”要做什么：

您将在项目旁边的某个位置创建一个新构建，并像包含现有构建之一一样包含它。

它说“包括它，就像你包含在现有版本之一中一样”。 好吧，这就是我包含经典版本的方式：

import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <CKEditor
        editor={ClassicEditor}
        // Other Props
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

所以，我会假设我会做这样的事情：

import React from "react";
import ReactDOM from "react-dom";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from './ckeditor/ckeditor'


import "./styles.css";

function App() {
  return (
    <div className="App">
      <CKEditor
        editor={ClassicEditor}
        // Other Props
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

也就是说，只需将import语句更改为：

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

至

import ClassicEditor from './ckeditor/ckeditor'

使用./ckeditor/ckeditor/是ckeditor.js文件，该文件位于我的自定义构建的修改版本的build文件夹中。

但是，这不起作用。 新的 ckeditor.js 文件中没有导出。 既不是默认导出也不是命名导出。 所以也许我应该像这样导入文件：

import './ckeditor/ckeditor'

但是我如何告诉 React 组件使用哪个编辑器。 有一个editor prop，它采用要使用的编辑器的名称——即：

<CKEditor
  editor={ClassicEditor}
  // Other Props
/>

所以我被困住了。 我不知道如何将自定义构建包含到我的反应应用程序中。

有任何想法吗？

谢谢。

Answer 1

CKEditor 团队帮我解决了这个问题。 您可以在此处阅读解决方案： https://github.com/ckeditor/ckeditor5/issues/2072#issuecomment-534987536

The main point was that I needed to publish my customized build as an npm package, install that package on my site and then import the installed package.

一旦我这样做了，一切都很好。

Answer 2

忘记您对自定义 cke4 的了解，然后阅读此内容

---

自定义 CK5 编辑器的步骤

• fork ckeditor5 经典版本
• 克隆你的叉子
• 定制 ckeditor（我使用了在线构建工具）
• 构建编辑器$ npm build
• 添加并提交更改
• 将您的提交推送到您的分叉仓库
• 将您的分叉存储库克隆到您的项目并使用您构建的 ckeditor。

这不是直截了当的，关于它的文档充其量是不存在的。 我的痛苦是你的收获<3

额外的

在线构建工具让您下载 a.zip，我所做的是用 zip 形式的文件覆盖了我的分叉项目文件。 我构建、上传等。请注意，工具栏的配置位于 sample/index.html 中，如果您不添加它，那么您将看不到您的工具栏。

记住一定要添加工具栏配置！

** 编辑 **

如果你在一个团队中工作，你会想要 go 版本在顶部。

更简单

• 使用在线构建工具
• 将 zip 下载到您的项目中
• go 到 git 和npm install
• 编辑您的ckeditor.js以包含来自sample/index.html的配置（我将所有内容都放在了Editor.defaultConfig中）
• 在同一文件夹中运行npm build
• go 到您的主项目并从您刚刚制作的构建中导入 ckeditor 例如import ClassicEditor from './online-build/build/ckeditor';
• 在项目文件夹中运行npm build

如果除了您没有工具栏外一切正常，那么您需要重新检查您的配置设置。

干杯!

** 编辑 **

我想添加似乎不太支持的“源代码编辑”插件。 我所做的是手动从ckeditor5 主 git中获取源代码编辑代码（所有插件都列在底部），然后将该代码粘贴到我的项目中并从该文件夹中导入。 这很漂亮，不适合团队但它有效 - 祝你好运

import SourceEditing from './ckeditor5-source-editing/src/sourceediting.js';