Not able to add new button on ckeditor

RE: Not able to add new button on ckeditor

2020-08-24T08:02:54Z

Hi Vipul,
Adding a button to the toolbar works a bit different because of the structure of the JSON object. There is no such thing (anymore, or only in Liferay's CK Editor config) as different *named* sets of buttons. It's just a multi dimensional array of button names. If you output the JSONObject before trying to add the button, you'll that it looks something like:

[
&nbsp;&nbsp; &nbsp;["Bold","Italic","Underline","Strike","-","Subscript","Superscript","-","RemoveFormat"],
&nbsp;&nbsp; &nbsp;["TextColor","BGColor"],
&nbsp;&nbsp; &nbsp;["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
&nbsp;&nbsp; &nbsp;["NumberedList","BulletedList","-","Outdent","Indent"],
&nbsp;&nbsp; &nbsp;"/",
&nbsp; &nbsp; ["Styles","FontSize"],
&nbsp; &nbsp; ["Link","Unlink","Anchor"],
&nbsp; &nbsp; ["Table","-","ImageSelector","Flash","-","Smiley","SpecialChar"],
&nbsp; &nbsp; "/",
&nbsp; &nbsp; ["Cut","Copy","Paste","-","PasteText","PasteFromWord","-","SelectAll","-","Undo","Redo"],
&nbsp; &nbsp; ["Find","Replace","-","SpellChecker","Scayt"],
&nbsp; &nbsp; ["Source"],["A11YBtn"]
]

So the way to add a button here (without checking array boundaries etc.) is:

&nbsp; &nbsp; &nbsp; &nbsp; JSONArray toolbars = jsonObject.getJSONArray("toolbar_liferay");
&nbsp; &nbsp; &nbsp; &nbsp; JSONArray buttons = toolbars.getJSONArray(9);
&nbsp; &nbsp; &nbsp; &nbsp; buttons.put("-");
&nbsp; &nbsp; &nbsp; &nbsp; buttons.put("Timestamp");

RE: Not able to add new button on ckeditor

2020-02-25T20:08:49Z

Liferay should be taking and implementing feature requests for the editor development. I guarantee what you're trying to do someone else is trying to do also and we should not have to customize such a core feature.

RE: Not able to add new button on ckeditor

2020-02-25T19:10:47Z

@Vipul Khatavkar some time has passed, did you solve your problem? I have the same issue with Language plugin for CKEditor. It doesn't want to work in Liferay 7.2.1 (button doesn't appear), but when I do exactly same things in CKEditor out of Liferay it works perfectly.

RE: Not able to add new button on ckeditor

2019-03-14T10:49:37Z

Hi Vipul
if you share a repository of this project in github, anyone can help you better.
i was added some buttons in jira editor and i hope this could help you.

RE: Not able to add new button on ckeditor

2019-03-14T09:55:27Z

No reply yet. Has anybody tried this?

Not able to add new button on ckeditor

2019-02-20T03:38:59Z

Hi,

I am trying to add a new button on ckeditor in Liferay 7.1. I am following the article. I am not getting any error, however the button is also not visible in toolbar.

Attaching code snippet.

If someone has implemented similar functionality in 7.1, please provide the steps that was followed in order to get it working.

Thanks.

Added LiferaySnippetbrowser class to extend BaseEditorConfigContributor and override populateConfigJSONObject method as below:

@Component(
        property = {"editor.name=alloyeditor", "editor.name=ckeditor", 
                     "service.ranking:Integer=100"},
        service = EditorConfigContributor.class
)
public class LiferaySnippetbrowser extends BaseEditorConfigContributor {
    
    @Override
    public void populateConfigJSONObject(JSONObject jsonObject, Map<string, object> inputEditorTaglibAttributes,
            ThemeDisplay themeDisplay, RequestBackedPortletURLFactory requestBackedPortletURLFactory) {
        
        JSONArray toolbars = jsonObject.getJSONArray("toolbar_tablet");
        if (toolbars != null) {
          
               JSONArray addButtons = JSONFactoryUtil.createJSONArray();
          
               addButtons.put("camera");
                          
                toolbars.put(addButtons);
                
                jsonObject.put("toolbar_tablet", toolbars);
        }else if(jsonObject.getJSONObject("toolbars") != null){
            JSONObject toolbar1 = jsonObject.getJSONObject("toolbars");
            if (toolbar1 != null) {
                JSONObject toolbarAdd = toolbar1.getJSONObject("add");

                if (toolbarAdd != null) {
                    JSONArray addButtons = toolbarAdd.getJSONArray("buttons");

                    addButtons.put("camera");
                   
                }
            }
        }
        else{
        
          JSONArray addButtons = JSONFactoryUtil.createJSONArray();
           addButtons.put("camera");
           
        jsonObject.put("liferay_add", addButtons);
        
        }
    }

}</string,>

And

@Component(immediate = true, service = DynamicInclude.class)
public class AlloyEditorMyButtonDynamicInclude extends BaseDynamicInclude {

        @Override
        public void include(
                        HttpServletRequest request, HttpServletResponse response,
                        String key)
                throws IOException {

                ThemeDisplay themeDisplay = (ThemeDisplay)request.getAttribute(
                        WebKeys.THEME_DISPLAY);

                PrintWriter printWriter = response.getWriter();

                StringBundler sb = new StringBundler(7);

                sb.append("<script src="\&quot;&quot;);" sb.append(themedisplay.getportalurl()); sb.append(portalutil.getpathproxy()); sb.append(_servletcontext.getcontextpath()); sb.append(" js buttons.js"); sb.append("\" "); sb.append("type="\&quot;text/javascript\&quot;"></script>");

                printWriter.println(sb.toString());
        }

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

        @Reference(
                target = "(osgi.web.symbolicname=com.liferay.frontend.editor.ckeditor.my.button.web)"
        )
        private ServletContext _servletContext;
}

The same code works if I configure default WYSIWYG editor as alloyeditor.