Message Boards

Not able to add new button on ckeditor

Vipul Khatavkar, modified 5 Years ago.

Not able to add new button on ckeditor

New Member Posts: 6 Join Date: 10/19/11 Recent Posts
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.
Vipul Khatavkar, modified 5 Years ago.

RE: Not able to add new button on ckeditor

New Member Posts: 6 Join Date: 10/19/11 Recent Posts
No reply yet. Has anybody tried this?
thumbnail
Nader Jafari, modified 5 Years ago.

RE: Not able to add new button on ckeditor

Junior Member Posts: 84 Join Date: 8/24/11 Recent Posts
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.
Marcin Pawluk, modified 4 Years ago.

RE: Not able to add new button on ckeditor

New Member Posts: 16 Join Date: 1/22/20 Recent Posts
@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.
Lee Jordan, modified 4 Years ago.

RE: Not able to add new button on ckeditor

Expert Posts: 449 Join Date: 5/26/15 Recent Posts
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.
thumbnail
Geert van der Ploeg, modified 3 Years ago.

RE: Not able to add new button on ckeditor

New Member Posts: 22 Join Date: 4/3/14 Recent Posts
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");