[英]Adding Plugins to a Custom Build of CKEditor5 with ReactJS
I am trying to add a plugin to the classic build of CKEditor5.我正在尝试将插件添加到 CKEditor5 的经典版本中。 I have followed the instructions on this page: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html
我已按照此页面上的说明进行操作: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html
I can tell that I've done everything properly since everything works as it is supposed to when I open up the sample/index.html
.我可以说我已经正确完成了所有操作,因为当我打开
sample/index.html
时,一切正常。
Now comes the time to integrate this custom build with my react app.现在是时候将这个自定义构建与我的 react 应用程序集成了。
The instructions on this page , 'describe' what to do: 此页面上的说明,“描述”要做什么:
You will create a new build somewhere next to your project and include it like you included one of the existing builds.
您将在项目旁边的某个位置创建一个新构建,并像包含现有构建之一一样包含它。
It says to 'include it like you included of one of the existing builds'.它说“包括它,就像你包含在现有版本之一中一样”。 Well, this is how I included the classic-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);
So, I would assume that I would do something like this:所以,我会假设我会做这样的事情:
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);
That is, simply change the import
statement from:也就是说,只需将
import
语句更改为:
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
to至
import ClassicEditor from './ckeditor/ckeditor'
With ./ckeditor/ckeditor/
being the ckeditor.js
file found in the build
folder of my modified version of the custom build.使用
./ckeditor/ckeditor/
是ckeditor.js
文件,该文件位于我的自定义构建的修改版本的build
文件夹中。
But, this does not work.但是,这不起作用。 There is no export in the new ckeditor.js file.
新的 ckeditor.js 文件中没有导出。 Neither a default export nor a named export.
既不是默认导出也不是命名导出。 So perhaps I should import the file like this:
所以也许我应该像这样导入文件:
import './ckeditor/ckeditor'
But then how do I tell the React component which editor to use.但是我如何告诉 React 组件使用哪个编辑器。 There is an
editor
prop, which takes the name of the editor to use -- namely:有一个
editor
prop,它采用要使用的编辑器的名称——即:
<CKEditor
editor={ClassicEditor}
// Other Props
/>
So I am stuck.所以我被困住了。 I have no idea how to include the custom build into my react app.
我不知道如何将自定义构建包含到我的反应应用程序中。
Any ideas?有任何想法吗?
Thanks.谢谢。
The CKEditor team helped me solve this problem. CKEditor 团队帮我解决了这个问题。 You can read the solution here: https://github.com/ckeditor/ckeditor5/issues/2072#issuecomment-534987536
您可以在此处阅读解决方案: 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. 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.
Once I did that, everything worked just fine.一旦我这样做了,一切都很好。
Forget what you know about customizing cke4 then read this忘记您对自定义 cke4 的了解,然后阅读此内容
Steps to customize your CK5 Editor自定义 CK5 编辑器的步骤
$ npm build
$ npm build
This is not straight forward and the documentation on it is non-existent at best.这不是直截了当的,关于它的文档充其量是不存在的。 My pain is your gain <3
我的痛苦是你的收获<3
Extra额外的
The online build tool has you download a.zip and what I did was overwrote my forked project files with the ones form the zip.在线构建工具让您下载 a.zip,我所做的是用 zip 形式的文件覆盖了我的分叉项目文件。 I built, uploaded, etc. Make note that the config for the toolbar is inside the sample/index.html if you don't add that then you won't see your toolbar.
我构建、上传等。请注意,工具栏的配置位于 sample/index.html 中,如果您不添加它,那么您将看不到您的工具栏。
Remember sure to add the toolbar config!记住一定要添加工具栏配置!
** EDIT ** ** 编辑 **
If you're working on a team you'll want to go with the version at the top.如果你在一个团队中工作,你会想要 go 版本在顶部。
npm install
npm install
ckeditor.js
to include the config from sample/index.html
(I put everything in my Editor.defaultConfig
)ckeditor.js
以包含来自sample/index.html
的配置(我将所有内容都放在了Editor.defaultConfig
中)npm build
npm build
import ClassicEditor from './online-build/build/ckeditor';
import ClassicEditor from './online-build/build/ckeditor';
npm build
npm build
If everything works except you don't have a toolbar then you need to re-examine your config setup.如果除了您没有工具栏外一切正常,那么您需要重新检查您的配置设置。
Cheers!干杯!
** EDIT ** ** 编辑 **
I wanted to add the "source editing" plugin which doesn't readily seem supported.我想添加似乎不太支持的“源代码编辑”插件。 What I did was manually snagged the source-editing code from the ckeditor5 main git (all the plugins are listed at the bottom) then pasted that code into my project and imported from that folder.
我所做的是手动从ckeditor5 主 git中获取源代码编辑代码(所有插件都列在底部),然后将该代码粘贴到我的项目中并从该文件夹中导入。 This is pretty and it's not suitable for teams BUT IT WORKS - good luck
这很漂亮,不适合团队但它有效 - 祝你好运
import SourceEditing from './ckeditor5-source-editing/src/sourceediting.js';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.