Liferay 7: Adding external plugins to CKEditor

RE: Liferay 7: Adding external plugins to CKEditor

2019-02-14T17:38:53Z

Hi,

I'm trying to add the htmlbuttons plugin (https://ckeditor.com/cke4/addon/htmlbuttons) to ckeditor in my Liferay 7.1.2 GA3 instance, like this:

@Component(immediate = true, service = DynamicInclude.class)
public class RvmCKEditorDynamicInclude implements DynamicInclude {

&nbsp; @Override
&nbsp; public void include(HttpServletRequest request, HttpServletResponse response, String pKey) throws IOException {
&nbsp; &nbsp; Bundle bundle = _bundleContext.getBundle();
&nbsp; &nbsp; URL entryURL = bundle.getEntry("/META-INF/resources/ckeditor/plugins/htmlbuttons/plugin.js");
&nbsp; &nbsp; StreamUtil.transfer(entryURL.openStream(), response.getOutputStream(), false);
&nbsp; }

&nbsp; @Override
&nbsp; public void register(DynamicIncludeRegistry dynamicIncludeRegistry) {
&nbsp; &nbsp; dynamicIncludeRegistry.register("com.liferay.frontend.editor.ckeditor.web#ckeditor#additionalResources");
&nbsp; }

&nbsp; @Activate
&nbsp; protected void activate(BundleContext bundleContext) {
&nbsp; &nbsp; &nbsp;_bundleContext = bundleContext;
&nbsp; }

&nbsp; private BundleContext _bundleContext;
}

However, I get this bizarre behavior when I try to edit a web content:

As you can see, the plugin is not added correctly to Liferay's ckeditor, it is loaded along with the content of the Web Content Editor portlet. Anyone knows what I am missing?

Thank you!

RE: Liferay 7: Adding external plugins to CKEditor

2019-01-15T10:55:34Z

Hello Zsombor,

maybe I can help umbump the static image loading issue you reported.

Discussions and sample solutions for using static images in OSGi modules are available at:

However, you still need to patch the ckeditor youtube plugin config to work around a limitation in Liferay OSGi static image servlet proxy.

The default image resource path is relative to the Liferay Portal 7.x "frontend-editor-ckeditor-web" module, which is incorrect.

Hence, update the youtube plugin script (plugin.js) with this snippet (or equivalent) :

            editor.ui.addButton('Youtube', {
                label : editor.lang.youtube.button,
                toolbar : 'insert',
                command : 'youtube',
                //icon : this.path + 'images/icon.png'
                icon : '/o/YOUR-LIFERAY-PORTAL-OSGI-MODULE-NAME/ckeditor/plugins/youtube/' + 'images/icon.png'
            });

This approach is working for me.

I would prefer the Liferay Portal 7.x "frontend-editor-ckeditor-web" module to behave in a more consistent manner which honours the static image path of the ckeditor extension module.

Let me know if this helps.

Regards,

Tim

RE: Liferay 7: Adding external plugins to CKEditor

2018-08-03T22:35:21Z

Hi.

You have resolved?

You can share your project?

Thanks

RE: Liferay 7: Adding external plugins to CKEditor

2018-03-21T13:58:10Z

Bump!
No response for a month
Anyone, any help?

Liferay 7: Adding external plugins to CKEditor

2018-02-21T06:44:26Z

EXAMPLE: adding YouTube plugin to CKEditor in Liferay 7

I created a DynamicInclude based module and an EditorConfigContributorbased based one according to the official tutorials: Modifying an Editor’s Configuration and Adding New Behavior to an Editor

In the DynamicInclude based module:

I pasted the plugin files to src/main/resources/ckeditor/plugins/youtube/
In the component's include method I transferred each file to the respose object the following way:

// CKEDIROT_PLUGINS_PATH = "/META-INF/resources/ckeditor/plugins/";

ClassLoader classLoader = DynamicIncludeTest.class.getClassLoader();
InputStream inputStream = classLoader.getResourceAsStream(CKEDIROT_PLUGINS_PATH+"youtube/plugin.js");
StreamUtil.transfer(inputStream, response.getOutputStream(), false);

inputStream = classLoader.getResourceAsStream(CKEDIROT_PLUGINS_PATH+"youtube/lang/ar.js");
StreamUtil.transfer(inputStream, response.getOutputStream(), false);

inputStream = classLoader.getResourceAsStream(CKEDIROT_PLUGINS_PATH+"youtube/lang/cs.js");
StreamUtil.transfer(inputStream, response.getOutputStream(), false);
// ... the other language js files...

In the EditorConfigContributor based module's populateConfigJSONObject method:

I appended "youtube" to the external plugins:

String extraPlugins = jsonObject.getString("extraPlugins");
extraPlugins = extraPlugins + ",youtube,";
jsonObject.put("extraPlugins", extraPlugins);

I inserted the button into toolbar:

JSONArray toolbarLiferay = jsonObject.getJSONArray("toolbar_liferay");
JSONArray newTools = JSONFactoryUtil.createJSONArray();
newTools.put("Youtube");
toolbarLiferay.put(newTools);

I deployed the two modules and have a fully functional Youtube plugin, with a small problem.

PROBLEM: - The button won't have an icon

I cannot transfer the plugin's png icon in the DynamicInclude based module's include method, since a DynamicInclude module...

...allows anyone to inject JavaScript code right after the editor instantiation to configure/change the editor.

In my example if I try to pass the YouTube plugin's png icons, like...

inputStream = classLoader.getResourceAsStream(CKEDIROT_PLUGINS_PATH+"youtube/images/icon.png");
StreamUtil.transfer(inputStream, response.getOutputStream(), false);

... I'll just get parse errors:

ERROR [http-nio-8080-exec-1][GoogleJavaScriptMinifier:116] (http://localhost:8080/group/guest/~/control_panel/manage:1922): Parse error. illegal character
ERROR [http-nio-8080-exec-1][GoogleJavaScriptMinifier:116] (http://localhost:8080/group/guest/~/control_panel/manage:1922): Parse error. missing } after function body
ERROR [http-nio-8080-exec-1][GoogleJavaScriptMinifier:116] (http://localhost:8080/group/guest/~/control_panel/manage:1923): Parse error. illegal character
ERROR [http-nio-8080-exec-1][GoogleJavaScriptMinifier:116] (http://localhost:8080/group/guest/~/control_panel/manage:1923): Parse error. missing } after function body
ERROR [http-nio-8080-exec-1][GoogleJavaScriptMinifier:116] (http://localhost:8080/group/guest/~/control_panel/manage:1924): Parse error. illegal character
ERROR [http-nio-8080-exec-1][GoogleJavaScriptMinifier:116] (http://localhost:8080/group/guest/~/control_panel/manage:1924): Parse error. missing } after function body
ERROR [http-nio-8080-exec-1][GoogleJavaScriptMinifier:116] (http://localhost:8080/group/guest/~/control_panel/manage:1924): Parse error. illegal character
ERROR [http-nio-8080-exec-1][GoogleJavaScriptMinifier:129] {0} error(s), {1} warning(s)

QUESTION

How can I pass a plugin's icons to be able to see it on it's respective button in CKEditor?
Is there a simpler approach to resolving this problem scenario?

Thank you for reading and assisting!