Ckeditor5: How to add a custom plugin to ckeditor builds?

[pomek]

Is this a bug report or feature request? (choose one)

Other (question)

💻 Version of CKEditor

v10.0.1

📃 Other details that might be useful

As I ask in the title – how should I add the custom plugin to the ckeditor builds?

I would like to create a fiddle that will show something in the editor but I didn't know how to do it the right way.

The code below seems to work:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // I know about `ClassicEditor.build` properties so it is easy for me.
        plugins: ClassicEditor.build.plugins.concat( [ /* my plugins */ ] )
    } )
    .then( editor => {
        console.log( '#editor2', editor );
    } )
    .catch( error => {
        console.error( error );
    } );

but at the beginning, I wanted to do something like this:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ /* my plugins */ ]
    } )
    .then( editor => {
        console.log( '#editor2', editor );
    } )
    .catch( error => {
        console.error( error );
    } );

which works but the available plugins in the build weren't loaded.

Maybe it is described in the documentation but I didn't found. I wasn't looking for longer than 5 mins, though.

[Reinmar]

You can't add a plugin to an existing build. Unfortunately, this leads to a severe code duplication but also to runtime errors.

Short answer – how to add plugins?

Read the Installing plugins guide first.

It explains that to add a plugin to a build, you need to customize this build (rebuild it). It also shows the other options (i.e. not using builds, but building CKEditor 5 from source).

Why does the problem exist?

The problem is that your build and the plugin you want to enable have the same dependencies:

• Build -> editor, plugins -> core, engine -> utils
• Plugin -> core, engine -> utils

Which means that if you'll add a plugin to an existing build you'll get this: editor + plugins + core + engine + utils + new plugin + some core modules + some engine modules + some utils modules.

Besides an awfully big code size, this also leads to some core mechanisms being included twice which leads to runtime errors. This is an implementation issue that we have and perhaps we could fight that, but code duplication won't go away, so we should rather find an architectural solution which will get rid of code duplication.

Can we do that? Theoretically yes. If we'll find a way to remove dependencies of plugins. This was discussed already in https://github.com/ckeditor/ckeditor5/issues/667. We can get rid of many dependencies to the engine and perhaps to the core and to the UI. Those most popular things which most of the plugins need can be exposed on controllers/hubs in the editor instance.

Unfortunately, we can't do that with all dependencies. CKEditor 5 has a modular architecture on purpose. This means a small core plus many optional features that can be loaded on demand. Thanks to that we're able to build very optimised builds. But, on the other hand, it means that there will always be plugins which need to import something. Which basically means that a consumer of a plugin will not be sure whether this plugin can be added to a build or not...

This is sad. Publishing builds caused us many troubles. If we didn't have builds, the problem would not exist. Everyone would build the editor from source and code duplication would not exist.

So, what we're going to do? I'm not sure yet. Perhaps we'll limit its severity by reducing the number of dependencies and working on those runtime errors. But it won't go away completely.

Let's continue the discussion what to do in https://github.com/ckeditor/ckeditor5/issues/667.

[alexisvisco]

Such a logical way to add a custom plugin to an editor than re-building the whole thing instead of just doing a viable architecture while conceiving your library.

So disappointing.

[aqrojo]

In the product page:

CKEditor 5

Modern JavaScript rich text editor with a modular architecture….
…Extensible and customizable by design.

When you search how to add a custom plugin in google:

Adding a plugin to a build

1. Clone the build repository.
2. Install the plugin package.
3. Add it to the build configuration.
4. Bundle the build.

[alexisvisco]

I know how to add a plugin but it's just a non-sense for me. Look what your concurrence does, they do a better job than CKEditor for the plugin management system.

The CKEditor 4 had better plugin management than version 5, there are any reasonable reasons why did you choose this approach over another?