Question

我有一个结构dom：

    <div class="reditor_body">
      <p>saeed<p>
      <p>aghaebrahimain</p>
    </div>

当我选择了p标签并单击有序列表按钮时，结构如下：

<div class="reditor_body">
<ol>
    <li>saeed<li>
    <li>aghaebrahimain</li>
</ol>
</div>

我的问题是，当我选择每个li或两者并再次单击有序列表按钮时，结构就成了：

<div class="reditor_body">
     saeed
     aghaebrahimain
</div>

虽然我想要以下结构：

 <div class="reditor_body">
    <p>saeed<p>
    <p>aghaebrahimain</p>
 </div>

我怎么能用javascript或jquery像ckeditor或tinymce解决这个问题？

fiddle

Answer 1

更改您的jQuery代码以记住已删除的<p>标记（如果可能有任何其他元素而不是<p>），并且在删除列表元素时使用预先保存的元素包装文本（例如相同） <p>代码

Answer 2

首先.unwrap() ol并在jquery中使用.replaceWith()替换p标签而不是li

$(".reditor_body ol").click(function() {

$(".reditor_body ol li").unwrap("ol").replaceWith(function() {
    return $("<p></p>").append($(this).html());
});

});

Fiddle

如何用p标签包装每个li元素

2 个答案: