从contentEditable中删除元素后的奇怪行为

Question

我在<div>内有一些class=tgg contentEditable <div>。

<div> class=tgg的{​​{1}}也是contentEditable（需要）。

当用户删除该特定.tgg div的内容时，会出现此问题。似乎删除了div;但是在开始输入后，会在chrome中创建一个span，其样式与.tgg相同，并将输入的文本包装在其中。这会产生应避免的不良影响。

这是我的代码：

HTML：

<div id="tarea" contentEditable="true" class="tarea" autocorrect="false" spellCheck="off">
<div class="tgg">Vedant Terkar</div> 
Creates another <div class="tgg">Fiddle</div> 
for all <div class='tgg'>SO</div> Users.

</div>

<textarea id="opc" rows="5" cols="97">
</textarea>

CSS：

.tarea{
    width:99%;
    height:300px;
    overflow:auto;
    clear:both;
    display:inline-block;
    border:1px solid #000;
    padding:5px;
    outline:none;
    color:#333;
    }
    .tarea .tgg{
    background:#99d;
    color:#fff;
    padding:1px;
    border:1px solid #77b; 
    display:inline-block;
    }

JS：

$(document).ready(function(){
    $("#tarea").keyup(function(e){
    var html=$(this).html().toString().trim();
    html=html.split("<br>").join("\n");
    html=html.split("&nbsp;").join(" ");
        $("#opc").val(html);
        $(this).find(".tgg").each(function(){
        $(this).attr("contenteditable","true");
        });
    });
    $("#tarea").trigger("keyup");
});

DEMO

---

这是我想说的：

以下是您可以看到的代码输出：

当您将光标（插入符号）放在fiddle和for之间并使用 BackSpace 或 Del 删除fiddle时删除如下：

但是现在，如果你开始输入任何东西，它将不会被生成为纯文本，但它将在<span>之内，如：

我正在使用chrome。不同browser的输出可能会有所不同。任何人都可以告诉我如何解决这个问题？ 任何建议都是受欢迎的。提前致谢 ：）！

Answer 1

尝试

$(document).ready(function(){
    $("#tarea").on("keyup", function(e){
    var html=$(this).html().toString().trim();
    html=html.split("<br>").join("\n");
    html=html.split("&nbsp;").join(" ");
        $("#opc").val(html);
        $(this).find(".tgg").each(function(){
        $(this).attr("contenteditable","true");
        });
        // replace `font` with `text` within `font`
        // TODO: change caret (cursor) position ,
        // following `replaceWith()` call ,
        // to position _after_ replaced element
        $("font").each(function(i, el) {
          $(el).replaceWith($(el).text());
        });        
    }).trigger("keyup");
});

jsfiddle http://jsfiddle.net/guest271314/h7h97/

见

How to move cursor to end of contenteditable entity

Set cursor position on contentEditable <div>

Get caret (cursor) position in contentEditable area containing HTML content