CKeditor：用一个class为的div包裹ul列表

Question

我希望在liferay 6.2的ckeditor中自定义一个新的样式。 到目前为止，我能够像这样创建样式，在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>

但问题在于，当我将样式应用于我的列表时，它自然会像这样应用于我的 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>');
});

这实际上是有效的，但非常不规范。

我在想是否有一种方法可以改进它。谢谢。

- Neovea

---

我遇到了同样的问题，但是你的jQuery代码，无论是否不规范，都非常有用。谢谢。 - Nathan Geffen

谢谢，但仍然 CKEditor 的行为让我感到非常困惑。 - Neovea

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

});

使用事件change可以在创建或编辑时更新列表。

使用jquery的方法contents()可以更新iframe .cke_reset中的元素，或者如果您能找到它，则更新id。

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

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

- Robert Blasco Villarroya