У меня есть набор div для contentEditable и стилизованный под «white-space:pre», поэтому он хранит такие вещи, как linebreaks. В Safari, FF и IE, div в значительной степени выглядит и работает одинаково. Все хорошо. То, что я хочу сделать, - извлечь текст из этого div, но таким образом, чтобы не потерять форматирование - в частности, разрыв строки.Извлечение текста из contentEditable div
Мы используем jQuery, функция которого text() в основном выполняет предварительную настройку DFS и склеивает весь контент в этой ветке DOM в один кусок. Это теряет форматирование.
Я посмотрел на функцию html(), но кажется, что все три браузера делают разные вещи с фактическим HTML, который создается за кулисами в моем contentEditable div. Если предположить, что я печатаю это в мой 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>
Ugh. Здесь нет ничего очень последовательного. Удивительно, что MSIE выглядит наиболее разумно! (Заглавная тег P и все)
У дивана будет динамически установлен стиль (шрифт, цвет, размер и выравнивание), который выполняется с использованием 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 с 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 может смять пробелы , Это правда или я делаю что-то неправильно?
Интересно, что неудивительно, что IE действует наиболее разумно: contentEditable изначально принадлежал IE; он был в IE с 5,5, так что, я думаю, у них было больше времени, чтобы заставить его работать хорошо. – Yahel