У меня есть div, установленный в contentEditable и стилизованный под "white-space:pre", поэтому он сохраняет такие вещи, как linebreaks. В Safari, FF и IE, div в значительной степени выглядит и работает одинаково. Все хорошо. Я хочу извлечь текст из этого div, но таким образом, чтобы не потерять форматирование - в частности, разрыв строки.
Мы используем jQuery, чья функция text() в основном выполняет предварительную настройку DFS и склеивает все содержимое в этой ветке DOM в один кусок. Это теряет форматирование.
Я посмотрел на функцию html(), но кажется, что все три браузера делают разные вещи с фактическим HTML, который создается за кулисами в моем div contentEditable. Предполагая, что я набираю это в свой div:
1
2
3
Вот результаты:
Safari 4:
1
<div>2</div>
<div>3</div>
Firefox 3.6:
1
<br _moz_dirty="">
2
<br _moz_dirty="">
3
<br _moz_dirty="">
<br _moz_dirty="" type="_moz">
IE 8:
<P>1</P><P>2</P><P>3</P>
Тьфу. Здесь нет ничего очень последовательного. Удивительно, что MSIE выглядит наиболее разумно! (Заглавный тег P и все)
У div будет динамически задаваться стиль (шрифт, цвет, размер и выравнивание), который выполняется с помощью CSS, поэтому я не уверен, могу ли я использовать тег pre (на который ссылались некоторые страницы я найденный с помощью Google).
Кто-нибудь знает какой-либо код JavaScript и/или jQuery-плагин или что-то, что будет извлекать текст из contentEditable div таким образом, чтобы сохранить разрывы строк? Я бы предпочел не изобретать синтаксический анализ если мне не нужно.
Обновление: я вырезал функцию getText из jQuery 1.4.2 и изменил ее, чтобы извлечь ее с незаполненным пробелом (я только chnaged одна строка, где я добавляю новую строку);
function extractTextWithWhitespace( elems ) {
var ret = "", elem;
for ( var i = 0; elems[i]; i++ ) {
elem = elems[i];
// Get the text from text nodes and CDATA nodes
if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
ret += elem.nodeValue + "\n";
// Traverse everything else, except comment nodes
} else if ( elem.nodeType !== 8 ) {
ret += extractTextWithWhitespace2( elem.childNodes );
}
}
return ret;
}
Я вызываю эту функцию и использую ее вывод, чтобы назначить ее XML node с jQuery, что-то вроде:
var extractedText = extractTextWithWhitespace($(this));
var $someXmlNode = $('<someXmlNode/>');
$someXmlNode.text(extractedText);
Полученный XML в конечном итоге отправляется на сервер через вызов AJAX.
Это хорошо работает в Safari и Firefox.
В IE кажется, что только первая "\n" сохраняется. Заглядывая в него больше, похоже, что jQuery устанавливает такой текст (строка 4004 jQuery-1.4.2.js):
return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
Чтение на createTextNode, похоже, что реализация IE может размыть пробелы. Это правда или я делаю что-то неправильно?
