CKeditor : Wrap ul list in a div with class - ckeditor

Question

I wish to customize a new style in ckeditor (under liferay 6.2).
So far, I'm able to create styles like this, in the ckconfig.jsp :
{name: 'Floating style', element: 'div', attributes: {'class': 'floating-list'}}
This is a style I would like to apply to a wrapping div parent to a the desired ul list. It would look like that :
<div class="floating-list">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
But the problem is that when I apply the style to my list, it of course applies to my ul li contents like this :
<ul>
<li><div class="floating-list">item</div></li>
<li><div class="floating-list">item</div></li>
<li><div class="floating-list">item</div></li>
<li><div class="floating-list">item</div></li>
</ul>
To avoid this behaviour, I wrote a little piece of jquery code :
$('.floating-list').closest('ul').each(function(){
var list = $(this);
var item = list.find('li');
item.each(function(){
$(this).html( $(this).find('.floating-list').html() );
});
list.replaceWith('<div class="floating-list"><ul>'+list.html()+'</ul></div>');
});
This works actually, but this is really dirty.
I'm wondering if there was a way to make it out. Thanks.

Answer 1

can try this:
CKEDITOR.instances.idofyourCKEditor.on('change', function() {
//for apply to all li's of ckeditor
jQuery(".cke_reset").contents().find("li").each(function(){
if(jQuery(this).parent().is("ul")){
jQuery(this).wrap("<div></div>"); //or .wrapInner( "<div class='new'></div>"); if you want do inside
}
});
});
with the event change can update the list when you are creating or editing
with the method contents() of jquery can update the elements inside of iframe .cke_reset, or the id if you can find him.
with the method parent() or children().eq(0) of jquery can get the element for check if is or not wrap
with the method wrap("<div class='chimichanga'></div>") and wrapInner( "<div class='new'></div>") can update the code html fast and easy.