У меня есть элемент div ContentEditable. При первом нажатии клавиши в редактируемой области я создаю тег контейнера
, используя следующую логику:
var c = (32 == key ? '\u00A0' : String.fromCharCode(key));
var e = document.createElement('p');
var sel, rng;
e.appendChild(document.createTextNode(c));
this.editDocument.appendChild(e);
sel = window.getSelection();
rng = document.createRange();
rng.selectNodeContents(e);
rng.collapse(false);
sel.removeAllRanges();
sel.addRange(rng);
Проблема, с которой я столкнулся, заключается в следующем событии нажатия клавиш. Firefox создает другой текстовый узел в качестве контейнера для нового символа, а также для любых последующих символов. Это означает, что у моего тега p есть 2 текстовых узла как родные. Google Chrome и Opera не делают этого. Этот дополнительный текстовый узел создает проблему с моей системой отмены / возврата. Эта система отмены сохраняет позицию каретки как массив смещений узлов. Содержимое div contentEditable сохраняется и восстанавливается с помощью innerHTML. Однако, когда содержимое восстанавливается с помощью этого метода, создается только один текстовый узел, где у Firefox ранее было 2, вызывая ошибку. Мне интересно, является ли это поведение (создание дополнительного текстового узла) преднамеренным в Firefox, или это, возможно, ошибка. Любые предложения или советы высоко ценится.