RE: Liferay 7.4.43 Frontend and backend editor BaseEditorConfigContributor

Sebastian Wikholm, modified 2 Years ago. Regular Member Posts: 110 Join Date: 3/10/11 Recent Posts

EDIT:  8 months later, I´ve tried to find info all over on how to change the behaviour of the wysiwyg or rich text editors in liferay. The editor im mostly intrested to change is the editor that shows up when editing for example paragraphs. None of the official examples work with liferay 7.4.43, that has to do with adding buttons to the the different toolbars. The only way i can get anything out by extending BaseEditorConfigContributor is when i leave everything empty. The JSON object only has information about about file urls that liferay seems to provide. I try adding json object as they say one should, but nothing happens. I would really , really appreciate it if anyone has any luck with changing the rich text editors behaviour when editing pages on the frontend? 

EDIT2 8 months later:  the only thing that the populateConfigJSONObject method has in the jsonObject when extedning the BaseEditorConfigContributor and leaving the editorname blank, are the following lines:  

{
  "filebrowserBrowseUrl": "https://devtest1.xxx.xx/group/guest/~/control_panel/manage/-/select/file%2Clayout/selectItem?_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_0_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22com.liferay.item.selector.criteria.URLItemSelectorReturnType%22%7D&_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_1_json=%7B%22checkDisplayPage%22%3Afalse%2C%22desiredItemSelectorReturnTypes%22%3A%22com.liferay.item.selector.criteria.URLItemSelectorReturnType%22%2C%22enableCurrentPage%22%3Afalse%2C%22followURLOnTitleClick%22%3Afalse%2C%22multiSelection%22%3Afalse%2C%22showActionsMenu%22%3Afalse%2C%22showBreadcrumb%22%3Atrue%2C%22showDraftPages%22%3Afalse%2C%22showHiddenPages%22%3Atrue%2C%22showPrivatePages%22%3Atrue%2C%22showPublicPages%22%3Atrue%7D&p_p_auth=asdasd",
  "filebrowserVideoBrowseLinkUrl": "https://devtest1.xxx.xx/group/guest/~/control_panel/manage/-/select/video%2Curl/selectItem?_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_0_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22videoembeddablehtml%22%2C%22mimeTypeRestriction%22%3A%22video%22%7D&_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_1_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22videoembeddablehtml%22%7D&p_p_auth=asdasd",
  "filebrowserImageBrowseUrl": "https://devtest1.xxx.xx/group/guest/~/control_panel/manage/-/select/image%2Curl/selectItem?_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_0_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22com.liferay.item.selector.criteria.URLItemSelectorReturnType%22%2C%22mimeTypeRestriction%22%3A%22image%22%7D&_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_1_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22com.liferay.item.selector.criteria.URLItemSelectorReturnType%22%7D&p_p_auth=asdasd",
  "filebrowserVideoBrowseUrl": "https://devtest1.xxx.xx/group/guest/~/control_panel/manage/-/select/video%2Curl/selectItem?_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_0_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22videoembeddablehtml%22%2C%22mimeTypeRestriction%22%3A%22video%22%7D&_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_1_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22videoembeddablehtml%22%7D&p_p_auth=asdasd",
  "filebrowserImageBrowseLinkUrl": "https://devtest1.xxx.xx/group/guest/~/control_panel/manage/-/select/image%2Curl/selectItem?_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_0_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22com.liferay.item.selector.criteria.URLItemSelectorReturnType%22%2C%22mimeTypeRestriction%22%3A%22image%22%7D&_com_liferay_item_selector_web_portlet_ItemSelectorPortlet_1_json=%7B%22desiredItemSelectorReturnTypes%22%3A%22com.liferay.item.selector.criteria.URLItemSelectorReturnType%22%7D&p_p_auth=asdasd"
}

 

I can see that this question is asked by many, but no answers seem to be given. I´ve created a module project with a class that extends BaseEditorConfigContributor. The purpose is to add the "quote" and "addIndent" to editor, as the editor on this page seems to have.

Now ive included both alloyeditor and cheditor in the component
 

@Component(immediate = true, 
         property = {
             
                "editor.name=alloyeditor",
                "editor.name=ckeditor",
                "service.ranking:Integer=1005"
        },

        service = EditorConfigContributor.class
    )

When I in the backend edit an article i do get "public void populateConfigJSONObject" method doing something, ie i can get the json but, adding "quote" to the different editor json arrays does nothing (like 'toolbar_liferayArticle'). But when editing on the frontend absolute nothing happens, ie when selecting a text in a paragraph fragment, the method mention aboved does not get called at all.

Ive read a bunch of the articles regarding BaseEditorConfigContributor, but these do not help. A list of valid values for editor.name would be helpfull also as i cant  seem to get it to point to the right one.

EDIT: when i leave "editor.name=" empty i do get BaseEditorConfigContributor to populateConfigJSONObject to do something, but the json it provides in JSONObject is more or less empty. It only has urls for the buttons like "filebrowserImageBrowseUrl" etc. I tried to add to toolbars the camera as in the examples provided by liferay, this does nothing, logs show that the toolbars are added to the JSONObject..

I do need to have those extra buttons in all editors, If anybody could please point me in the right direction, I would really appreciate it.

Sebastian Wikholm, modified 2 Years ago. Regular Member Posts: 110 Join Date: 3/10/11 Recent Posts

Couple of days put in to this, it doesnt seem to help. I can add json configs to the JsonObject in populateConfigJSONObject, but it doesnt seem to affect at all the editor on the page.

I can only get data from the more advanced editor on the backend, like when editing web content and specifying which editor i want to get.

To get the data from the editor on the frontpage, ie when editing a page where there is a paragraph fragment, i can only get any info from the JsonObject, when leaving EditorConfigContributor.class component description empty.

No matter how i populate the JsonObject it does nothing. Found one example that seems more complete, but i guess this is too old to apply here: GitHub - NemethNorbert/CK-Alloy-Config-allow-HTML5: PoC EditorConfigContributors to allow HTML5 structure for CKEDITOR and Alloy editor

They seem to do a bit more than in the learn liferay examples with dynamicincludes and  references. 

So still if anybody could point me in the right direction, if this is knowledge not wanted to be shared, shallow hints are also welcome.