ContentEditable поле для сохранения новых строк при вводе базы данных

У меня есть div с атрибутом contentEditable set.

Это позволяет мне иметь редактируемую текстовую область свободной формы без необходимости ввода любых полей ввода формы: http://jsfiddle.net/M8wx9/8/

Однако, когда я создаю пару новых строк и нажимаю кнопку "Сохранить", я захватываю контент с помощью метода .text(), который продолжает удалять только что введенные фиды строк. Мне нужно поддерживать символы новой строки, если это вообще возможно, и сохранять содержимое в виде обычного текста в базе данных.

Я мог бы хранить HTML непосредственно в базе данных, используя .html() вместо .text(), но мне не нравится эта идея, поскольку мне может понадобиться извлечь эти данные в виде обычного текста в будущем. Кроме того, нажатие Enter в Firefox прерывает новые строки с помощью <br>, Chrome и Safari ломаются с помощью <div>...</div>, а Internet Explorer и Opera используют абзацы <p>...</p> для новых строк, поэтому это не очень просто, чтобы проанализируйте html.

Как сохранить эти строки и сохранить содержимое в виде обычного текста в базе данных (подобно тому, как это работает в textarea)?

С наилучшими пожеланиями, нс

Ответ 1

jQuery использует textContent в Node для возврата текстового значения элемента, который сжимает пробел. Если вы хотите, чтобы разрывы строк поддерживались, вам нужно использовать innerText, что означает доступ к элементу напрямую, а не через jQuery.

Из вашего jsfiddle:

console.log($(Comments)[0].innerText);

http://jsfiddle.net/M8wx9/10/

==== обновление:
Как предостережение от этого (как указал Тим Даун), использование innerText будет работать только в браузерах webkit и microsoft. Если ваше приложение также поддерживает Firefox, вам нужно будет использовать регулярные выражения для innerHTML, чтобы поддерживать разрывы строк. В качестве примера:

$(Comments).html().trim()
   .replace(/<br(\s*)\/*>/ig, '\n') // replace single line-breaks
   .replace(/<[p|div]\s/ig, '\n$0') // add a line break before all div and p tags
   .replace(/(<([^>]+)>)/ig, "");   // remove any remaining tags

http://jsfiddle.net/M8wx9/12/

Ответ 2

function readContentWithBreaks(elem){
  if(elem[0].innerText){
    return elem[0].innerText.replace(/\n/ig,"<br>");
  }else{
    return elem.html();
  }
}

Так как браузеры webkit поддерживают innerText, я решил обнаружить для этого swap/n, который они добавляют. Для Firefox он уже предоставляет контент с <br>, поэтому мы можем просто взять его как есть.

Ответ 3

Это звучит слишком просто, поэтому я не решаюсь дать этот ответ, но из быстрого теста я побежал, следующее должно работать совершенно правильно (по крайней мере в хроме):

$(".post-text").text().replace(/\n/g,"<br />")

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

И jsfiddle, чтобы это сделать. Тем не менее, поскольку вы уже упоминаете, что contentEditable не является чрезвычайно перекрестно совместимым с браузером, так что было бы неплохо использовать существующий редактор.