Apply multiple classes in CKEditor stylesSet

[Elizabeth Reid]

I'm setting up the configuration for the Styles drop-down in my CKEditor, and am wondering if it is possible to apply multiple classes to a single element with a single style. The section of my stylesSet definition looks like this (note: this is a snippet and not the complete stylesSet definition):

{ name: 'Small Block Right',  element: 'p', attributes: { 'class': 'u-float-right u-block-sm' } }

I've put both class names in the single class attribute as shown based on a post I found in a general CKEditor discussion elsewhere, which implies this "should just work". However, when I try to use this in my Hippo configuration, the style Small Block Right does not appear in the Styles drop-down. I have a number of other styles defined in the same stylesSet that do appear, and if I remove one of the class names from the above snippet, it does appear. So the problem does not seem to be with the stylesSet definition as a whole, only when attempting to apply multiple classes.

Is there some other way that I should be defining multiple classes to be applied, or another setting I need to configure as well? Or does the version of CKEditor used in Hippo 10 not support applying multiple classes?

[Jeroen Reijn]

Hi Elizabeth,

see my comments inline.

On Thu, Aug 27, 2015 at 8:03 PM, Elizabeth Reid <ereid...@gmail.com> wrote:

I'm setting up the configuration for the Styles drop-down in my CKEditor, and am wondering if it is possible to apply multiple classes to a single element with a single style. The section of my stylesSet definition looks like this (note: this is a snippet and not the complete stylesSet definition):

{ name: 'Small Block Right',  element: 'p', attributes: { 'class': 'u-float-right u-block-sm' } }

I've put both class names in the single class attribute as shown based on a post I found in a general CKEditor discussion elsewhere, which implies this "should just work". However, when I try to use this in my Hippo configuration, the style Small Block Right does not appear in the Styles drop-down. I have a number of other styles defined in the same stylesSet that do appear, and if I remove one of the class names from the above snippet, it does appear. So the problem does not seem to be with the stylesSet definition as a whole, only when attempting to apply multiple classes.

Can you elaborate a bit more on how you've defined those styleSets?

 

Is there some other way that I should be defining multiple classes to be applied, or another setting I need to configure as well? Or does the version of CKEditor used in Hippo 10 not support applying multiple classes?

Not as far as I know. However I think it would be interesting to see what the html cleaner does with these styles. That should be a next thing, but first let's get the style to appear.

 

--
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-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 http://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

--

Jeroen Reijn
Hippo

Amsterdam office - Oosteinde 11, 1017 WT Amsterdam

Boston office - 745 Atlantic Ave, Eight Floor, Boston MA 02111, United states of America.

US +1 877 414 4776 (toll free)
Europe +31(0)20 522 4466
www.onehippo.com

http://blog.jeroenreijn.com | @jreijn | http://about.me/jeroenreijn

[Elizabeth Reid]

Hi Jeroen,

Re: your question "Can you elaborate a bit more on how you've defined those styleSets?"

I'm not certain what additional information you're looking for. I followed the steps on http://www.onehippo.org/library/concepts/document-types/html-fields/customize-ckeditor-styles.html to create a JavaScript file, define the stylesSet via CKEDITOR.stylesSet.add, update the cms pom.xml, and add the stylesSet via the ckeditor.config.overlayed.json. There are a total of 14 styles defined in that JavaScript file, and of those, 12 show up as expected in the Styles dropdown. The 2 that do not show up are the only two with multiple classes specified, and if I remove the second class from either of them, they then show up in the list. 

This definition does not result in the style Small Block Right displaying in the Styles menu (removed the other 13 styles for sake of space):

(function () {
    "use strict";


    CKEDITOR.stylesSet.add('mystyles', [
        {

            name: 'Small Block Right',
            element: 'p',
            attributes: {
                'class': 'u-float-right u-block-sm'
            }
        }

       
    ]);    
}());

This definition does result in the style Small Block Right displaying in the Styles menu:

(function () {
    "use strict";


    CKEDITOR.stylesSet.add('mystyles', [
        {

            name: 'Small Block Right',
            element: 'p',
            attributes: {

                'class': 'u-float-right'
            }
        }        
    ]);    
}());

As you can see, the only difference is the number of classes specified in the class attribute value.

[Elizabeth Reid]

Doing some further testing this morning, I've discovered something very strange. If I switch the order of the class names in the specification, the styles are available in the Styles menu and can be applied to text in the editor.

So if I specify the style like this, it does not appear:

(function () {
    "use strict";


    CKEDITOR.stylesSet.add('mystyles', [
        {

            name: 'Small Block Right',
            element: 'p',
            attributes: {
                'class': 'u-float-right u-block-sm'
            }
        }      
    ]);    
}());

But if I specify the style like this, it does appear:

(function () {
    "use strict";


    CKEDITOR.stylesSet.add('mystyles', [
        {

            name: 'Small Block Right',
            element: 'p',
            attributes: {

                'class': 'u-block-sm u-float-right'
            }
        }      
    ]);    
}());

