Я работаю над редактором Javascript WYSIWYG в Firefox.Я использую div с атрибутом contenteditable, установленным в true, для достижения этой цели (я не могу использовать contateditable iframe для этого конкретного проекта).Этот contenteditable div вложен в другой div, который не является contenteditable.Я сталкиваюсь со следующими двумя проблемами при использовании execCommand для применения форматирования, включая стиль и размер шрифта, а также полужирный, курсив и подчеркивание:
- Когда выбран весь текст в 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>
Пожалуйста, попробуйте следующее:
- Выберите только слово «Некоторые».Нажмите кнопку Bold.Это сделает текст жирным, как и ожидалось.
- Выделите всю фразу «Некоторый редактируемый текст» (либо вручную, либо с помощью CTRL-A).Нажмите кнопку Bold.Ничего не произошло.Это демонстрирует первую ошибку, показанную выше.
- Нажмите клавишу Backspace, чтобы очистить div.Нажмите кнопку Bold и начните печатать.Введите несколько слов с пробелами.Это продемонстрирует вторую ошибку.
Будем весьма благодарны за любые идеи о том, что может быть причиной этих проблем и как их обойти!