Проблемы с contenteditable в Firefox

Я работаю над редактором WYSIWYG Javascript в Firefox. Я использую div с атрибутом contenteditable, установленным в true, чтобы выполнить это (я не могу использовать contenteditable iframe для этого конкретного проекта). Этот contenteditable div вложен в другой div, который недопустим. Я встречая следующие две проблемы при использовании ExecCommand применить форматирование, включая тип и размер шрифта, а также жирный, курсив и подчеркивание:Проблемы с contenteditable в Firefox

Когда весь текст в DIV выбран, ExecCommand просто не работает , execCommand отлично работает, когда выбрана только часть текста, но ничего не делает, когда весь текст выбран.
Применение форматирования без выбора текста дает неожиданные результаты. Например, при вызове execCommand («полужирный») без выделенного текста, а затем при наборе текста выводится полужирный текст до ввода пробела, после чего полужирное форматирование теряется (до тех пор, пока не будет вставлено другое пространство, что интересно, текст снова становится полужирным шрифтом).

Чтобы увидеть, что я имею в виду, пожалуйста, попробуйте запустить следующий HTML-код в Firefox 3:

<html> 
<head><title></title></head> 
<body> 
<button onClick="execCommand('bold', false, null);">Bold</button> 
<div style="width: 300px; border: 1px solid #000000;"> 
<div contenteditable="true">Some editable text</div> 
</div> 
</body> 
</html>

Пожалуйста, попробуйте следующее:

Выберите слово "Некоторые" только. Нажмите кнопку Полужирный. Это сделает текст полужирным, как и ожидалось.
Выделить всю фразу "Some editable text" (вручную или используя CTRL-A). Нажмите кнопку Полужирный. Ничего не произошло. Это демонстрирует первую ошибку, показанную выше.
Нажмите клавишу возврата, чтобы очистить div. Нажмите кнопку «Полужирный» и начните вводить текст. Введите несколько слов с пробелами. Это покажет вторую ошибку.

Любые идеи о том, что может вызвать эти проблемы и как их обойти, будут очень признательны!

источник

2010-06-01 Jonathan

Одна вещь, которую я забыл отметить - вышеупомянутые проблемы есть только в Firefox; У Safari и IE, похоже, нет этих проблем. – Jonathan

Интересно. В Firefox 3.6.3 я не могу реплицировать первую проблему: выбор всего редактируемого текста и нажатие кнопки переключает смелость, как ожидалось. Тем не менее, две другие проблемы, которые я вижу. Они будут ошибками в реализации Mozilla contenteditable.

Интересно, что проблема с альтернативными словами-жирная проблема не возникает, если вы используете designMode, а не contenteditable. Я подозреваю, что это решит и вашу другую проблему. Это предполагает принятие весь документ редактируется, а не только элементы внутри него:

window.onload = function() { 
    document.designMode = "on"; 
};

Если это не вариант, и вам нужен точный контроль, что обеспечивает contenteditable, вам нужно реализовать свою собственную версию bold с использованием DOM-манипуляций и диапазонов. Это будет довольно сложно, чтобы работать в IE и браузерах, отличных от IE.

источник

2010-06-01 23:55:19

Спасибо за предложения. Я обновил Firefox до 3.6.3 с 3.5.9, и первый выпуск пропал! Они, должно быть, нашли и исправили эту ошибку. К сожалению, designmode для меня не вариант. Это будет работать, только если редактируемая область является iframe, но я работаю с div. Переключение режима разработки позволяет сделать весь документ доступным для редактирования. Должно быть другое обходное решение, потому что Nicedit (http://nicedit.com/demos.php), который не использует iframe, не имеет смелой проблемы.Мне просто нужно изучить исходный код Nicedit, если у кого-то еще нет идей о том, как сделать эту работу ... – Jonathan

Упс! Я пропустил последние предложения относительно написания специальной смелой команды. Я мог бы просто сделать это; единственным браузером, который вызывает проблемы, является FF, поэтому мое альтернативное решение должно быть записано только для совместимости с FF. Еще раз спасибо за вашу помощь! Это очень ценится! – Jonathan

Это такая странная ошибка. Во всяком случае, после нескольких экспериментов я смог исправить это, вызвав focus() на contenteditable div до вызова execCommand. Теперь он работает без проблем. – Jonathan

ответ

Смежные вопросы