CKeditor : Wrap ul list in a div with class

Question

我希望在ckeditor中定制一个新的样式(在liferay 6.2下)。到目前为止，我可以在 ckconfig.jsp 中创建这样的样式:

{name: 'Floating style', element: 'div', attributes: {'class': 'floating-list'}}

这是我想应用于将 div 父级包装到所需 ul 列表的样式。它看起来像这样:

<div class="floating-list">
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

但问题是，当我将样式应用于我的列表时，它当然也适用于我的 ul li 内容，如下所示:

<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>

为了避免这种行为，我编写了一小段 jquery 代码:

$('.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>');
});

这确实有效，但这确实很脏。

我想知道是否有办法解决这个问题。谢谢。

Answer 1

可以试试这个:

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
        }
    });

});

随着事件change可以在创建或编辑时更新列表

使用方法contents() jquery 可以更新 iframe 内部的元素 .cke_reset ，或者 ID(如果你能找到他的话)。

使用方法parent()或children().eq(0) jquery 可以获取元素来检查是否换行

使用方法wrap("<div class='chimichanga'></div>")和wrapInner( "<div class='new'></div>")可以快速轻松地更新代码 html。