Add plugin to CKEditor

Experience Manager (PaaS/OnPrem)
1

Hi, i’ve tryed to add this ( https://ckeditor.com/cke4/addon/wsc ) plugin into the CKEditor but nothing happen.

As described in the documentation, i’ve inserted in the ckeditor.config.overlayed.json this json:
{
“extraPlugins”: “wsc”
}
but is not enaugh, i’ve tryed something else but with no result.
Anyone can help me?

Thanks,
Matteo

1 Like
2

That will only work if the plugin is part of the packaged plugins [1]. You need to add it as a custom plugin.

[1] https://documentation.bloomreach.com/library/concepts/document-types/html-fields/ckeditor-plugins.html

3

I’ve downloaded the plugin and put it on the right folder (cms/src/main/resources/ckeditor/plugins) in the cms module, after that what should i do?

4

The name of the sub-directory is the name by which the plugin is referred to in the CKEditor configuration.

So whatever directory you put it in, use that name in the overlayed json.

5

Yes, i put it in the subdirectory “wsc” and this is the overlayed json:
{
“extraPlugins”: “wsc”
}

But nothing happens… I’ve also rebuild the project.

1 Like
6

You may miss a build step that copies the plugin sources to an ./optimized subdirectory in the target folder.

I’d recommend to first follow all the steps described at https://documentation.bloomreach.com/library/concepts/document-types/html-fields/ckeditor-plugins.html#add-a-custom-ckeditor-plugin to add the example “timestamp” plugin. Once that works, you can replace the timestamp plugin sources with the wsc ones (and change “extraPlugins” option in the CKEditor config to “wsc” instead of “timestamp”).

hth,
Mathijs

7

The plugin is correctly imported, but i’m not able to show the button.
Schermata%20del%202019-05-21%2010-34-51
How can i add the “ABC” button to the ckeditor? I’ve had some try but without any result.

8

Hi Matteo,

You’re probably not showing the toolbar group (“spellchecker”, see [1]) to which the wsc plugin adds its button.

Try setting the ckeditor.config.appended.json property of your rich text field to

{
  toolbarGroups: [
    { name: 'spellchecker' }
  ]
}

See [2] for more info on toolbar groups.

hth,
Mathijs

[1] https://github.com/WebSpellChecker/ckeditor-plugin-wsc/blob/master/plugin.js#L62
[2] https://documentation.bloomreach.com/library/concepts/document-types/html-fields/ckeditor-toolbar-configuration.html

1 Like
9

Thank you so much!!! It works :smiley: