|
Свое индивидуальное
задание я решила посвятить
организации web-интерфейса почтовой
службы интернет-сайта, а точнее,
реализации поля для ввода
форматированного текста письма. В
данный момент некоторые почтовые
службы в интернет уже обзавелись
подобными текстовыми редакторами (например,
mail.ru, gmail). Я столкнулась с этим, когда
участвовала в разработке web-интерфейса
почтовой службы корпоративного
сайта. Довольно долго пыталась
понять, как же это все делается, а
когда поняла, оказалось, что все не
так и сложно, нужно только знать, где
искать. Очень помогла
страница Кевина Рота
«Cross-Browser Rich Text Editor» http://www.kevinroth.com/rte/demo.htm, Microsoft Developer Network http://msdn.microsoft.com,
Mozilla Midas Specification
http://www.mozilla.org/editor/midas-spec.html
Представляю Вашему
вниманию такой редактор, написанный
на JavaScript. Данный редактор работает в
IE, Mozilla, Netscape.
Здесь можно взять
demo-версию
редактора
Принцип работы редактора
базируется на свойстве designMode() объекта
document, которое устанавливает, может
ли документ редактироваться или нет. В данном случае на странице
есть объект IFRAME с ID="rteEdit", для него указано:
frames["rtEdit"].document.designMode
= "On"
Синтаксис
|
Скрипт: |
document.designMode
[ = sMode ] |
Возможные значения
|
sMode |
Строка, определяющая
одно из значений:
| On |
Документ может
редактироваться |
| Off | Inherit |
По умолчанию. Документ
не может редактироваться |
|
Редактирование
введенного текста происходит с
помощью метода
execCommand,
который выполняет команду на
текущем документе, выделенном
фрагменте.
Синтаксис
|
Скрипт: |
bSuccess = object.execCommand(sCommand
[, bUserInterface] [, vValue]) |
Параметры
|
sCommand |
Обязательный. Строка, определяющая
какая команда должна исполнятся. Этой командой может
быть одна из «идентификаторов команд» (command
identifiers), которые могут выполняться
в скрипте |
|
bUserInterface |
Необязательный.
Логический, определяющий
одно из значений:
| false |
По умолчанию. Не выводить пользовательский
интерфейс |
| true |
Выводить пользовательский интерфейс, если
команда его поддерживает |
|
|
vValue |
Параметр типа
Variant, который определяет строку, число или другое
значение для присваивания. that specifies the string,
number, or other value to assign. Возможные значения зависят
от sCommand
|
В этом редакторе выполняются
такие команды:
|
sCommand |
|
| Вold |
Полужирный |
| Italic |
Курсив |
| Underline |
Подчеркнутый |
| SubScript |
Подстрочный |
| SuperScript |
Надстрочный |
| InsertOrderedList |
Нумерованный список |
| InsertUnorderedList |
Маркированный список |
| Outdent |
Уменьшить отступ |
| Indent |
Увеличить отступ |
| Cut |
Вырезать |
| Copy |
Копировать |
| Paste |
Вставить |
| JustifyLeft |
По левому краю |
| JustifyCenter |
По центру |
| JustifyRight |
По правому краю |
| InsertHorizontalRule |
Вставить горизонтальную черту |
| Hilitecolor |
Выделение цветом |
| ForeColor |
Цвет шрифта |
| Font |
Шрифт |
| Table |
Вставить таблицу |
| Image |
Добавить рисунок |
| Link |
Вставить гиперссылку |
Добавление таблицы
осуществляется с помощью свойства
innerHTML, который устанавливает или получает
html-текст между тегами объекта.
Синтаксис
|
Скрипт: |
object.innerHTML [ = sHTML ] |
Возможные значения
|
sHTML |
Строка, которая
устанавливает или получает содержимое между начальным и
завершающим тегом |
Это свойство имеется у всех
объектов кроме следующих: COL, COLGROUP, FRAMESET, HEAD, HTML,
STYLE, TABLE, TBODY, TFOOT, THEAD, title, TR.
|
|
