Как работать в HTML-редакторе TinyMCE
Материал из Insales Wiki
Общий вид и список функций редактора TinyMCE
Редактирование страниц осуществляется с использованием визуального редактора.
ОБЩИЙ ВИД РЕДАКТОРА показан на рисунке:
Управление содержанием документа осуществляется с помощью кнопок панели управления. Внешний вид редактируемого документа отображается в окне редактирования (светлое поле). Для изменения размеров окна редактора, нажать левую кнопку мыши при положении её указателя на метке в правом нижнем углу окна редактирования (изменение размеров) и, при нажатой кнопке, перемещением "мышки" установить нужный размер окна.
При перемещении указателя "мышки" по кнопкам панели управления, фон активных кнопок изменяется. Для использования других кнопок нужно сначала выделить участок содержания в окне редактирования, к которому будет применено действие, соответствующее используемой кнопке.
ОПИСАНИЕ ФУНКЦИЙ КНОПОК РЕДАКТОРА (в порядке расположения):
Описание операций, выполняемых в редакторе (по функциям)
Сохранение документа
Save - Сохранить файл
- Сохранить текущий вариант документа в файле
New document - Новый документ
- Полностью очищает введенные данные. Ввод документа можно начать с чистого листа.
Управление фрагментами
Cut - Вырезать
- вырезает часть документа и помещает в буфер обмена.
Copy - Копировать
- помещает часть документа в буфер обмена.
Paste – Вставить
- помещает данные из буфера обмена в документ.
Paste as Plain text - Вставить как текст
- Вставить обычный текст позволяет вставить данные из буфера обмена,предварительно очистив их от форматирования. При использовании Opera®, Firefox® или Mozilla® открывается форма, в которую пользователь вставляет текст из буфера обмена нажатием
Ctrl+V. При установленном параметре «Keep linebreaks» (сохранить переносы строк), переносы строк оформляются в виде абзацев.
После вставки текста в форму:
- "Insert" - вставка текста из формы в редактируемый документ;
- "Cancel" - отказ от вставки текста в документ.
Paste from Word - Вставить из Word
- Вставить из Word позволяет вставить данные из Word, предварительно очистив их от лишнего
форматирования. При использовании Firefox® или Mozilla® открывается форма, в которую пользователь вставляет текст из буфера обмена нажатием "Ctrl+V".
После вставки текста в форму:
- "Insert" - вставка текста из формы в редактируемый документ;
- "Cancel" - отказ от вставки текста в документ.
Find - Найти
- позволяет осуществлять поиск в документе. При вызове функции, открывается форма «Find/Replace» (Поиск/Замена). Для поиска используется вкладка «Find» (Найти).
- "Find what" - в это поле вводится искомое слово или фраза.
- "Direction" - направление поиска от текущей позиции
- Up — искать "Вверх"
- Down – искать "Вниз"
- "Match case" - поиск с учетом регистра (если поставить галочку).
- "Find next" - найти следующее место в тексте, с тем же словом/фразой.
- "Cancel" - отказ от поиска.
Find/Replace - Найти/заменить
- позволяет осуществлять поиск и замену в тексте документа. Используется та же форма, что и при поиске ("Find/Replace"), но вкладка "Replace" (Замена).
- "Find what" - поле для ввода искомого слова/фразы.
- "Replace with" - поле слова/фразы для замены.
- Direction - направление поиска от текущей позиции
- Up — искать "Вверх"
- Down - искать "Вниз"
- "Match case" - поиск с учетом регистра (поставить галочку).
Сначала выполняется поиск и отображение участка документа с выделенным искомым текстом.
- "Replace" - замена найденного в данной позиции. Если в этом месте документа замена не нужна, можно продолжить поиск - нажать "Find next"</b>.
- "Find next" - найти следующее место в тексте, с тем же словом/фразой.
- "Replace all" - замена искомых слов/фраз по всему документу, автоматически, в заданном направлении от текущей позиции.
- "Cancel" - отказ от поиска/замены.
Форматирование текста
Управление шрифтом
Bold - Полужирный
- выделяет текст полужирным.
Italic - Курсив
- выделяет текст курсивом.
Underline - Подчеркивание
- выделяет текст подчеркиванием.
Strikethrough - Перечеркивание
- выделяет текст перечеркиванием.
Управление выравниванием
Align left - Выравнивание влево
- текст выравнивается по левому краю.
Align center - Выравнивание по центру
- текст выравнивается по центру.
Align right - Выравнивание вправо
- текст выравнивается по правому краю.
Align full - Выравнивание равномерно
- текст выравнивается по ширине.
Управление параметрами выделенного текста
Стиль
- позволяет для текста выбрать стиль отображения. Список стилей загружается из CSS-файла, соответствующего макету.
Формат
- позволяет выбрать формат отображения текста.
| Параметр | Функция (перевод) | Вставляемый тег HTML |
| Paragraph | Абзац | <p></p> |
| Address | Стиль адреса | <address></address> |
| Preformatted | Преформатированный | <pre></pre> |
| Header 1 | Заголовок 1 | <h1></h1> |
| Header 2 | Заголовок 2 | <h2></h2> |
| Header 3 | Заголовок 3 | <h3></h3> |
| Header 4 | Заголовок 4 | <h4></h4> |
| Header 5 | Заголовок 5 | <h5></h5> |
| Header 6 | Заголовок 6 | <h6></h6> |
Шрифт
- позволяет для текста выбрать шрифт. При форматировании текста
рекомендуется использовать CSS стили вместо явного указания размера и шрифта.
Размер шрифта
- позволяет задать для текста размер шрифта.
Создание списков
Unordered list
- маркированный список, позволяет добавить на страницу маркированный список
или представить в виде такого списка выделенный фрагмент текста.
Ordered list
- нумерованный список, позволяет добавить на страницу нумерованный список или
представить в виде такого списка выделенный фрагмент текста.
Горизонтальный сдвиг (отступ)
Outdent
– сдвинуть влево (уменьшить отступ), сдвигает влево выделенный фрагмент (объект) относительно остального текста.
Indent
– сдвинуть вправо (увеличить отступ), сдвигает вправо выделенный фрагмент (объект) относительно остального текста.
Отмена – возврат
Undo - Отмена
- отменить последнее действие.
Redo - Возврат
– выполнить ошибочно отменённое действие.
Управление ссылками
Управление ссылками (на "якоря", другие страницы, сайты) активизируется при выборе объекта (выделении текста, выборе картинки) с которого нужно сделать ссылку.
Вставить/изменить ссылку
- внедряет ссылку в текст (тег <a href="адрес ссылки">текст ссылки</a>). Содержит несколько вкладок.
Вкладка «General» (Основные)
| Поле | Функция (перевод) | Описание |
| Link URL | Адрес ссылки | Указывается адрес ссылки (тег <a href="адрес ссылки">текст ссылки</a>). При указании внутренних ссылок необходимо отображать путь с ведущим слэшем (знаком "/"), например /about_company/ |
| Anchors | Якоря | Список доступных для выбора якорей |
| Target | Открыть в… | Выбирается способ открытия ссылки:
|
| Title | Заголовок | Название ссылки (подсказка при наведении курсора мыши) |
| Class | Класс (стиль) | Доступные CSS классы (стили оформления), выбираемые из
выпадающего списка |
Вкладка "Popup" (Всплывающие)
Для открытия ссылки во "всплывающем" окне с заданными параметрами (на Javascript). Настройки становятся доступны после установки галочки "Javascript popup".
| Поле | Функция (перевод) | Описание |
| Popup URL | Адрес «всплывающей» ссылки | Адрес открываемой страницы |
| Window name | Имя окна | Имя открываемого окна, только латинские символы |
| Size [ ] x [ ]px | Размер | Размер всплывающего окна в пикселях |
| Position (X/Y)
[ ] / [ ] (c/c=center) | Позиция окна | Позиция всплывающего окна на экране по осям X и Y, от верхнего левого угла экрана. Если указать в обеих полях "c", то всплывающее окно будет в центре экрана. |
| Options | Дополнительные параметры (опции) | Для выбора дополнительных параметров всплывающего окна – установить галочки напротив требуемых опций:
|
Вкладка «Events» (События)
Вызов ссылки по событию. В поля вводятся адреса, на которые выполняются переходы при наступлении соответствующих событий.
| Поле | Событие | Описание |
| onfocus | Переход «фокуса» на объект | Вызов обработки события «активизация объекта» (переход «фокуса» на объект) |
| onblur | Уход «фокуса» с объекта | Обработка события «дезактивизация объекта» (переход «фокуса» с объекта на другой объект) |
| onclick | Клик на объекте | Вызов обработки события «клик мышки на объекте» |
| ondblclick | Двойной клик | Обработчик события «двойной клик на объекте» |
| onmousedown | Нажатие кнопки мыши | Вызов обработчика нажатия кнопки мыши при её указателе над объектом. |
| onmouseup | Отпускание кнопки мыши | Обработчик события при отпускании кнопки мыши, с указателем над объектом. |
| onmouseover | Указатель мыши – над объектом | Действие при появлении указателя мыши над объектом. |
| onmousemove | Перемещение указателя мыши над объектом | Вызов ссылки при перемещении указателя мыши над объектом, в любом направлении. |
| onmouseout | Уход указателя мыши с объекта | Вызов ссылки при уходе указателя мыши с объекта. |
| onkeypress | Нажатие и отпускание клавиши | Обработчик события "нажатие и отпускание клавиши над объектом" |
| onkeydown | Нажатие клавиши над объектом | Вызов ссылки при нажатии клавиши над объектом |
| onkeyup | Отпускание клавиши над объектом | Вызов ссылки при отпускании клавиши над объектом |
Вкладка «Advanced» (Расширенные)
Дополнительные свойства ссылки (атрибуты, добавляемые к тегу ссылки).
| Поле | Функция (перевод) | Описание |
| Id | Идентификатор | Индивидуальный идентификатор (имя) ссылки |
| Style | Стиль | Стиль ссылки (один из заданных для документа стилей CSS) |
| Classes | Классы | Класс (вариант) отображения ссылки (из используемых) |
| Target name | "Имя цели" | Наименование окна/фрейма в котором нужно открывать данную ссылку (место назначения ссылки) |
| Language direction | Направление письма в языке документа ссылки | Возможны варианты:
|
| Target language | Язык "цели" | Язык, используемый в окне/фрейме, где будет открыта ссылка |
| Language code | Языковой код | Код языка документа ссылки |
| Target character encoding | Целевая таблица символов | Таблица символов, используемая в документе ссылки (номер). |
| Target MIME type | Целевой MIME тип | Тип файла ссылки, передаваемый в место назначения. |
| Relationship page to target | Соотношение страницы (ссылки) и цели | Чем является данная страница (открываемая по ссылке) для целевого окна/фрейма. Т.е. «прямая ссылка» - переход осуществляется на другую страницу (rel="…") Варианты:
|
| Relationship target to page | Соотношение цели и страницы (ссылки) | Чем является целевое окно/фрейм для страницы (ссылки) Т.е. «обратная ссылка» - для перехода назад (rev="…") Варианты:
|
| Tabindex | Таблица указателя | Атрибут, определяющий последовательность перехода по клавише "Tab" |
| Accesskey | Клавиша быстрого доступа | Назначить клавишу быстрого доступа к ссылке |
MIME (Multipurpose Internet Mail Extensions) - стандарт для определения типа передаваемой информации и механизмов ее обработки.
Лайтбокс – специальне окно для просмотра изображений, с дополнительным интерфейсом. Реализуется на JavaScript.
Управление изображениями
Insert/edit image - Вставить/изменить изображение
- позволяет управлять изображениями в документе. Окно имеет несколько вкладок:
Вкладка «Основные»
| Поле | Функция (перевод) | Описание |
| Image URL | Адрес файла | Адрес файла изображения (путь к файлу). При указании пути на сервере, перед именем папки вводить слэш (напр. /files/002b.jpg). |
| Image description | Описание картинки | Текст, который выводится при наведении указателя на картинку (атрибут alt=”…”). |
| Title | Заголовок | Название картинки – выводится в заголовке окна, если открыть картинку в отдельном окне. |
| Preview | Предварительный просмотр | В окне показывается картинка, после ввода её верного адреса (пути к файлу). |
Вкладка «Appearance» (Визуализация)
| Поле | Функция (перевод) | Описание |
| Alignment | Выравнивание | Выравнивание изображения на странице. Варианты:
|
| Dimensions | Размеры | Размеры изображения по высоте и ширине. Измеряется в пикселях. |
| Vertical space | Вертикальный отступ | Отступ по вертикали от картинки до ближайшего объекта (текста, таблицы и т.п.), в пикселях (значение атрибута vspace) |
| Horizontal space | Горизонтальный отступ | Отступ по горизонтали до ближайшего объекта, в пикселях (значение атрибута hspace) |
| Border | Рамка | Толщина рамки для изображения |
| Class | Класс | Установка доступного класса из CSS, выбирается из выпадающего списка |
| Style | Стиль | Стиль для изображения (значение атрибута style) |
Вкладка «Advanced» (Расширенные)
Имеется две панели:
"Swap image" (сменить картинку) – панель замены изображения на альтернативное при действиях с указателем мыши.
- Alternative image (альтернативное изображение) – если установить галочку, то включается поддержка замены картинки на альтернативную при:
- "for mouse over" – при наведении указателя мыши на картинку. В поле нужно вписать адрес (путь к файлу на сервере) альтернативной картинки.
- "for mouse out" – смена изображения при уходе указателя мыши с картинки. В поле нужно вписать адрес изображения (путь к файлу на сервере).
- "for mouse over" – при наведении указателя мыши на картинку. В поле нужно вписать адрес (путь к файлу на сервере) альтернативной картинки.
Панель "Miscellaneous" (разное)
| Поле | Функция (перевод) | Описание |
| Id | Идентификатор | Идентификатор картинки (значение атрибута id) |
| Language direction | Направление письма в языке документа | Возможны варианты:
|
| Language code | Языковой код | Код языка документа (значение атрибута lang) |
| Image map | Карта изображения | Имя файла, определённого элементом «MAP», в котором задана карта расположения фрагментов изображения со ссылками с них (если есть в наличии) – значение атрибута usemap. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты - "map1", то ссылка на нее будет выглядеть как "#map1". |
| Long description link | Полное описание | Ссылка на полное описание изображения (дополняет атрибут alt) - значение атрибута longdesc. |
Вычистить грязный код
Cleanup messy code - Вычистить грязный код
– автоматическая корректировка кода с удалением лишних и ошибочных тегов.
Редактирование HTML-кода
Edit HTML Source - Редактировать HTML
- открывается Редактор html-кодов, в котором пользователь получает возможность корректировки html-кода.
Выбор цвета текста
Select text color - Выбор цвета текста
- предоставляет возможность выбора цвета текста из палитры. На кнопке, под символом шрифта (А) показывается текущий выбранный цвет. Его можно применить к выделенному тексту или нажать кнпку перед началом ввода текста с выбранным цветом. При нажатии на стрелку рядом с кнопкой, выводится таблица (40 цветов), в которой можно выбрать нужный цвет:

