使用ReactJS将插件添加到CKEditor5的自定义内部版本 [英] Adding Plugins to a Custom Build of CKEditor5 with ReactJS

问题描述

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

打开sample/index.html时，我可以看出我已经正确地完成了所有工作，因为一切都正常工作。

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

有关this page，‘描述’操作的说明：

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

它说要"像包含现有版本一样包含它"。好的，这就是我如何包含经典的-build：

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/是在我的自定义生成的修改版本的build文件夹中找到的ckeditor.js文件。

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

import './ckeditor/ckeditor'

但是，我如何告诉Reaction组件使用哪个编辑器呢？有一个editor道具，它接受要使用的编辑器的名称--即：

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

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

有什么想法吗？

谢谢。

推荐答案

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

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

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

这篇关于使用ReactJS将插件添加到CKEditor5的自定义内部版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！