Scope of the blog

Integrate Media Embed and IFrame plugins in CKEditor to add any type of media and IFrame support in editor.

Prerequisite

As we know, Liferay 7 provides different WYSIWYG editors the portal. In this article we will modify the CKEditor plugins configurations.

By default, on Liferay 7 fresh setup AlloyEditor is available in the portal. We can change to CKEditor by setting following properties in porta-exp.properties file for different portlets.

Integrate Add-On Plugins in CKEditor

Now, we will integrate Media Embed and IFrame plugins which are not available in CKEditor by default in Liferay Portal.

1. Download Add-On Plugin which needs to integrate. We will integrate Media Embed and IFrame plugins in CKEditor.
2. Now, create a fragment of com.liferay.frontend.editor.ckeditor.web to integrate the Add On plugin.
   Extract the downloaded plugin zip and copy the extracted folder into the /META_INF/resources/ckeditor/plugins folder into the fragment. (Note: Create in does not exists already)
3. Then, create a module to add plugin configuration for CKEditor. The steps have been explained in the Liferay Documentation MODIFYING AN EDITOR’S CONFIGURATION.
   1. In the steps in a document, replace editor.name to ckeditor as we will configure plugin for CKEditor.
   2. For Media Embed and IFrame plugins configuration, add plugins in extraPlugins in populateConfigJSONObject method. This will add Media Embed and IFrame as plugins in CKEditor.
      if (jsonObject.has("extraPlugins")) {
String extraPlugins = jsonObject.getString("extraPlugins");
if (!extraPlugins.contains("widget")) {
extraPlugins += ",widget";
}
if (!extraPlugins.contains("embed")) {
extraPlugins += ",embed";
}
if (!extraPlugins.contains("autoembed")) {
extraPlugins += ",autoembed";
}
if (!extraPlugins.contains("iframe")) {
extraPlugins += ",iframe";
}
jsonObject.put("extraPlugins", extraPlugins);
}
   3. Modify allowContent JSON object property to allow HTML tags for embedding media and iframe support.
      if (jsonObject.has("allowedContent")) {
String allowedContent = jsonObject.getString("allowedContent");
allowedContent += "div[!data-oembed-url];iframe[align,longdesc,frameborder,height,name,scrolling,src,title,width];";
jsonObject.put("allowedContent", allowedContent);
}
   4. Also, needs to add autoEmbed_widget and embed_provider in JSON Objects as a plugin is dependent on both to work properly.
      jsonObject.put("autoEmbed_widget", "embed,embedSemantic");
jsonObject.put("embed_provider", "//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}");
   5. To make available the Media Embed icon in editor toolbar needs to add it in toolbar json.
      1. toolbar_liferay
      2. toolbar_table
      3. toolbar_phone
      JSONArray toolbarsLiferay = null;
JSONArray extraTools_liferay = JSONFactoryUtil.createJSONArray();
if (jsonObject.has("toolbar_liferay")) {
toolbarsLiferay = jsonObject.getJSONArray("toolbar_liferay");
extraTools_liferay = toolbarsLiferay.getJSONArray(7);
}
extraTools_liferay.put("-");
extraTools_liferay.put("Embed");
extraTools_liferay.put("Iframe");
if (Validator.isNull(toolbarsLiferay)) {
toolbarsLiferay = JSONFactoryUtil.createJSONArray();
toolbarsLiferay.put(extraTools_liferay);
}

      I have done steps to add Media Embed icon in the toolbar for Desktop screens. Same way we can add Media Embed icon for tables and phone screens by adding Embed and Iframe in toolbar_table and toolbar_phone JSON.

4. Done, deploy both modules and the Media Embed and IFrame plugins will be available in CKEditor to add Embed Medias and IFrames.

INEXTURE known as leading Liferay consulting services provider in India, deliver the best in class solutions that improve the effectiveness and efficiency of the product. Our highly experienced team provides crucial process backbone and framework for every product and this will enable instant and collaborative application development.