var editor = document.getElementById("editor"); // найти фрейм документа
editor.contentDocument.designMode = "on"; // и включить режим
}); // редактирования.
</script>
Все текущие броузеры поддерживают свойства
contenteditable
и
designMode
. Однако они оказываются плохо совместимыми, когда дело доходит до фактического редактирования. Все броузеры позволяют вставлять и удалять текст и перемещать текстовый курсор с помощью клавиатуры и мыши. Во всех броузерах нажатие клавиши Enter выполняет переход на новую строку, но разные броузеры создают в результате разную разметку. Некоторые начинают новый абзац, другие просто вставляют элемент
<Ьг/>.
Некоторые броузеры позволяют использовать горячие комбинации клавиш, такие как Ctrl-B, чтобы изменить шрифт выделенного текста на полужирный. В других броузерах (таких как Firefox) стандартные для текстовых процессоров комбинации, такие как Ctrl-B и Ctrl-I, выполняют другие операции, имеющие отношение к самому броузеру, а не к текстовому редактору.
Броузеры определяют множество команд редактирования текста, для большинства из которых не предусмотрены горячие комбинации клавиш. Чтобы выполнить эти команды, необходимо использовать метод
execCommand
объекта
Document
. (Обратите внимание, что это метод объекта
Document
, а не элемента с атрибутом
contenteditable
. Если документ содержит более одного редактируемого элемента, команда применяется к тому из них, в котором в текущий момент находится текстовый курсор.) Команды, выполняемые методом
execCommand,
определяются строками, такими как "bold", "subscript", "justifycenter" или "insertimage". Имя команды передается методу
execCommand
в первом аргументе. Некоторые команды требуют дополнительное значение. Например, команда "createlink" требует указать URL для гиперссылки. Теоретически, если во втором аргументе передать методу
execCommand
значение true, броузер автоматически запросит у пользователя ввести необходимое значение. Однако для большей совместимости вам необходимо самим запрашивать у пользователя требуемые данные, передавая false во втором аргументе и требуемое значение - в третьем аргументе.
Ниже приводятся две функции, которые реализуют редактирование с помощью метода
execCommand
:
function bold { document.execCommand("bold", false, null); }
function link {
var url = prompt("Введите адрес гиперссылки");
if (url) document.execCommand("createlink", false, url);
}
Команды, выполняемые методом
execCommand,
обычно запускаются кнопками на панели инструментов. Качественный пользовательский интерфейс должен запрещать доступ к кнопкам, если вызываемые ими команды недоступны. Чтобы определить, поддерживается ли некоторая команда броузером, можно передать ее имя методу
document.queryCommandSupported.
Вызовом метода
document.queryCommandEnabled
можно узнать, доступна ли команда в настоящее время. (Команда, которая выполняет некоторые действия с выделенным текстом, например, может быть недоступна, пока не будет выделен фрагмент текста.) Некоторые команды, такие как "bold" и "italic", могут иметь логическое состояние "включено" или "выключено" в зависимости от наличия выделенного фрагмента текста или местоположения текстового курсора. Как правило, эти команды представлены на панели инструментов кнопками-переключателями. Для определения текущего состояния таких команд можно использовать метод
document.queryCommandState
.
Наконец, некоторые команды, такие как "fontname", ассоциируются с некоторым значением (именем семейства шрифтов). Узнать это значение можно с помощью метода
document.queryCommandValue
. Если в текущем выделенном фрагменте используются шрифты двух разных семейств, команда "fontname" будет иметь неопределенное значение. Для проверки этого случая можно использовать метод
document.queryCommandIndeterm.
Различные броузеры реализуют различные наборы команд редактирования. Некоторые команды, такие как «bold», «italic», «createlink», «undo» и «redo», поддерживаются всеми броузерами. [39]
На момент написания этих строк проект стандарта HTML5 определял команды, перечисленные ниже. Однако, поскольку они реализованы пока не во всех броузерах, здесь не будет даваться сколько-нибудь подробное их описание:
39
Список поддерживаемых команд можно найти по адресуйот/execCommand.html.
selectAll
subscript
superscript
undo
unlink
unselect
bold
insertLineBreak
createLink
insertOrderedList
delete
insertUnorderedList
formatBlock
insertParagraph
forwardDelete
insertText
insertlmage
italic
insertHTML
redo
Если вашему веб-приложению потребуется обеспечить возможность редактирования форматированного текста, то вам, вероятно, лучше обратить внимание на уже реализованные решения, учитывающие различия между броузерами. В Интернете можно найти множество готовых компонентов редакторов. [40]
Следует отметить, что функция редактирования, встроенная в броузеры, обладает достаточно широкими возможностями, чтобы дать пользователю возможность вводить небольшие объемы форматированного текста, но она оказывается недостаточно мощной для создания серьезных документов. Обратите внимание, в частности, что разметка HTML, генерируемая этими редакторами, весьма далека от идеала.
40
Фреймворки YUI и Dojo включают такие компоненты редакторов. Список других решений можно найти на странице http://en.wikipedia.org/wiki/Online_rich-text_editor.
После того как пользователь отредактирует содержимое элемента с атрибутом
contenteditable
, можно воспользоваться свойством
innerHTML
, чтобы получить разметку HTML отредактированного содержимого. Что дальше делать с полученным отформатированным текстом, полностью зависит от вас. Его можно сохранить в скрытом поле формы и отправить вместе с формой на сервер. Непосредственную отправку отредактированного текста на сервер можно выполнить с помощью приемов, описываемых в главе 18. Можно также сохранить результаты редактирования локально, с помощью механизмов, описываемых в главе 20.