Adding Plugins to a Custom Build of CKEditor5 with ReactJS

Question

I am trying to add a plugin to the classic build of CKEditor5. I have followed the instructions on this page: https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/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.

Now comes the time to integrate this custom build with my react app.

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 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.

But, this does not work. There is no export in the new ckeditor.js file. 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. There is an editor prop, which takes the name of the editor to use -- namely:

<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.

Answer 1

The CKEditor team helped me solve this problem. You can read the solution here: 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.

Once I did that, everything worked just fine.

Answer 2

Forget what you know about customizing cke4 then read this

---

Steps to customize your CK5 Editor

• fork the ckeditor5 classic build
• clone your new fork
• customize the ckeditor (I used the online build tool)
• build the editor with $ npm build
• add & commit changes
• push your commits to your forked repo
• clone your forked repo to your existing project and use the ckeditor from YOUR build.

This process is not very straight forward and the documentation on it is non-existent at best. Hopefully my pain is your gain!

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. 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.

Remember to add the toolbar config!

** EDIT **

If you're working on a team you'll want to go with the version at the top.

Simpler

• Use the Online Build Tool
• download the zip to your project
• go to the folder in git and npm install
• edit your ckeditor.js to include the config from sample/index.html (I put everything in my Editor.defaultConfig)
• in the same folder run npm build
• go to your main project and import ckeditor from the build you just made eg import ClassicEditor from './online-build/build/ckeditor';
• in the project folder run 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 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. This is all a bit chaotic and it's not suitable for teams BUT IT WORKS - good luck

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