javascript - CKEditor Add new list plugin using UL tag -

i'm trying add new list plugin similar bulletedlist i've created new button i'm trying use ul tag pairs new button called arrowedlist bulletedlist button.

the reason doing can add class (which know how do) can have 2 different buttons 1 applies default bullet list , other applies ul tags class.

the basic question is: there way can add button uses ul same way bulletedlist without pairing buttons together?

    // register commands.         editor.addcommand( 'numberedlist', new listcommand( 'numberedlist', 'ol' ) );         editor.addcommand( 'bulletedlist', new listcommand( 'bulletedlist', 'ul' ) );         editor.addcommand( 'arrowedlist', new listcommand( 'arrowedlist', 'ul' ) );           // register toolbar button.         if ( editor.ui.addbutton ) {             editor.ui.addbutton( 'numberedlist', {                 label: editor.lang.list.numberedlist,                 command: 'numberedlist',                 directional: true,                 toolbar: 'list,10'             });             editor.ui.addbutton( 'bulletedlist', {                 label: editor.lang.list.bulletedlist,                 command: 'bulletedlist',                 directional: true,                 toolbar: 'list,20'             });             editor.ui.addbutton( 'arrowedlist', {                 label: editor.lang.list.arrowedlist,                 command: 'arrowedlist',                 directional: true,                 toolbar: 'list,30'             });          } 

hopefully i'm not missing obvious, thanks!

although this not straightforward list system wasn't designed such things, can that. got modify code of list plugin (plugins/list/plugin.js). these basic assumptions implemented:

• distinguish between different lists:
  • each <ol> gets data-numberedlist attribute.
  • each <ul> gets data-bulletedlist or data-arrowedlist attribute depending on custom class.
• add custom css class.
• add custom class newly created lists if command defines one.
• add custom attribute every single list created button (see first point).
• make command's refresh distinguish between <ul data-bulletedlist="true> , <ul data-arrowedlist="true>.

i'm assuming have latest ckedtor (4.2). i'll best guide here. while reading this, please take on the gist implementing following changes. context of different. so... luck , let's go! ;)

---

things modified

add specific styles list

put outside of plugin definition, gonna global editors:

ckeditor.addcss( 'ul.myclass { color: red } ' ); 

make listcommand() function accept custom class parameter.

we got allow custom class , data-name attribute in advanced content filter.

function listcommand( name, type, classname ) {     this.name = name;     this.type = type;     this.context = type;      // remember class of command.     this.classname = classname;      this.allowedcontent = {};     this.allowedcontent[ type ] = {         classes: classname || '',         attributes: 'data-' + name     };     this.allowedcontent.li = true;     this.requiredcontent = type; } 

add command arrowedlist

note myclass here.

editor.addcommand( 'arrowedlist', new listcommand( 'arrowedlist', 'ul', 'myclass' ) ); 

add button

editor.ui.addbutton( 'arrowedlist', {     label: editor.lang.list.bulletedlist,     command: 'arrowedlist',     directional: true,     toolbar: 'list,20' }); 

add data-name attribute new lists

to distinguish between list types, add data-name attribute element:

listnode = doc.createelement( this.type ); listnode.data( this.name, true ); 

add custom class new arrowed lists.

if ( this.classname )     listnode.addclass( this.classname ); 

extend refresh() in prototype of listcommand

this ensures arrowedlist button change state if <ul> has data-arrowedlist. similar behavior bulletedlist , numberedlist, of course.

if ( list && limit.contains( list ) ) {     var islist = list.is( this.type ) && list.data( this.name );      this.setstate( islist ? ckeditor.tristate_on : ckeditor.tristate_off ); } 

add dataprocessor rules

during editor's lifetime, each <ol> gets data-numberedlist. accordingly each <ul> gets data-arrowedlist or data-bulletedlist depending on whether class myclass set.

on output, custom attributes filtered out data save totally clean.

editor.dataprocessor.datafilter.addrules( {     elements: {         ol: function( element ) {             element.attributes[ 'data-numberedlist' ] = true;         },         ul: function( element ) {             var classname = element.attributes.class;              if ( classname && classname.match( /myclass/g ) )                 element.attributes[ 'data-arrowedlist' ] = true;             else                 element.attributes[ 'data-bulletedlist' ] = true;         }     } } );  editor.dataprocessor.htmlfilter.addrules( {     elements: {         ol: function( element ) {             delete element.attributes[ 'data-numberedlist' ];         },         ul: function( element ) {             delete element.attributes[ 'data-arrowedlist' ];             delete element.attributes[ 'data-bulletedlist' ];         }     } } ); 

---

testing

try setting following html in source view:

<ul class="myclass">     <li>foo</li>     <li>bar</li> </ul> 

it should become red list when goind wysiwyg. arrowedlist button 1 associated such list.