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

时间:2016-03-29 19:20:42

标签: javascript contenteditable

这个问题将分为两部分。

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

    这样可以正常工作,但问题是当div初始化时,第一行不会被<p>包围。它会像

    <div contenteditable=true>
        "hello"
        <p>new line here</p>
    </div>
    
  2. 我尝试将<p>标记放在html中,但它似乎不起作用。

    1. 基于上述问题,可以达到更多而不是简单地为每个新行创建新的<p>。我可以为每一行创建<p><span</span></p>,输入文本是否会插入<span>

1 个答案:

答案 0 :(得分: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);
  });