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的

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

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

使用jquery的方法parent()或children().eq(0)可以获取要检查的元素是否包装

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

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

1 个答案: