4 августа 2009

Работа с визуальным редактором FCKeditor

В данной статье рассматриваются принципы работы с визуальным текстовым редактором FCKeditor (узнать о FCKeditor-е на Википедии). Я рассказываю о том, как с его помощью форматировать текст, вставлять картинки без знаний HTML и CSS.

Размещение текстовой информации посредством визуального текстового редактора осуществляется в аналогии с MSWord. Для выделения текста жирным начертанием или курсором применяются кнопки B и I соответственно. Выделять текст подчеркиванием не рекомендуется, т.к. подчеркнутый текст на сайте ассоциируется со ссылкой.

В случае копирования и встаки текста с какого-либо сайта этот текст может содержать форматирование (отступы, шрифт, выделение), заданное на сайте-источнике. Для того, чтобы убрать данное форматирование необходимо воспользоваться кнопкой Вставить только текст (см Рис. 1).

Рис. 1. Вставка только текста с источника без форматирования.

Рис. 1. Вставка только текста с источника без форматирования.

Выравнивание текстового блока по левому, правому краю или по центру. Для данного вида форматирования применяется ряд кнопок в панели визуального текстового редактора (см. Рис. 2).

Рис.2. Выравнивание текстового блока.

Рис.2. Выравнивание текстового блока.

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

При форматировании выравнивания текста необходимо понимать следующий момент: выбранное форматирование применяется ко всему абзацу, на котором находится в данный момент курсор.

Абзацы в тексте формируются автоматически. После ввода первого текстового блока и нажатия клавиши Enter следующий текстовый блок будет расположен в отдельном абзаце. Абзац и является контейнером, к которому применяется выбранное форматирование.

Для формирования левого или левого и правого отступов одновременно служат кнопки Увеличить отступ и Цитата соответственно (см. Рис. 3).

Рис. 3. Формирование отступов текстового блока.

Рис. 3. Формирование отступов текстового блока.

Выпадающее меню Форматирование (см. Рис. 4) служит для расстановки заголовков. В случае использования данного типа форматирования на выделенный фрагмент текста устанавливается выбранный стиль заголовка n-ого уровня. При этом следует учитывать следующий момент: поисковые машины чувствительны к заголовочным тегам, которые в данном случае и расставляет визуальный редактор. Необходимо, чтобы в заголовочные теги по возможности попадал текст со словами, по которым планируется раскрутка сайта в поисковых машинах.

Рис. 4. Установка заголовочных тегов.

Рис. 4. Установка заголовочных тегов.

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

Рис. 5. Изменения гарнитуры шрифта.

Выпадающее меню Размер (см. Рис. 6) служит для изменения размера выделенного текста.

Рис. 6. Изменение размера выделенного текста.

Рис. 6. Изменение размера выделенного текста.

Для задания цвета текста или цвета фона выделенного текста служат кнопки Цвет текста и Цвет фона панели визуального редактора (см. Рис. 7).

Рис. 7. Задание цвета текста и цвета фона.

Рис. 7. Задание цвета текста и цвета фона.

Для создания нумерованных или маркированного списков применяются кнопки Создать/Удалить нумерованный список (маркированный список) (см. Рис. 8).

Каждый из пунктов нумерованного или маркированного списка должен находиться в отдельном блоке-абзаце. Сформировав несколько абзацев, которые необходимо переформатировать в список, нужно их выделить и нажать на соответствующую кнопку панели визуального редактора.

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

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

Работа с изображением в FCKeditor

Для вставки изображения на сайт необходимо воспользоваться кнопкой Вставить/Редактировать изображение (см. Рис. 9)

Рис. 9. Вставка изображения.

Рис. 9. Вставка изображения.

При клике на данную кнопку возникает соответствующее окно (см. Рис. 10).

Рис. 10. Диалоговое окно вставки изображения.

Рис. 10. Диалоговое окно вставки изображения.

В поле URL указывается адрес к изображению на сервере. Данное поле заполняется автоматически при загрузке изображения на сервер (вкладка Закачать) или при выборе из уже загруженных изображений (кнопка Просмотреть на сервере).

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

Просмотр изображений на сервере выполняется посредством клика по одноименной кнопке. В этом случае появляется окно просмотра файловой структуры в папке для загрузки изображений по умолчанию.

С уважением, Андрей Морковин.

FCKeditor