how can i wrap each of li element with p tag

Question

i have an structure dom :

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

when i was selected the p tag and click the ordered list button , the structure becomes as following :

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

my problem is , when i select the each of the li or both and click the ordered list button again , the structure becames:

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

while i want the following structure :

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

how can i resolved this problem with javascript or jquery like ckeditor or tinymce ?

fiddle

Answer 1

First .unwrap() the ol and use .replaceWith() in jquery for replace the p tag instead of li

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

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

});

Fiddle

Answer 2

Change your jQuery code to remember removed <p> tag (in case there may be any other element instead of <p>) and than when removing list elements wrap text with pre-saved element (for example same <p> tag