Default class for ul / ol list tags

[Juergen]

It would be great to have a possibility to add a class to an ul and ol list, like currently to headlines, paragraph etc. in the config.js file.

So in this kind:

config.format_ul = { element: 'ul', attributes: { 'class': 'list list-disc' } };

config.format_ol = { element: 'ol', attributes: { 'class': 'list list-decimal-point } };

With classes, font icons and CSS counter there are more possibilities to add the bullets and numbering types, that are desired.

After setting a default class it would be easy for an editor to change the class with the style selector.

[Jakub Ś]

This is not what format tags are for. Format dropdown represents raw HTML tags while Styles dropdown, styled elements.

To add some custom definition do Format Dropdown you can do following (e.g. in config.js or on page where CKEditor is defined (instance specific configuration)):

1. Extend default definition (p;h1;h2;h3;h4;h5;h6;pre;address;div) with your custom style

config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div;abc';

2. Define these custom styles/formats

config.format_abc = { name : 'abc', element: 'div', styles: { 'font-style': 'italic', 'font-size' : '30px' } };

Please note however that above is no longer defining format but styles in format dropdown which is imho very wrong. You should rather define these in ckeditor/styles.js.

Please note that styles plugin checks whether style is inline block or object (complex structures like table or list). Perhaps you haven't seen list styles in Styles dropdown because they are not displayed by default but only when list is focused.

---

To summarize - what you are trying to do, can be done and should be inside styles and not formats. Please see ckeditor/styles.js file for examples of list and other styles. Please also have a look at: ​http://docs.ckeditor.com/#!/api/CKEDITOR.style

[Juergen]

Ok, thanks for your explanation!

I still have styles created in styles.js for lists and can select on of the style classes.

My wish was only to set a *default* class after clicking on the list button. So only if the backend user likes another list style, he could select another class from the list.

Currently he need always 2 actions: click the list button + select an style class.

I haven't found an answer for that in the forum or StackOverflow.

[Jakub Ś]

My wish was only to set a *default* class after clicking on the list button.

Thanks for explanation. The format dropdown will not do that as it works the same as styles dropdown.

I think there are two ways to do that (however we don't plan to implement this feature):

1. You could alter the list plugin so that it inserts styled list and not raw one. You could even create config option, which will be used inside that plugin and could be populated from the backend.

2. You could try altering the list once it is inserted e.g.

editor.on( 'instanceReady', function( evt ) {   
       editor.on( 'afterCommandExec', function( event ){                                       
		if( event.data.name == 'bulletedlist' || event.data.name == 'numberedlist' ) {
			var s = editor.getSelection();
			console.log(s.getStartElement());
			console.log(s.getStartElement().getParent());
			console.log(s.getStartElement().getParent().getParent());
					}	
       }, null, null, 100);
});

You need to check all the scenarios but in general the above will output:

• when creating new list: li, ul, body
• when unlisting the element: p, div, body
• when changing P into list: li, ul, body
• when changing h1 into list: h1, li, ul

You need to find all possible scenarios but once you get to ul or li, assigning a class should not be a problem.

[Juergen]

Thanks again, I think I will try version 1, because I have multiple instances of CKEditor.

[Jakub Ś]

I have given you instance specific code that you can use directly on HTML page but this code can also be used for more than one instance. Please use:

CKEDITOR.on( 'instanceReady', function( evt ) { 
    evt.editor.on( 'afterCommandExec', .....

This code will work for every editor used on your HTML page (even inline editors). Please see: ​http://docs.ckeditor.com/#!/api/CKEDITOR-event-instanceReady

Creating custom plugins based on original ones should be reserved for very specific cases as it may be harder to maintain such code in the future.

[Juergen]

Great, I will try that!