CODEWITHSUNDEEP
ckeditor
Neovea
Neovea

Reputation: 514

CKeditor : Wrap ul list in a div with class

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.

Upvotes: 4

Views: 1148

Answers (1)

Robert Blasco Villarroya
Robert Blasco Villarroya

Reputation: 892

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.

Upvotes: 1

Related Questions