CKEditor ul ol enclosure

Question

all! I have a problem with CKEditor! I need to enclose ul, ol lists with div. So when I press list button on panel I'll have such result:

 <div class=”dash-list”>
     <ul>
          <li></li>
     </ul>
 </div>

Answer 1

The easiest way without re-writing list plugin is wrapping lists on editor output:

var wrappable = [];

var editor = CKEDITOR.replace( 'editor1', {
    on: {
        instanceReady: function() {
            this.on( 'toDataFormat', function( evt ) {
                var el, wrap;

                while ( ( el = wrappable.pop() ) ) {
                    wrap = el.parent;

                    // Abort if already wrapped...
                    if ( wrap && wrap.type == CKEDITOR.NODE_ELEMENT && wrap.attributes[ 'class' ] == 'dash-list' )
                        return wrap;

                    // Wrap el...    
                    wrap = new CKEDITOR.htmlParser.element( 'div', { 'class': 'dash-list' } );
                    el.replaceWith( wrap );
                    wrap.add( el );
                }
            }, null, null, 11 );

            this.dataProcessor.htmlFilter.addRules( {
                elements: {
                    ul: function( element ) {
                        wrappable.push( element );
                    },
                    ol: function( element ) {
                        wrappable.push( element );
                    }
                }
            } );
        }
    }
} );