How to add Maximize CKEditor functionality in existing CKEditor 4.11.4 ?

Message Boards

Ronak Parekh, modified 3 Years ago.

How to add Maximize CKEditor functionality in existing CKEditor 4.11.4 ?

New Member Posts: 10 Join Date: 11/5/20 Recent Posts

Hello Team,

I want to add Maximize button in toolbar of CKEditor to maximize CKEditor. We are using Liferay DXP 7.2(liferay-dxp-7.2.10-ga1). While checking ckeditor version it is showing 4.11.4 version.

How I can add maximize functionality using same version or how I can upgrade to use newer CKEditor version for example like 4.15.1.

Is there any way to create module and add maximize functionality to CKEditor? Please help.

Regards,

Ronak Parekh

frontend infrastructure

Mohammed Yasin, modified 3 Years ago.

RE: How to add Maximize CKEditor functionality in existing CKEditor 4.11.4

Liferay Master Posts: 591 Join Date: 8/8/14 Recent Posts

Hi,

Have u checked below links, these can provide you with helpful info on how modiying the ckeditor.

https://help.liferay.com/hc/en-us/articles/360017882652-Modifying-an-Editor-s-Configuration

https://help.liferay.com/hc/en-us/articles/360017882732-Using-the-Default-CKEditor-Plugins-Bundled-with-AlloyEditor

https://liferay.dev/blogs/-/blogs/add-custom-plugin-to-ckeditor-toolbar-

Ronak Parekh, modified 3 Years ago.

RE: RE: How to add Maximize CKEditor functionality in existing CKEditor 4.

New Member Posts: 10 Join Date: 11/5/20 Recent Posts

Hi Yasin,

I will check it out the links. Did you know how to use specific version of CKEditor instead of CKEditor provided by Liferay?

How we can upgrade to specific version of CKEditor from current one provided with Liferay? If you know, please provide steps that will be very helpful.

Regards,

Ronak Parekh

Mohammed Yasin, modified 3 Years ago.

RE: How to add Maximize CKEditor functionality in existing CKEditor 4.11.4

Liferay Master Posts: 591 Join Date: 8/8/14 Recent Posts

As you are looking for Maximize option, this is avaiable in Liferay 7 onwards for ckeditor Refer.

You can include maximize plugin in editor configurator and add the button in that. You can refer below code

@Component(
	    immediate = true,
	    property = {
	        "editor.name=ckeditor",
	    },
	    service = EditorConfigContributor.class)
public class CKEditorConfiguration extends BaseEditorConfigContributor {

	@Override
	public void populateConfigJSONObject(JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
			ThemeDisplay themeDisplay, RequestBackedPortletURLFactory requestBackedPortletURLFactory) {

		String extraPlugins = jsonObject.getString("extraPlugins");
		
		if (Validator.isNotNull(extraPlugins)) {
			extraPlugins = extraPlugins + ",maximize";
			jsonObject.put("extraPlugins", extraPlugins);
		}

		JSONArray toolbars = jsonObject.getJSONArray("toolbar_liferay");
		if (Validator.isNotNull(toolbars)) {
			JSONArray addButtons = JSONFactoryUtil.createJSONArray();
			addButtons.put("Maximize");
			toolbars.put(addButtons);
		}
		
		jsonObject.put("toolbar_liferay", toolbars);
	}

}

You can also add the javax.portlet.name and service.ranking:Integer in case requried for specific portlet

Ronak Parekh, modified 3 Years ago.

RE: RE: How to add Maximize CKEditor functionality in existing CKEditor 4.

New Member Posts: 10 Join Date: 11/5/20 Recent Posts

Hi Yasin,

Thanks for reply.

I have created service component for EditorConfigContributor and tried your code but after deploying maximize button is not visible. PFB screenshot for how it looks:

May be it is overriding with Help button and both Maximize and Help button is not visible.

I have also tried below code instead of creating new json array but button for help is not coming properly.

@Override
	public void populateConfigJSONObject(JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
			ThemeDisplay themeDisplay, RequestBackedPortletURLFactory requestBackedPortletURLFactory) {
		String extraPlugins = jsonObject.getString("extraPlugins");
		if (Validator.isNotNull(extraPlugins)) {
			extraPlugins = extraPlugins + ",maximize";
			jsonObject.put("extraPlugins", extraPlugins);
		}

		JSONArray toolbars = jsonObject.getJSONArray("toolbar_liferay");
		if (Validator.isNotNull(toolbars)) {
			
			JSONArray addButtons = toolbars.getJSONArray(12);
//			JSONArray addButtons = JSONFactoryUtil.createJSONArray();
			addButtons.put("Maximize");
			toolbars.put(addButtons);
		}

		jsonObject.put("toolbar_liferay", toolbars);

	}

How I can add Maximize button after source button and keep help button as it is? Please suggest. Also if any one can suggest code for how to upgrade ckeditor version in Liferay DXP 7.2 than it will be very helpful

Regards,

Ronak Parekh

Mohammed Yasin, modified 3 Years ago.

RE: How to add Maximize CKEditor functionality in existing CKEditor 4.11.4

Liferay Master Posts: 591 Join Date: 8/8/14 Recent Posts

You can try below code

@Override
	public void populateConfigJSONObject(JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
			ThemeDisplay themeDisplay, RequestBackedPortletURLFactory requestBackedPortletURLFactory) {

		String extraPlugins = jsonObject.getString("extraPlugins");
		if (Validator.isNotNull(extraPlugins)) {
			extraPlugins = extraPlugins + ",maximize";
			jsonObject.put("extraPlugins", extraPlugins);
		}

		JSONArray toolbars = jsonObject.getJSONArray("toolbar_liferay");
		if (Validator.isNotNull(toolbars)) {
			JSONArray addButtons = toolbars.getJSONArray(11);
			addButtons.put("Maximize");
		}

		jsonObject.put("toolbar_liferay", toolbars);
	}