This is truly bizarre. To double check this, I defined two styles, one like the first and one like the second (with different names to avoid a conflict there). One appears, the other doesn't. I feel like there must be something else changing that's causing it to work one way and not the other, but I can't figure out what it would be. 

[Mathijs den Burger]

That's bizarre indeed :)

There's nothing Hippo-specific about the stylesheet definition. So my guess is you've found a nice issue in CKEditor. Type 'CKEDITOR.version' in your JavaScript console to see the CKEditor version you're using (and ignore the -h suffix, which Hippo uses to version tiny changes we make to the CKEditor code).

Good to know you found a workaround though!

Mathijs

--

[brian...@acquia.com]

Elizabeth, I think there is a CKEDITOR issue here. i'm working with ckeditor 4.4.3 in a drupal application and encountered a similar issue, where my style was not available in the ckeditor wysiwyg.

In my case, this did not work:

{ name: 'light',  element: 'h1', attributes: { 'class': 'light' } },
{ name: 'light  accent',  element: 'h1', attributes: { 'class': 'light accent' } }

but this did:

{ name: 'light',  element: 'h1', attributes: { 'class': 'light' } },
{ name: 'light  accent',  element: 'h1', attributes: { 'class': 'accent light' } }

This solved my issue so I haven't tested any further.. but for anyone else who stumbles upon this thread, I wonder if it's comparing attributes and stops when it matched the class 'light' and decided the second style was a 'duplicate'

[je...@novatech.org]

Sorry if I'm sort-of-hijacking this, but I'm using a CKEditor instance in another product (an addon with the CMS redaxo actually) where I met a very similar issue.

My findings were the following:

• If you define a custom styleSet with a single class -> no problem
• ...a double class definition: there are several outcomes:
• a) your definition shows up in ckeditor correctly and can be used
• b) it won't show based on how the two classes are named

Our problem with our current project were dialogue boxes with different kind of styling (info, notice, error, success). All boxes were "p" tags with class "msg" and another class for the specific styling. The outcome with adding those to CKeditor were quite surprising. We added it like this:

{ name: 'Box Info', element: 'p', attributes: { 'class': 'msg info' } },
{ name: 'Box Notice', element: 'p', attributes: { 'class': 'msg notice' } },
{ name: 'Box Error', element: 'p', attributes: { 'class': 'msg error' } },
{ name: 'Box Success', element: 'p', attributes: { 'class': 'msg success' } },

The outcome was surprising: "info" and "error" wouldn't show up. But "notice" and "success" were visible. I played around a bit and broke it down to the combination of class names. If you replace "msg" with "abc" - it works. If you use "xyz" it won't. Also using "text" with any other class behind it, won't show up whatever you do, but if you only use the single class "text", it works. So it seems, CKEditor has some strange problem when combinations of classes come together.

Perhaps any of you got to the bottom of this or is this still an open bug(?)

Greets

Jens

[Mathijs den Burger]

On Fri, Dec 4, 2015 at 1:18 AM, <je...@novatech.org> wrote:

Sorry if I'm sort-of-hijacking this, but I'm using a CKEditor instance in another product (an addon with the CMS redaxo actually) where I met a very similar issue.

My findings were the following:

• If you define a custom styleSet with a single class -> no problem
• ...a double class definition: there are several outcomes:
• a) your definition shows up in ckeditor correctly and can be used
• b) it won't show based on how the two classes are named

Our problem with our current project were dialogue boxes with different kind of styling (info, notice, error, success). All boxes were "p" tags with class "msg" and another class for the specific styling. The outcome with adding those to CKeditor were quite surprising. We added it like this:

{ name: 'Box Info', element: 'p', attributes: { 'class': 'msg info' } },
{ name: 'Box Notice', element: 'p', attributes: { 'class': 'msg notice' } },
{ name: 'Box Error', element: 'p', attributes: { 'class': 'msg error' } },
{ name: 'Box Success', element: 'p', attributes: { 'class': 'msg success' } },

The outcome was surprising: "info" and "error" wouldn't show up. But "notice" and "success" were visible. I played around a bit and broke it down to the combination of class names. If you replace "msg" with "abc" - it works. If you use "xyz" it won't. Also using "text" with any other class behind it, won't show up whatever you do, but if you only use the single class "text", it works. So it seems, CKEditor has some strange problem when combinations of classes come together.

Perhaps any of you got to the bottom of this or is this still an open bug(?)

AFAIK this has not been resolved. But with your additional example I have the hunch that CKEditor sorts the classes alphabetically, and stops adding classes once they don't match the sort order anymore. That would mean the workaround would be to define your classes sorted alphabetically. Maybe worth a try?

Mathijs

[Martijn van der Vorst]

Hey Mathijs,

We've run into exactly the same problem ourselves, and the solution does indeed seem to be to sort by alphabet yourself.