Блог

Я использовал приведенный ниже код для переноса <p> вместо <div> .

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

Но я все еще не могу обернуть первую строку, например, «aaa».

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

Кто-нибудь знает, как обернуть первую строку «aaa» с <p> помощью?

postscript

Я изменил свой шнур, используя один из ответов для справки. Но теперь я не могу ввести ни одной буквы. Только если я сначала нажму enter, это сработает. Но после того, как я нажму enter и make <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>
  

Я использую element.firstChild для выбора текстового узла «aaa» и создания элемента paragraph, который затем добавляется обратно .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>  

примечание: вам не нужен класс и идентификатор … выберите один

Хорошо, сначала я должен сообщить вам, что в предоставленном вами коде использовались эти причудливые кавычки “ , и ” вы должны использовать либо это " , либо это ' . Сказав это, я создал фрагмент, который использует formatBlock .

1. Выделите текст и нажмите кнопку <p/>.
2. Он может переносить текст в <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">  

Один из способов сделать это — получить первый текстовый узел вашего div, сохранить текст, удалить этот узел, а затем создать тег p с текстом из вашего древнего узла и вставить его в свой div.

ОБНОВЛЕНО

у вас была небольшая проблема var text = div.firstChild.textContents с типом, ее нет только var text = div.firstChild.textContent

смотрите скрипку: https://jsfiddle.net/2rgLzkyj /

HTML :

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

Javascript:

 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);
    }
}