Визуальный редактор для заполнения страниц, основные кнопки и их назначение

Посмотреть демо. Купить полную версию.

Управление текстовым визуальным редактором (опции и функции)

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

Внешний вид редактора вы видите на рисунке
визуальный редактор для сайта
Рассмотрим действия, которые активируют кнопки.

Панель редактирования текста расположена в верхнем ряду.

 Кнопка bold предназначена для придания тексту жирного вида. В html окружает его тегом {b}

  Кнопка I формирует наклонный шрифт и окружает его тегом {i}

 Кнопка U делает шрифт подчеркнутым, окружая его span с underline (нижним подчеркиванием)

 Кнопка зачеркивания текста. Окружает его тегом span c line-through

Рядом с панелью опциями показа текста находится панель управления выравниваниями

 Выравнивание слева. При выделенном участке текста и нажатии на кнопку, текст выравнивается по левому краю. В этом случае в html формируется  слой с позиционированием align:left

Выравнивание по центру. Добавляет тэг align:left. Особенно часто применяется для установки картинок.

Выравнивание текста  по правому краю.

 Выравнивание текста по всей ширине. Добавляет тэг align:justify

 Вырезать объект или текст. Отмеченный участок текста вырезается и помещается в буфер обмена.

 Копировать. Отмеченный участок текста помещается в буфер обмена.

 Вставить. Информация из буфера вставляется в указанное курсором место в странице.

 вставитьВставить только текст. Эта опция для тех случаев, когда в буфер обмена попали и картинки и текст и табличные данные. Если вы копировали не внимательно, рекомендуем использовать данную опцию.

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

 поискПоиск. Его можно вызвать сочетанием клавиш Cntrl+F. Открывающееся окно предлагает найти текст на странице.

 Замена. Ее можно вызвать сочетанием клавиш Cntrl+F. В одно поле вбивается участок фразы или слово , во второе слово или символы для замены.

 Создание маркированных списков.

 Создание нумерованных списков.

 Увеличить отступ. Выделенный фрагмент ужимается. Рядом слева находится такая же кнопка с уменьшением отступа. Добавляет тэг padding-left в html-код.

 Цитата. Добавляет тэг site, в открывшемся окне можно привести участок текста для цитирования.

 Отменить операцию. Заменяется клавиатурным эквивалентом Cntrl+Z

 Отменить отменение (вернуть назад). Заменяется клавиатурным эквивалентом Cntrl+Shift+Z

 Вставить ссылку. При активации данной кнопке, на участок выбранного текста (рисунка) вешается гиперссылка. В случае с BOSS-CMS можно установить внутреннюю ссылку на другую страницу сайта или раздел.

 Удалить гиперссылку. Для того, чтобы удалить, выделите участок текста, который содержит ссылку  и нажмите на данную кнопку.

 Вставить анкор (якорь). Используется тогда, когда необходимо расставить метки на странице для быстрой к ним прокрутки.

 Вставить/редактировать изображение. В диалоговом окне вставить адрес рисунка или воспользоваться закачкой изображений. Подробно действие показано на странице заполнения страниц сайта.

 Кнопка открывает окно с исходным кодом страницы. Рекомендовано к использованию людьми, знающими язык гипертекстовой разметки

 Установить дату. Записывает текущую дату.

 Установить время публикации

 Выбрать цвет текста. Окрашивает текст при помощи тэга font-color

 Залить фон под текстом.

Остальные опции редактора вы можете найти в сети или посмотреть наше расширенное описание.

ИЗ БЛОГА Маленькие хитрости:
Как работает адресная строка
Как работает поиск
Многооконность и многозадачность
Перетащите изображения мышкой (drug-n-drop)