Turn CKEditor dropdown into a multi-select list

[wim.lustenhouwer]

Hi all, 

I'm using the combostyles plugin for CKEditor to allow classes to be added to html fields. These classes are multiselectable, but using a dropdown is cumbersome as the select area is rather limited. What I'd like to do is make it a multi-select list. For reference we have made this in the past with Xinha like in the attached screenshot.

Does anyone have any pointers for me?

[Mathijs den Burger]

Sounds like you need to build a custom CKEditor plugin.

You could make it add a bunch of buttons to the toolbar (like the basicstyles plugin does for 'Bold', 'Italic' etc.). Or you can make it open a dialog with a multi-select [1] in it.

In both cases the UX is not ideal. If your plugin adds many buttons to the toolbar (and it sounds like it would) those will clutter the toolbar. OTOH a dialog won't be able to show your editors which classes have been applied in the current selection. The latter is done nicely by the 'combostyles' plugin since it automatically shows the active style in the select box.

I don't know whether CKEditor has the option to create a side-panel like Xinha had. But then again, such a side-panel is also not very pretty...

Another alternative is to make the 'Styles' dropdown bigger. That fixes at least the "select area is rather limited" issue. You can achieve this by including custom CSS [2] and adding the following rule in it:

   .cke_combopanel {

       height: 400px !important;

   }

hope that helps,

Mathijs

[1] http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.select-property-multiple

[2] https://www.onehippo.org/library/concepts/document-types/html-fields/customize-ckeditor-css.html

--
Hippo Community Group: The place for all discussions and announcements about Hippo CMS (and HST, repository etc. etc.)
 
To post to this group, send email to hippo-community@googlegroups.com
RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hippo-community+unsubscribe@googlegroups.com.
Visit this group at https://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

[Wim Lustenhouwer]

Hi Mathijs

Thank you for your concise answer. 

The Xinha editor from the screenshot needs to be rebuild for an upgrade though. So it would be preferable to have it like it was. However the bigger combopanel is a great help, so I’ll see If I can make do with that. Thanks a bunch 

Wim

To post to this group, send email to hippo-c...@googlegroups.com

RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.

To unsubscribe from this group and stop receiving emails from it, send an email to hippo-communi...@googlegroups.com.

Visit this group at https://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.