在 div 中包装 contenteditable 的第一行

Question

我有一个属性为 contentEditable 的 div。

我遇到的问题是我输入的第一行没有被标签包裹，但后面的行会。

输入

abcd
efgh
ijkl

结果

<div contentEditable="true">
    "abcd"
    <div>efgh</div>
    <div>ijkl</div>
</div>

Answer 1

试试这个：获取 text 和 children 然后将可编辑的 div 设为空并用 div 换行（我添加了 color:red 只是为了知道添加了 div）和孩子。

$(function(){
    $('div[contentEditable="true"]').each(function(){
       var text = $(this).clone().children().remove().end().text();// get text
       var $children = $(this).children();// get children

       //add text and children again
       $(this).empty().append('<div style="color:red;">'+text+'</div>').append($children);
    });
});

Demo

Answer 2

我不知道你在问什么。但你需要结果

 $("div[contentEditable=true]").text("abcd");
    $("div[contentEditable]").append("<div>efgh</div><div>ijkl</div>");

DEMO