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

15.10.4. Редактируемое содержимое

15.10.4. Редактируемое содержимое

Мы уже познакомились с элементами форм, включая текстовые поля ввода и элементы textarea, которые дают пользователям возможность вводить и редактировать простой текст. Вслед за IE все текущие веб-броузеры стали поддерживать простые средства редактирования разметки HTML. Вы можете увидеть их в действии на страницах (например, на страницах блогов, где можно оставлять комментарии), встраивающих редактор форматированного текста с панелью инструментов, содержащей кнопки для выбора стиля отображения шрифта (полужирный, курсив), настройки выравнивания и вставки изображений и ссылок.

Существует два способа включения поддержки возможности редактирования. Можно установить HTML-атрибут contenteditable любого тега или установить JavaScript-свойство contenteditable соответствующего элемента Element, содержимое которого разрешается редактировать. Когда пользователь щелкнет на содержимом внутри этого элемента, появится текстовый курсор и пользователь сможет вводить текст с клавиатуры. Ниже представлен HTML-элемент, создающий область редактирования:

<div contenteditable>
  Щелкните здесь, чтобы отредактировать
</div>

Броузеры могут поддерживать автоматическую проверку орфографии для полей форм и элементов с атрибутом contenteditable. В броузерах, поддерживающих такую проверку, она может быть включена или выключена по умолчанию. Чтобы явно включить ее, следует добавить атрибут spellcheck. А чтобы явно запретить -добавить атрибут spellcheck=false (если, например, в элементе <textarea> предполагается выводить программный код или другой текст с идентификаторами, отсутствующими в словаре).

Точно так же можно сделать редактируемым весь документ, записав в свойство designMode объекта Document строку «оп». (Чтобы снова сделать документ доступным только для чтения, достаточно записать в это свойство строку «off».) Свойство designMode не имеет соответствующего ему HTML-атрибута. Можно сделать документ доступным для редактирования, поместив его в элемент <iframe>, как показано ниже (обратите внимание, что здесь используется функция onLoad() из примера 13.5):

<iframe src="about:blank"x/iframe> // Пустой фрейм
  <script>
    onLoad(function() { // После загрузки
      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 определял команды, перечисленные ниже. Однако, поскольку они реализованы пока не во всех броузерах, здесь не будет даваться сколько-нибудь подробное их описание:

selectAll
subscript
superscript
undo
unlink
unselect
bold
insertLineBreak
createLink
insertOrderedList
delete
insertUnorderedList
formatBlock
insertParagraph
forwardDelete
insertText
insertlmage
italic
insertHTML
redo

Если вашему веб-приложению потребуется обеспечить возможность редактирования форматированного текста, то вам, вероятно, лучше обратить внимание на уже реализованные решения, учитывающие различия между броузерами. В Интернете можно найти множество готовых компонентов редакторов.[40]

Следует отметить, что функция редактирования, встроенная в броузеры, обладает достаточно широкими возможностями, чтобы дать пользователю возможность вводить небольшие объемы форматированного текста, но она оказывается недостаточно мощной для создания серьезных документов. Обратите внимание, в частности, что разметка HTML, генерируемая этими редакторами, весьма далека от идеала.

После того как пользователь отредактирует содержимое элемента с атрибутом contenteditable, можно воспользоваться свойством innerHTML, чтобы получить разметку HTML отредактированного содержимого. Что дальше делать с полученным отформатированным текстом, полностью зависит от вас. Его можно сохранить в скрытом поле формы и отправить вместе с формой на сервер. Непосредственную отправку отредактированного текста на сервер можно выполнить с помощью приемов, описываемых в главе 18. Можно также сохранить результаты редактирования локально, с помощью механизмов, описываемых в главе 20.

Оглавление книги