CODEWITHSUNDEEP
javascriptreactjsckeditor
Andy Wallace
Andy Wallace

Reputation: 689

CKEditor5 react component - add plugins problems

In adding the CKEditor5 component to my React application, I discovered that I need to add more plugins - which I have done, adding and rebuilding editor per docs, specifically adding:

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Font from '@ckeditor/ckeditor5-font/src/font';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';

and rebuilding. First issue:

I have seen a few places where this:

Array.from( editor.ui.componentFactory.names() );

should give me a list of the toolbar items so I can verify that I have what I need.. I updated to use the name of the editor that I am using, so:

Array.from( ClassicEditor.ui.componentFactory.names() );

Which fails because there is no "ui" in ClassicEditor... what am I missing here?

Second - now that I have installed plugins, and rebuild ckeditor.js, I'm trying to make sure that I add this new stuff to my existing React project - there is a public/ckeditor directory in there. I assumed that I should take the ckeditor.js from the "ckeditor5-build-classic/build/" directory, and put it into public/ckeditor. But where do I get the actual plugins? there seems to be a set in ckeditor5-build-classic/node_modules/@ckeditor, but that didn't seem to work. Thoughts?

Upvotes: 0

Views: 1760

Answers (1)

Maciej Bukowski
Maciej Bukowski

Reputation: 3348

I have seen a few places where this:

Array.from( editor.ui.componentFactory.names() ); should give me a list of the toolbar items so I can verify that I have what I need.

I updated to use the name of the editor that I am using, so:

Array.from( ClassicEditor.ui.componentFactory.names() );

ClassicEditor is a class, not an instance.

You have to do sth like this:

ClassicEditor.create( el, config ).then( editor => {
    console.log( Array.from( editor.ui.componentFactory.names() ) );
} );

to get all available toolbar buttons.

Second - now that I have installed plugins, and rebuild ckeditor.js, I'm trying to make sure that I add this new stuff to my existing React project - there is a public/ckeditor directory in there. I assumed that I should take the ckeditor.js from the "ckeditor5-build-classic/build/" directory, and put it into public/ckeditor. But where do I get the actual plugins? there seems to be a set in ckeditor5-build-classic/node_modules/@ckeditor, but that didn't seem to work. Thought

When you build an editor outside of the React component, all plugins you require should be bundled to the build so all you need is to copy the built editor to the React project. It's described here.

Upvotes: 1

Related Questions