Если цветов, представленных в этой таблице не достаточно, нужно нажать кнопку "More colors" под
таблицей. При этом, откроется отдельное окно выбора цветов, с тремя вкладками. Для всех вкладок,
кнопка "Apply" – применить выбранный цвет (окончание выбора).
Вкладка "Picker"
Вкладка "Picker" – "пипетка" позволяет выбрать произвольный цвет.

Для выбора цвета – кликнуть в нужном месте радужной палитры, затем, в правом столбце выбрать его
яркость. Внизу справа показывается код цвета, а также, прямоугольник, залитый выбранным цветом.
В окне с кодом можно ввести нужный код цвета с клавиатуры, в 16-ричном (hex) коде.
Вкладка "Web safe"
Вкладка "Web safe" – веб-безопасные цвета. Выбор из палитры в 216 цветов, являющейся стандартной для всех программ инернет-браузеров (во всех браузерах отображаются одинаково).

Для выбора цвета – кликнуть на нужном цветном квадратике.
Вкладка "Named"
Вкладка "Named" - именованные – таблица цветов, имеющих стандартные наименования (показываются внизу, под палитрой, при наведении курсора на цветные квадратики).

Выбор – аналогичен остальным вкладкам – кликнуть на нужном цвете, нажать кнопку "Apply" -
применить.
Работа с таблицами
Вставить новую таблицу
Inserts a new table - Вставить новую таблицу
- позволяет управлять уже существующими таблицами и создавать новые.
Окно содержит несколько вкладок.
Вкладка "General"
Вкладка "General" (Основные):
| Поле | Функция (перевод) | Описание |
| Columns | Колонки | Количество колонок в таблице |
| Rows | Строки | Количество строк в таблице |
| Cellpadding | Отступ в ячейках | Отступ содержимого от границы, внутри ячеек, значение атрибута cellpadding (в пикселях) |
| Cellspacing | Расстояние между ячейками | Ширина промежутков между соседними ячейками, значение атрибута cellspacing (в пикселях) |
| Alignment | Выравнивание | В окне показывается картинка, после ввода её верного адреса (пути к файлу). |
| Border | Рамка | Горизонтальное выравнивание таблицы на странице, значение атрибута align Варианты:
|
| Width | Ширина | Ширина таблицы, в пикселях, значение атрибута width |
| Height | Высота | Высота таблицы, в пикселях, значение атрибута height |
| Class | Класс | Наименование класса из таблицы CSS стилей (из имеющихся) |
| Table caption | Заголовок таблицы | Резервирование места под заголовок, над таблицей |
Вкладка "Advanced"
Вкладка "Advanced" - (Расширенные):
Параметры строки таблицы
Table row properties - Параметры строки таблицы
- позволяет управлять параметрами и атрибутами строк и содержит две вкладки.
В нижней части окна находится поле выбора строк, к которым будут применены выбранные параметры и атрибуты:
- Update current row - применить к текущей строке.
- Update odd rows in table - применить к нечётным строкам таблицы
- Update even rows in table - применить к чётным строкам таблицы
- Update all rows in table - применить ко всем строкам таблицы
Выбранные параметры вступают в силу после нажатия кнопки "Update". При отказе от применения параметров - нажать "Cancel".
Вкладка "General"
Вкладка "General" (Основные):
| Поле | Функция (перевод) | Описание |
| Row in table part | Строка в части таблицы | Расположение строки в таблице. Варианты:
|
| Alignment | Выравнивание в строке | Выравнивание информации в строке (значение атрибута align) Варианты:
|
| Vertical alignment | Вертикальное выравнивание | Выравнивание информации по вертикали (значение атрибута valign) Варианты:
|
| Class | Класс | Доступные CSS стили, выбираемые из выпадающего списка |
| Height | Высота | Высота строки, в пикселях |
Вкладка "Advanced"
Вкладка "Advanced" (Расширенные):
Параметры ячейки таблицы
Table cell properties - Параметры ячейки таблицы
- открывает окно, которое содержит две вкладки и позволяет задать параметры и атрибуты для ячейки таблицы. В нижней части окна находится поле выбора ячеек, к которым будут применены выбранные параметры и атрибуты:
- Update current cell - применить к текущей ячейке
- Update all cells in row - применить ко всем ячейкам в текущей строке
- Update all rows in table - применить ко всем строкам таблицы
Выбранные параметры вступают в силу после нажатия кнопки "Update". При отказе от применения параметров - нажать "Cancel"
Вкладка "General"
Вкладка "General" (Основные):
| Поле | Функция (перевод) | Описание |
| Alignment | Выравнивание в ячейке | Выравнивание информации в ячейке (значение атрибута align) Варианты:
|
| Cell type | Тип ячейки | Тип ячейки по содержимому:
|
| Vertical alignment | Вертикальное выравнивание | Выравнивание информации по вертикали (значение атрибута valign) Варианты:
|
| Scope | Рассматривать | Круг рассматриваемых объектов:
|
| Width | Ширина | Ширина ячейки, в пикселях |
| Height | Высота | Высота строки, в пикселях |
| Class | Класс | Доступные CSS стили, выбираемые из выпадающего списка |
Вкладка "Advanced"
Вкладка "Advanced" (Расширенные):
Вставить строку перед
Insert row before - Вставить строку перед
- добавляет в таблицу строку перед выделенной/активной ячейкой.
Вставить строку после
Insert row after - Вставить строку после
- добавляет в таблицу строку после выделенной/активной ячейки.
Удалить строку
Delete row - Удалить строку
- удаляет строку с выделенной/активной ячейкой.
Вставить колонку перед
Insert column before - Вставить колонку перед
- добавляет в таблицу колонку перед выделенной/активной ячейкой.
Вставить колонку после
Insert column after - Вставить колонку после
- добавляет в таблицу колонку после выделенной/активной ячейки.
Удалить колонку
Remove column - Удалить колонку
- удаляет колонку с выделенной/активной ячейкой.
Объединить ячейки таблицы
Merge table cells - Объединить ячейки таблицы
- объединяет ячейки таблицы, в количестве, заданном в окне:
С текущей ячейкой объединяются ячейки справа и ниже. Количество объединяемых ячеек указывается:
- Columns - количество объединяемых колонок, включая текущую (количество ячеек по горизонтали, вправо от текущей).
- Rows - количество объединяемых строк, включая текущую (количество ячеек по вертикали, вниз от текущей).
Разделить ячейки таблицы
Split table cells - Разделить ячейки таблицы
- разделяет выделенную ячейку таблицы, если она создана объединением нескольких ячеек. Одиночная ячейка не разделяется.



















