Integrating additional plugin

[oliverkidd]

I have tried for days to integrate a plugin to this package, but it does not seem to be working. I want to try and add in support for math/chem equations using the following rpm package (https://github.com/isaul32/ckeditor5-math).

I have managed to install and adjust the config, but the custom plugin is not being loaded into the config. Any pointers?

Maybe this could be added as a feature - it is extremely useful.

[lamuertepeluda]

Hi, have a look at https://github.com/nshenderov/strapi-plugin-ckeditor/issues/100

You can (perhaps) still use the .txt config if you are not interested in using .ts o .js config as provided there.

Check also the base config (yeah, it's a bit large and ugly)

The very important thing is that

1. you import your plugins in Strapi app.tsx (src/admin/app.tsx).

e.g.

import 'my-package-name/my-custom-plugin'
// this will register, for instance, CKeditor5.myCustom.plugin in your globalThis (i.e. Window object)

CKEditor5 plugin seem to use global CKEditor5 objects, so once imported they should register there somehow.

2. Change your ckeditor.txt/.ts/.js like here (some pieces omitted for brevity sake)

   globalThis.CKEditorConfig = {
   theme: {
     // set theme always light
     light: "light",
     dark: "light",
   },
   configs: {
     // define a custom editor preset based on toolbar editor preset
     custom: { // <-- name of your config
       field: {
         key: "custom",
         value: "custom",
         metadatas: {
           intlLabel: {
             id: "ckeditor.preset.custom.label",
             defaultMessage: "Custom version",
           },
         },
       },
       editorConfig: {
         plugins: [
           ...basePlugins,
           // Custom plugins
           CKeditor5.myCustom.plugin
         ],
         // ... etc

3. You must then select "custom" (whatever your config name) for your field in the strapi content type builder UI

[oliverkidd]

Thanks! Where is the myCustom.plugin syntax coming from? I managed to do the above but the plugin was never accessible from the CKEditor5 window object?

[lamuertepeluda]

Thanks! Where is the myCustom.plugin syntax coming from? I managed to do the above but the plugin was never accessible from the CKEditor5 window object?

It's a naming convention from CKEditor plugins which use Webpack DLL plugin for being plugged in to the main editor module.

I implemented (basically for testing the capabilities) a custom widget following the tutorial and I started with their packaging tool which is still beta atm, and sets up a project that uses Webpack DLL plugin + their conventions (which I advice to follow).

In my experience, at least using TypeScript, neither approach worked straight away. But hammering a bit the project structure and declaring some globals such as a bit, you get out with a working plugin.

[oliverkidd]

Thanks I'll check it out!

[iamtun]

Thanks I'll check it out! Hi @oliverkidd, i have same issue with you. How to fix this? Can you help me?

[iamtun]

@lamuertepeluda Hello. I fixed the problem above but I want to add a cdn at the top to format the plugin's output. I have found the answer but haven't found it yet. Can you help me? "How to add a cdn to the head tag". Ex: https://jsfiddle.net/isaul32/qktj9h7x/

[lamuertepeluda]

@lamuertepeluda Hello. I fixed the problem above but I want to add a cdn at the top to format the plugin's output. I have found the answer but haven't found it yet. Can you help me? "How to add a cdn to the head tag".

Ex: https://jsfiddle.net/isaul32/qktj9h7x/

Hello @iamtun, I'm not sure the CDN is the correct approach here, since the way strapi adds dependencies is via yarn/npm. Once you install a package, you should import it into the src/admin/app.tsx file (I use the strapi TypeScript template, you will have app.js or app.jsx if you use plain JavaScript). Now you have to rebuild the frontend. Check also my first answer to this thread.

If you cannot download your plugin from npm, then you can create a plugins folder in the strapi project root directory and put your plugin code there in a subfolder and modify the config/plugin.(ts|js) file to resolve your plugin from the root plugins sub folder (check this repository development guide for examples).

Have also a look to https://docs.strapi.io/dev-docs/admin-panel-customization for how the admin panel customization works.

[iamtun]

Thanks for your feedback. After hours of searching, I solved my problem another way add import 'mathjax/es5/tex-svg-full.js' in admin/app.js . Problem solved!

[exniwe]

@lamuertepeluda @iamtun could anyone of you maybe give a quick guide on how to add plugins to your ckeditor in strapi? I followed the instructions in this thread here for hours, but it didn't work

[lamuertepeluda]

@exniwe all I did and I know is described in this thread or in #100. Is it perhaps some differences in our setups that prevent you from achieving the result?

[exniwe]

@lamuertepeluda Okay I did what you described in #100 and it works. But now I am trying to add this math plugin following your instruction, but I always get "ckeditor-duplicated-modules" error. So how would you add the math plugin?

[lamuertepeluda]

@exniwe

1. make sure you are installing your plugin version that matches the CKeditor version in this strapi plugin (was 36.0.0, if I am not wrong - pls check the package.json - I also have a PR open for upgrading, which in turn needs to be updated to 38.0.1). Having different CKEditor runtime versions can lead to that error.
2. check that the version of the plugin you will choose is DLL-compatible. Not all CKEditor plugins were ported to the relatively new DLL build of CKEditor, which makes it easy to have modular plugins.

[exniwe]

Okay, thanks @lamuertepeluda The installation as described by you worked. However, the latex expressions are not yet formatted. So, for example, when I enter an expression like x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} in the input field of the math plugin, it is displayed unformatted. The documentation says that you can adjust the plugin options here, but I don't know where exactly in the plugin itself you can do that?

[lamuertepeluda]

Hi @exniwe I don't know in the case on the plugin you are trying to add, since I never used, but generally speaking plugin options have to be provided via config using a declarative syntax.
As an example, consider how the link plugin options are provided in the base config file. Hope it helps.

[iamtun]

Okay, thanks @lamuertepeluda The installation as described by you worked. However, the latex expressions are not yet formatted. So, for example, when I enter an expression like x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} in the input field of the math plugin, it is displayed unformatted. The documentation says that you can adjust the plugin options here, but I don't know where exactly in the plugin itself you can do that?

Hi @exniwe, don't know if you have mathjax installed? If not then install mathJax and import 'mathjax/es5/tex-svg-full.js' in app.js. It works for my case

[kulak91]

Hey guys! I have a problem importing custom plugins (mine for testing or existing markdown gfm) into the /src/admin/app.tsx. The issue is in this line:

it says that CKEditor is undefined.

However if i import code directly into the ckeditor.ts config it works..

Any idea how to fix this? It also works in this same file if i will paste full code of the plugin before defining CKEditor5, but changing CKEditor5 to window.CKEditor5. (it works like this only in ckeditor.ts)

Previously i've had an older version of @_sh/strapi-plugin-ckeditor and it was defined in /config/plugins.ts and worked like a charm.

It also works if adding import of package directly into the @_sh/strapi-plugin-ckeditor: