Question

我使用下面的代码来换取<p>而不是<div>。

document.execCommand('defaultParagraphSeparator', false, 'p')

但我仍然无法包装第一线，就像这样＃34; aaa＆＃34;。

<div id=“body-text” class=“body-text” contenteditable=“true” data-placeholder=“Body Contents">
    aaa
    <p>bbb</p>
    <p>ccc</p>
</div>

有谁知道如何包装第一行＆＃34; aaa＆＃34;与<p>？

后记

我使用其中一个答案更改了我的电话线以供参考。但现在我无法输入任何字母。只有先按Enter键才有效。但是在我按下回车并生成<p>后，我再也无法输入任何字母了。

问题出在哪里？

<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents' onkeydown={firstLine}></div>
<script>
firstLine(e) {
    if(e.keyCode == '13') {
        var div = document.getElementById('body-text')
        var text = div.firstChild.textContents
        div.removeChild(div.firstChild)
        var p = document.createElement('p')
        p.textContent = text
        div.insertBefore(p, div.firstChild)
    }
}
</script>

Answer 1

一种方法是获取div的第一个文本节点，保存文本，删除该节点，然后使用古代节点中的文本创建一个p标记，并将其插入div中。

更新

你有一点typpo问题var text = div.firstChild.textContent，没有它只有<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'> aaa <p>bbb</p> </div>

请参阅小提琴：https://jsfiddle.net/2rgLzkyj/

HTML：

var div = document.getElementById('body-text')

div.addEventListener('keydown', onKeyDown);

function onKeyDown(e) {
    if (e.keyCode == '13') {
        var text = div.firstChild.textContent;
        div.removeChild(div.firstChild);
        var p = document.createElement('p');
        p.textContent = text;
        div.insertBefore(p, div.firstChild);
    }
}

Javascript：

access_token

Answer 2

我正在使用element.firstChild选择“aaa”textNode，然后创建一个段落元素，然后将其添加到.body-text中。

var pElement = document.createElement('p');
var bodyText = document.querySelector('.body-text');
var firstLine = bodyText.firstChild;

pElement.appendChild(firstLine);
bodyText.prepend(pElement);

console.log(bodyText.outerHTML)

<div class="body-text" contenteditable="true" data-placeholder="Body Contents">
  aaa
  <p>bbb</p>
  <p>ccc</p>
</div>

注意： 您不需要课程和ID ...选择一个

Answer 3

好的，首先我必须告诉您，您提供的代码使用的是那些精美的引号“和”，您必须使用此"或此' 。话虽如此，我制作了一个使用formatBlock的Snippet。

突出显示文字，然后点击＆lt; p /＆gt; 按钮。
它可以将文字换成<p>，<div>，<blockquote>，<h1>等。

段

<div id="body-text" class="body-text" contenteditable="true" data-placeholder="Body Contents">
  aaa
  <p>bbb</p>
  <p>ccc</p>
</div>

<input type="button" class="p" onclick="document.execCommand('formatBlock', false, 'p')" value="<p/>" title="Insert a Paragraph Wrapped on Highlighted Text">

如何在第一行的contenteditable div中包含<p>

3 个答案:

段