How to define own list styles for ckeditor?

Question

Is there a way to define own list styles for ckeditor. I have found the plugin http://ckeditor.com/addon/liststyle but it lets me choose only things like circle or square.

I want to define own css classes for ol or ul in my application that i can use. For example a class to define more space between list elements. the users of the editor should pick the list class via a context menu like in the nice "liststyle" plugin.

Is there a way to do this?

Answer 1

I am dealing with CKEditor to add custom list styling to the liststyle plugin.

I added one new style (you can add more if you like) using the CSS class.

Here's how: in liststyle.js (after de-obfuscating) I insert my .logo class:

..........
function e(c,e){
    c.lang.liststyle.logo="My bullet"; // BBoyanov - adding 'My bullet' as title in dropdown list (in current language), otherwise it stay "empty" title
    var b=c.lang.liststyle;
........
style:"width:150px",
items:[[b.notset,""],[b.circle,"circle"],[b.disc,"disc"],[b.square,"square"], 
[b.logo,"logo"]],//BBoyanov - css class 'logo' as Bullet \,[b.logo,"logo"]\
........
commit:function(a){
  var b=this.getValue();b?a.setStyle("list-style-type",b):a.removeStyle("list-style-type");
  "logo"==b?a.setAttribute("class",'logo'):a.removeAttribute("class");//BBoyanv set 'logo' as CSS class
........
h={a:"lower-alpha",A:"upper-alpha",i:"lower-roman",I:"upper-roman", 
1:"decimal", disc:"disc", circle:"circle", square:"square",logo:"logo"};//BBoyanov \,logo:"logo"\
........

You define the CSS class in ckeditor.css (to be visualised in CKEditor) and in your own CSS file.

If you prefer different titles for different languages, you must put translation in the corresponding language .js file of CKEditor.

It worked for me.

However, probably this is injection because it takes over the allowedContent - need tests and confirmation.

Answer 2

Confirmed the approach mentioned above works, I am using Drupal, Ckeditor List Style (plugin) and the Ckeditor List Style module (Drupal module).

I needed to make a change to the lang > en.js file to add the appropriate Title in instead of the function as the OP.

    cute: 'Cute',

Once that was done, inside the liststyle.js file I updated the existing code to this:

Existing code in liststyle.js file:

                    commit: function(element) {
                        var value = this.getValue();
                        if (value)
                            element.setStyle('list-style-type', value);
                        else
                            element.removeStyle('list-style-type');
                    }

New code:

                     commit: function(element) {
                        var value = this.getValue();
                        if (value) {
                            if (value == 'cute') {
                                element.setAttribute("class", 'cute');
                                element.removeStyle('list-style-type');
                            } else {
                                element.setStyle('list-style-type', value);
                            }
                        } else {
                            element.removeStyle('list-style-type');
                        }
                     }