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

Question

我正在尝试向 CKEditor5 的经典版本添加一个插件。我已按照此页面上的说明进行操作： https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/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 组件使用哪个编辑器。有一个editorprop，它采用要使用的编辑器的名称 - 即：

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

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

有任何想法吗？

谢谢。

Answer 1

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

要点是我需要将自定义构建发布为 npm 包，在我的网站上安装该包，然后导入已安装的包。

一旦我这样做了，一切就都正常了。