Как получить нужный HTML из div contentEditable - PullRequest
Новая
       8

Как получить нужный HTML из div contentEditable

0 голосов
/ 28 октября 2018 

$('#parent').on('input', function(){
  let a = $(this).html();
  console.log(a);
});
.parent{
  background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='parent' id='parent' contentEditable>
  lorem ipsum
</div>

Поместите курсор в конец текста и нажмите Enter.
В консоли я ожидаю только <br>, а неоткрытые и закрытые теги div.

Теперь, допустим, я хочу горизонтальное правило.Введите <hr>
Результат - <div>&lt;hr&gt;</div>

И, конечно, когда я помещаю это значение в базу данных (php, mysql) и получаю эти данные обратно - горизонтального правила не существует, просто <hr>буквально помечать.

Как получить нужный HTML, как это: 

<br>  
<hr>

1 Ответ

0 голосов
/ 28 октября 2018

Как то так? 

$(function() {
  $('#parent').on('input', function() {
    // Retrieve the HTML-decoded content and log it
    let content = $('<textarea>')
      .html($(this).html())
      .text().trim()
      .replace(/<br><br>$/, '<br>');
    console.log(content);
  });

  $('#parent').on('keydown', function(e) {
    // Catch Enter key and insert <br>'s manually
    if (e.which === 13) {
      document.execCommand('insertHTML', false, '<br><br>');
      e.preventDefault();
    }
  });
})
.parent {
  background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent" class="parent" contenteditable>
  lorem ipsum
</div>
...