JavaScript. Подробное руководство, 6-е издание, стр. 229

<b>    onLoad(function() { // После загрузки</b>

<b>      var editor = document.getElementById(&quot;editor&quot;); // найти фрейм документа</b>

<b>      editor.contentDocument.designMode = &quot;on&quot;; // и включить режим</b>

<b>    });                                         // редактирования.</b>

<b>&lt;/script&gt;</b>

Все текущие броузеры поддерживают свойства

<b>contenteditable</b>
и
<b>designMode</b>
. Однако они оказываются плохо совместимыми, когда дело доходит до фактического редактирования. Все броузеры позволяют вставлять и удалять текст и перемещать текстовый курсор с помощью клавиатуры и мыши. Во всех броузерах нажатие клавиши Enter выполняет переход на новую строку, но разные броузеры создают в результате разную разметку. Некоторые начинают новый абзац, другие просто вставляют элемент
<b>&lt;Ьг/&gt;.</b>

Некоторые броузеры позволяют использовать горячие комбинации клавиш, такие как Ctrl-B, чтобы изменить шрифт выделенного текста на полужирный. В других броузерах (таких как Firefox) стандартные для текстовых процессоров комбинации, такие как Ctrl-B и Ctrl-I, выполняют другие операции, имеющие отношение к самому броузеру, а не к текстовому редактору.

Броузеры определяют множество команд редактирования текста, для большинства из которых не предусмотрены горячие комбинации клавиш. Чтобы выполнить эти команды, необходимо использовать метод

<b>execCommand()</b>
объекта
<b>Document</b>
. (Обратите внимание, что это метод объекта
<b>Document</b>
, а не элемента с атрибутом
<b>contenteditable</b>
. Если документ содержит более одного редактируемого элемента, команда применяется к тому из них, в котором в текущий момент находится текстовый курсор.) Команды, выполняемые методом
<b>execCommand(),</b>
определяются строками, такими как "bold", "subscript", "justifycenter" или "insertimage". Имя команды передается методу
<b>execCommand()</b>
в первом аргументе. Некоторые команды требуют дополнительное значение. Например, команда "createlink" требует указать URL для гиперссылки. Теоретически, если во втором аргументе передать методу
<b>execCommand()</b>
значение true, броузер автоматически запросит у пользователя ввести необходимое значение. Однако для большей совместимости вам необходимо самим запрашивать у пользователя требуемые данные, передавая false во втором аргументе и требуемое значение - в третьем аргументе.

Ниже приводятся две функции, которые реализуют редактирование с помощью метода

<b>execCommand()</b>
:

<b>function bold() { document.execCommand(&quot;bold&quot;, false, null); }</b>

<b>function link() {</b>

<b>  var url = prompt(&quot;Введите адрес гиперссылки&quot;);</b>

<b>  if (url) document.execCommand(&quot;createlink&quot;, false, url);</b>

<b>}</b>

Команды, выполняемые методом

<b>execCommand(),</b>
обычно запускаются кнопками на панели инструментов. Качественный пользовательский интерфейс должен запрещать доступ к кнопкам, если вызываемые ими команды недоступны. Чтобы определить, поддерживается ли некоторая команда броузером, можно передать ее имя методу
<b>document.queryCommandSupported().</b>
Вызовом метода
<b>document.queryCommandEnabled()</b>
можно узнать, доступна ли команда в настоящее время. (Команда, которая выполняет некоторые действия с выделенным текстом, например, может быть недоступна, пока не будет выделен фрагмент текста.) Некоторые команды, такие как "bold" и "italic", могут иметь логическое состояние "включено" или "выключено" в зависимости от наличия выделенного фрагмента текста или местоположения текстового курсора. Как правило, эти команды представлены на панели инструментов кнопками-переключателями. Для определения текущего состояния таких команд можно использовать метод
<b>document.queryCommandState()</b>
. Наконец, некоторые команды, такие как "fontname", ассоциируются с некоторым значением (именем семейства шрифтов). Узнать это значение можно с помощью метода
<b>document.queryCommandValue()</b>
. Если в текущем выделенном фрагменте используются шрифты двух разных семейств, команда "fontname" будет иметь неопределенное значение. Для проверки этого случая можно использовать метод

<b>document.queryCommandIndeterm().</b>

Различные броузеры реализуют различные наборы команд редактирования. Некоторые команды, такие как «bold», «italic», «createlink», «undo» и «redo», поддерживаются всеми броузерами. [39]

На момент написания этих строк проект стандарта HTML5 определял команды, перечисленные ниже. Однако, поскольку они реализованы пока не во всех броузерах, здесь не будет даваться сколько-нибудь подробное их описание:

<b>selectAll</b>

<b>subscript</b>

<b>superscript</b>

<b>undo</b>

<b>unlink</b>

<b>unselect</b>

<b>bold </b>

<b>insertLineBreak</b>

<b>createLink </b>

<b>insertOrderedList</b>

<b>delete </b>

<b>insertUnorderedList</b>

<b>formatBlock </b>

<b>insertParagraph</b>

<b>forwardDelete </b>

<b>insertText</b>

<b>insertlmage </b>

<b>italic</b>

<b>insertHTML </b>

<b>redo</b>