How to add a plugin in @ckeditor/ckeditor5-react manually?

2.1k Views Asked by At

So, I have a plugin from https://www.pramukhime.com/ which is language plugin. So, they gave me a zip file containing various files.

Screenshot of file:

plugin files

I am guessing plugin.js is the main file to import. (Also, it's been minified)

So, I tried the following but getting error

Code:

import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import Pramukhime from "./../../Assets/pramukhime/plugin.js";

...

        <CKEditor
          editor={ClassicEditor}
          data={questionData}
          config={{
            plugins: [Pramukhime]
          }}
          onChange={(event, editor) => {
            const data = editor.getData();

            handleQuestionEditor(data);

          }}

        />

So, how should I add this plugin in my editor?

Thanks

EDIT: error when added extraPlugins in config

config={{extraPlugins:'...'}}

error

2

There are 2 best solutions below

2
On

You'll need to add those files to your ckeditor/plugins folder. The readme file will tell you what to name the enclosing folder (if you use a name the plugin doesn't expect, it won't be loaded at all).

After that you'll need to add any dependencies the same way, since CKEditor can't do this automatically. Then you can simply enable the plugin, along with any dependencies by adding one or more config.extraPlugins = 'plugin-name'; lines to your CKEditor configuration.

Source: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_plugins.html#manual-installation

0
On

The problem is with the package i think you plugin depend upon another dependency or may be the problem with version compatibility.