Работа с разрывами строк в contentEditable DIV

Этот метод, по-видимому, позволяет избежать ошибки Chrome, которая показывает BR в первый раз (с кодом, который вы упомянули, вам нужно дважды нажать клавишу Enter).

Это не идеальный взлом, но он работает: он добавляет пробел после вашего BR, чтобы он отображался правильно. Однако вы увидите, что добавление только пробела "" ничего не изменит, это работает с другими буквами. Браузер не покажет это, вероятно, потому что это как пустое место внутри html-страницы, это просто ничего не значит. Чтобы избавиться от этой ошибки, я создал div с помощью jQuery, который включает тег  , и я беру свойство text(), чтобы поместить его в текстовый узел, иначе это не сработает.

$editables = $('[contenteditable=true]');

$editables.filter("p,span").on('keypress',function(e){
 if(e.keyCode==13){ //enter && shift

  e.preventDefault(); //Prevent default browser behavior
  if (window.getSelection) {
      var selection = window.getSelection(),
          range = selection.getRangeAt(0),
          br = document.createElement("br"),
          textNode = document.createTextNode("\u00a0"); //Passing " " directly will not end up being shown correctly
      range.deleteContents();//required or not?
      range.insertNode(br);
      range.collapse(false);
      range.insertNode(textNode);
      range.selectNodeContents(textNode);

      selection.removeAllRanges();
      selection.addRange(range);
      return false;
  }

   }
});

Прослушивание нажатий клавиш кажется большой работой. Возможно ли такое простое:

var html = $('.content').html().replace(/<div>/gi,'<br>').replace(/<\/div>/gi,'');

Демо JSFiddle здесь.

Кроме того, похоже, что sanitize.js допускает индивидуальную конфигурацию. Вы пробовали добавить div в качестве разрешенного элемента?

Разрешить HTML / CSS опасно, поэтому будьте особенно осторожны.

РЕДАКТИРОВАТЬ: удалены комментарии на стороне сервера. Санитарная обработка происходит во время использования - если клиент хочет обойти это локально, это может быть сделано на его страх и риск. Благодарим Винсента Макнабба за указание на это.

Вы можете просто использовать следующую команду document.execCommand('insertHTML',false,'<br>');

Эта команда предотвратит поведение по умолчанию и добавит желаемый тег. Все, 1 строчка кода

И даже более простой подход.

ТОЛЬКО CSS.

К вам contenteditable element примените display:inline-block rule, и это добавит только br s

Webkits не будет отображать один br, если это последний (непустой) дочерний элемент контейнера. Для Safari обычное нажатие клавиш для вставки разрыва строки - Ctrl + Return. Если вы присмотритесь, то заметите, что Safari на самом деле вставляет два br при визуализации только одного; однако он вставит одиночный br, если есть некоторый завершающий текст, или избавится от двойных br, когда вы введете какой-то (если были двойные).

По-видимому, решение для Webkits состоит в том, чтобы вставить двойные br, как они сами, и позволить им справиться с остальным.

Возможно, вы захотите проверить свойство css white-space. Установка стиля на white-space: pre-wrap позволяет избавиться от всего этого javascript, потому что он изменяет поведение пробелов для отображения вместо сворачивания.

И посмотрите этот ответ: HTML - символ новой строки в редактируемом содержимом DIV?

см. эту Fiddle

Или этот пост

Как разобрать редактируемый текст DIV с совместимостью с браузером < / а>

Вы можете использовать:

document.execCommand("defaultParagraphSeparator", false, "br");

Полная ссылка находится здесь

Вариант использования обычно возникает, когда вы предварительно заполняете данные в редактируемом содержимом div и повторно отправляете их на сервер.

Например. - Подобно редактированию сообщения на веб-сайте социальной сети, чтобы смягчить это, я создал новый div для каждой новой строки.

let conD =data.postDescription.split('\n');
let conH = "";
conD.forEach((d)=>{
        conH +=`<div>${d}</div>`;
       });
$("#contentbox").html(conH);