更简单

Question

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

我可以说我做的一切都正确，因为打开sample/index.html时一切正常。

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

this page上的说明“描述”了做什么：

您将在项目旁边的某个位置创建一个新版本，并包括就像您包含了其中一个现有版本一样。

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

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道具，它带有要使用的编辑器的名称-即：

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

所以我被困住了。我不知道如何将自定义版本包含到我的react应用中。

有什么想法吗？

谢谢。

Answer 1

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

主要要点是，我需要将自定义版本作为npm软件包发布，将其安装在我的网站上，然后导入已安装的软件包。

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

Answer 2

忘记你对 npm 包的了解，然后阅读这篇

自定义 CK5 编辑器的步骤

分叉 ckeditor5 classic build
克隆你的分叉
自定义 ckeditor（我使用了 online build tool）
构建编辑器 $ npm build
添加和提交更改
将你的提交推送到你的分叉仓库
将您的分叉存储库克隆到您的项目并使用您构建中的 ckeditor。

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

额外

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

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

** 编辑 **

如果您在团队中工作，您会希望使用顶部的版本。

更简单

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

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

干杯！

** 编辑 **

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

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

使用ReactJS将插件添加到CKEditor5的自定义版本中

2 个答案:

更简单