Всем привет! Редактор Joomla понадобиться нам для написания статей сайта, вот три стандартных варианта:

  1. многофункциональный визуальный редактор TinyMCE Joomla;
  2. редактор с подсветкой синтаксиса кода CodeMirror;
  3. самый суровый способ работы с материалами — совсем без редактора.

Редактор joomla

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

Выбор редактора joomla

Визуальный редактор TinyMCE

Пожалуй, самый популярный визуальный редактор Joomla. Что же его делает таковым?

Его остоинства:

1. Главное достоинство — это, конечно, возможность работать с материалами Joomla даже не зная, что такое html. И правда, людям, у которых блог посвящен даче, кулинарии или вышиванию не очень хочется забивать голову каким-то html. Им он просто ни к чему. А тот же Word, интерфейс которого во многом копирует TinyMCE, знают практически все.

2. В версиях Joomla 2.5.х TinyMCE доступен сразу после установки Джумла. Зачастую люди сразу к нему привыкают и уже не ищут какой-либо альтернативы.

3. Функционал TinyMCE очень велик, поэтому пользователи совершенно не знакомые с html не будут чувствовать себя стесненными при форматировании текста материалов.

Недостатки

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

Еще одним недостатком является невозможность вставки скриптов на php или javascript. При сохранении они просто удаляются.

Как работать с TinyMCE

Почему его называют визуальным? Все очень просто — материал в TinyMCE показывается точно так, как он будет отображаться на странице сайта. Нет никакого html кода, только функциональные кнопки над окном ввода текста, которые позволяют отформатировать его по вашему желанию. По интерфейсу и принципу работы TMCE напоминает текстовые редакторы, самые популярные из которых Microsoft Word и его бесплатный аналог OpenOffice Word.

TinyMCE стандартный режим

Если не знаете назначение какой-либо кнопки, то просто наведи на нее курсор мыши, и появится справка на русском языке.

Хочу отметить некоторые моменты.

Редактирование html кода

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

редактирование html

Логично было бы предположить, что при выключенном редакторе скрипты все таки можно вставить, но, к сожалению, это не так. При сохранении они все равно удаляются. Поэтому советую для этих целей использовать второй редактор — CodeMirror, у него проблем таких нет.


Вставка картинок

Для загрузки картинки на сервер и последующей вставки ее в текст материала, воспользуйтесь кнопкой «Изображение».

Изображение

В центральном поле появившегося окна, представлена структура каталогов папки /images, в которой хранятся все изображения Joomla. В нижнем углу можно увидеть кнопку «Обзор», используя которую выберете необходимую картинку со своего компьютера. Для загрузки ее на сервер нажмите на появившуюся кнопку «Загрузить».

Загрузка картинки

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

Вставка картинки

Для дальнейшей настройки изображение выделите его и воспользуйтесь кнопкой «Добавить/изменить изображение».

Добавить/изменить изображение

Откроется окно, в котором помимо заголовка и выравнивания можно настроить размеры, границу и отступы (указывайте с величиной измерения, например, 2px, 5px).

Расширенный режим

Почему люди ищут альтернативу TinyMCE? Потому что считают, что он предоставляет недостаточное количество функциональных кнопок для форматирования материала. Они просто не знают, что по умолчанию используется стандартный режим, а ведь есть еще и расширенный!

Переходим в менеджер плагинов, находим в списке «Редактор — TinyMCE» и жмем на него. Попадаем в его настройки.

Режим

Основных параметром достаточно много, но, пожалуй, единственный из них, который заслуживает внимание — это Режим. Выбираем расширенный.

Теперь TinyMCE выглядит следующим образом.

TinyMCE расширенный

Впечатляет? Еще бы! Тут и добавление таблиц, и вставка текста из Word, смайликов, разделителей, клипов и еще вагон всевозможных полезных и не очень фишек. Обо всех кнопках рассказывать не буду, ибо к каждой есть подсказка на русском языке, по которой становится понятно ее назначение.

Русификация TinyMCE

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

Для русификации TinyMCE нам потребуется русский языковой пакет. Где его можно взять? С сайта joomlaportal.ru. Скачайте «Пакет русской локализации Joomla 2.5.х».

Русификация TinyMCE

Распаковав полученный архив, вы обнаружите в нем еще три архива. tinymce_ru-RU.zip — это и есть русский языковой пакет для TinyMCE. Распаковывать его не надо. Заходим в админку Joomla и с помощью менеджера расширений устанавливаем данный языковой пакет. Теперь его следует активировать (если это не произошло автоматически).

русификация tinyMCE

Переходим в менеджере расширений в раздел «Управление». В списке всех доступных расширений находим TinyMCE ru-RU и включаем его. На этом русификация TinyMCE закончена.

Редактор Joomla с подсветкой синтаксиса кода CodeMirror

Вторым стандартным редактором для Joomla является CodeMirror. Назвать его визуальным язык не поварачивается — он только подсвечивает синтаксис кода, который вы вводите вручную. Будет полезен для людей, которые хорошо знакомы с кодом и привыкли с ним общаться напрямую.

Достоинства

Подсвечивает синтаксис кода и добавляет нумерацию строчек — и на том спасибо. Здраво воспринимает скрипты, а не зачищает от них код.

Приведу простой пример, когда может понадобиться использовать скрипты: вывод социальных кнопок на страницы сайта через модуль HTML-код. Код социальных кнопок состоит из двух частей: скрипта, отвечающего за функционал, и html кода, отвечающего за вывод кнопок на сайт. TinyMCE обрезает скриптовую часть кода, поэтому социальные кнопки работать не будут. Просто используйте CodeMirror. После вставки скрипта в модуль и его сохранения, можете вновь переключится на Tiny, если он является для вас основным.

Недостатки

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

Конечно, для людей не знающих хотя бы основы html и css, CodeMirror покажется абсолютно бесполезным.

Работа с CodeMirror

Тут все делается в ручную: набиваем текст и вставляем html теги с атрибутами. CodeMirror только подсвечивает синтаксис кода, подобно тому же Notepad++.

CodeMirror

Как видите, обязательно нужно знать HTML и CSS.

Режим «без редактора»

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

Функциональные кнопки, общие для всех редакторов

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

Дополнительные кнопки

Материал — вставка ссылки на уже существующий материал.

Изображение — загрузка картинки на сервер и вставка ее в текст материала.

Разрыв страница — позволяет представить текст материала постранично. На страницу добавляется содержание и постраничная навигация.

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

Разрыв страницы

А вот так это выглядит на сайте.

Постраничное представление материала

Подробнее — весь материал до тега «подробнее» попадает в анонс материала.
Если в редакторе Tiny "Подробнее" не вставляется, следует открыть html форму материала и вставить следующий тэг вручную:

<hr id="system-readmore" />

[/stextbox]

На этом же на сегодня все. Спасибо за внимание!

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.