如何在 contenteditable 中初始化和自定义节点结构 div

Question

这个问题分为两部分。

我想创建一个 contenteditable div 当输入 return 时，新元素将是 。我搜索了一个解决方案是定义 document.execCommand('defaultParagraphSeparator', false, 'p');

这工作正常，但问题是当初始化 div 时，第一行不会被  包围。它将类似于
```
<div contenteditable=true>
 "hello"
 new line here
</div>
```

我试过在html中加入标签，但好像不行。

根据上述问题，可以达到更多，而不是简单地为每个新行创建新的 。我可以为每一行创建 <span 并将输入文本插入到  中吗？

Answer 1

这适用于 chrome 和 firefox

document.execCommand('defaultParagraphSeparator', false, 'p');
  $('div[contenteditable="true"]').one('focus',function(){
    var selection=document.getSelection();
    var range=document.createRange();
    $(this).append("<p>&#8203;</p>");
    var insertedElement=$(this).find('p');
    range.setStart(insertedElement[0].firstChild,1);
    selection.removeAllRanges();
    selection.addRange(range);
  });

如何在 contenteditable 中初始化和自定义节点结构 div

How to initialize and customize node structure in contenteditable div

javascript

contenteditable