визуальный редактор CKeditor Главная > Вебмастеру > Создание своего сайта > Блог Андрея Морковина > Работа с визуальным редактором CKeditor

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

Как создать нам сайт попроще?
Чтобы быстро и удобно?
Нужно денег взять побольше
И пойти к тому, кто знает.
Алексей Востров.
4 августа 2009 года

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

 

 

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

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

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

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

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

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

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

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

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

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

    Для задания цвета текста или цвета фона выделенного текста служат кнопки «Цвет текста» и «Цвет фона» на панели визуального редактора.

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

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

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

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

    При клике на данную кнопку, возникает соответствующее окно.

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

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

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

    Автор: Андрей Морковин.

 

Ещё материалы по этой теме:

 

 

Комментарии:

Олег
не могу найти доки по прикручиванию кнопки в этот редактор

Never Lex
Мда. Конечно визуальные редакторы это зло, но FCKeditor во всяком случае лучше TinyMCE. Пришлось один раз использовать этот редактор. На выходе сплошной мусор в HTML, но зато не глючит и заказчики рады. Пытался им объяснить что к чему, но им всё равно. Учиться и не собираются элементарному оформлению тегами.

Natalka
У меня безумно большимим шрифтом H1. Я делаю его меньше, но много мусора получается. Я не программист. Как можно для h1, h2 и т.д. задать меньший размер?

Владимир
Размер заголовков лучше изменить в css

Создание сайтов
Это самый лучший редактор из всех, которые я когда-либо видел!! Супер!

 

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

 

Полезные ссылки:

Тест на интроверта и экстраверта Шаблонизатор Smarty

 


основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!