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

  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.

16 Каскадные таблицы стилей

Каскадные таблицы стилей (Cascading Style Sheets, CSS) - это стандарт визуального представления HTML-документов. Каскадные таблицы стилей предназначены для использования дизайнерами: они позволяют точно определить шрифты, цвета, величину полей, выравнивание, параметры рамок и даже координаты элементов в документе. Но они также представляют интерес и для программистов, пишущих на клиентском языке JavaScript, потому что позволяют воспроизводить анимационные эффекты, такие как плавное появление содержимого документа из-за правого края, например, или сворачивание и разворачивание списков, благодаря чему пользователь получает возможность управлять объемом отображаемой информации. Когда подобные визуальные эффекты только появились, они казались революционными. Совместное применение технологий CSS и JavaScript, обеспечивающее получение разнообразных визуальных эффектов, получило не совсем удачное название «динамический язык HTML» (Dynamic HTML, DHTML), которое уже вышло из употребления.

CSS - достаточно сложный стандарт, который на момент написания этих строк продолжал активно развиваться. Тема CSS настолько объемная, что для полного ее охвата потребовалось бы написать отдельную книгу, и ее детальное обсуждение выходит далеко за рамки этой книги. [41]

Однако чтобы освоить принципы работы с каскадными таблицами стилей, совершенно необходимо знать хотя бы основы CSS и наиболее часто используемые стили. Поэтому эта глава начинается с обзора CSS, за которым следует описание ключевых стилей, наиболее часто используемых в сценариях. Вслед за этими двумя вводными разделами глава переходит к описанию принципов работы с CSS. В разделе 16.3 описываются наиболее общие и важные приемы: изменение стилей, применяемых к отдельным элементам документа с помощью HTML-атрибута style. Атрибут style элемента можно использовать для задания стилей, но с его помощью нельзя узнать текущие настройки стилей элементов. В разделе 16.4 рассказывается, как можно получить вычисленные стили любого элемента. В разделе 16.5 вы узнаете, как можно изменить сразу несколько стилей путем изменения атрибута style элемента. Имеется также возможность непосредственно управлять таблицами стилей, хотя это и редко используется на практике. В разделе 16.6 будет показано, как включать и отключать таблицы стилей, изменять правила в существующих таблицах и добавлять новые таблицы.

41

Рекомендуемое издание: Эрик Мейер «CSS - каскадные таблицы стилей. Подробное руководство», 3-є издание - Пер. с англ.
– СПб.: Символ-Плюс, 2008.

16.1. Обзор CSS

Визуальное представление HTML-документов определяется множеством параметров: шрифты, цвета, отступы и т. д. Все эти параметры перечислены в стандарте CSS, где они называются свойствами стиля (style properties). Стандарт CSS определяет свойства, которые задают шрифты, цвета, величину полей, параметры рамок, фоновые изображения, выравнивание текста, размеры элементов и их позиции. Чтобы задать визуальное представление HTML-элементов, мы определяем соответствующие значения CSS-свойств. Для этого необходимо записать имя свойства и его значение через двоеточие:

  font-weight: bold

Чтобы полностью описать визуальное представление элемента, обычно бывает необходимо указать значения нескольких свойств. Когда требуется записать несколько пар имя/значение, они отделяются друг от друга точками с запятой:

  margin-left: 10%; /* левое поле 10% от ширины страницы */
  text-indent: .5in; /* отступ 1/2 дюйма */
  font-size: 12pt; /* размер шрифта 12 пунктов */

Как видите, в каскадные таблицы стилей можно помещать комментарии, заключая их в пары символов /* и */. Однако здесь не поддерживаются комментарии, начинающиеся с символов //.

Существует два способа связать набор значений CSS-свойств с HTML-элементами, чье визуальное представление они определяют. Первый заключается в установке атрибута style отдельного HTML-элемента. Такие стили называются встроенными:

  <р style="margin: 20рх; border: solid red 2рх;">
   Этот абзац имеет увеличенные поля и окружен прямоугольной рамкой красного цвета.
  </р>

Однако намного эффективнее отделять стили CSS от отдельных HTML-элементов и определять их в таблицах стилей. Таблица стилей связывает наборы свойств стилей с группами HTML-элементов, которые описываются с помощью селекторов. Селектор определяет, или «выбирает», один или более элементов документа, опираясь на атрибут id или class, имя тега или на другие более специализированные критерии. Селекторы были представлены в разделе 15.2.5, где также было показано, как с помощью querySelectorAll выбрать группу элементов, соответствующих селектору.

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

  р { /* селектору "р" соответствуют все элементы <р> */
   text-indent: .5in; /* первая строка с отступом 0,5 дюйма */
  }
  .warning { /* Любой элемент с атрибутом class="warning" */