CKeditor：将ul列表包装在带有类的div中

我希望在ckeditor中自定义一种新样式（在liferay 6.2下）。 到目前为止，我能够在ckconfig.jsp中创建如下样式：

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

这是我想应用于所需

ul

列表的包装

div

父级的样式。看起来是这样的：

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

为了避免这种行为，我编写了一小段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>');
});

$（'.floating list'）。最近（'ul'）。每个（函数（）{
变量列表=$（此）；
var item=list.find（'li'）；
项目.每个（功能（）{
$（this.html（$（this.find（'.floating list'）.html（））；
});
替换为（“
”+list.html（）+”
”）；
});

这确实管用，但这真的很脏

我想知道是否有办法做到这一点。谢谢。

您可以试试这个：

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

});

CKEDITOR.instances.idofyourCKEditor.on（'change'，function（））{
//适用于ckeditor的所有li
jQuery（“.cke_reset”）.contents（）.find（“li”）.each（function（））{
if（jQuery（this.parent（）.is（“ul”））{
jQuery（this.wrap（“”；//或.wrapInner（“”）；如果您想在内部执行
}
});
});

通过事件

change

可以在创建或编辑列表时更新列表

使用jquery的

contents（）

方法，可以更新iframe

.cke\u reset

中的元素，或者更新id（如果可以找到）

使用方法

parent（）

或

children（）。jquery的eq（0）

可以获取元素以检查是否换行

---

使用方法

wrap（“”）

和

wrapInner（“”）

可以快速轻松地更新代码html。

我也遇到了同样的问题，但是您的jquery代码，不管是否脏，都非常有用。谢谢，谢谢，但编辑的行为还是会让我头脑发热

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

});