Всем привет! Редактор Joomla понадобиться нам для написания статей сайта, вот три стандартных варианта:
- многофункциональный визуальный редактор TinyMCE Joomla;
- редактор с подсветкой синтаксиса кода CodeMirror;
- самый суровый способ работы с материалами — совсем без редактора.
Выбрать редактор 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.
Если не знаете назначение какой-либо кнопки, то просто наведи на нее курсор мыши, и появится справка на русском языке.
Хочу отметить некоторые моменты.
Редактирование html кода
Пусть вы не видите html код, но для форматирования текста именно он и используется. Чтобы его увидеть и в случае необходимости отредактировать, используйте кнопку HTML или просто выключите на время редактор.
Логично было бы предположить, что при выключенном редакторе скрипты все таки можно вставить, но, к сожалению, это не так. При сохранении они все равно удаляются. Поэтому советую для этих целей использовать второй редактор — CodeMirror, у него проблем таких нет.
Вставка картинок
Для загрузки картинки на сервер и последующей вставки ее в текст материала, воспользуйтесь кнопкой «Изображение».
В центральном поле появившегося окна, представлена структура каталогов папки /images, в которой хранятся все изображения Joomla. В нижнем углу можно увидеть кнопку «Обзор», используя которую выберете необходимую картинку со своего компьютера. Для загрузки ее на сервер нажмите на появившуюся кнопку «Загрузить».
Теперь изображение автоматически загрузится на сервер и будет доступно в центральной области. Выберете картинку, укажите для нее описание, заголовок и выравнивания и нажмите кнопку «Вставить» в правом верхнем углу.
Для дальнейшей настройки изображение выделите его и воспользуйтесь кнопкой «Добавить/изменить изображение».
Откроется окно, в котором помимо заголовка и выравнивания можно настроить размеры, границу и отступы (указывайте с величиной измерения, например, 2px, 5px).
Расширенный режим
Почему люди ищут альтернативу TinyMCE? Потому что считают, что он предоставляет недостаточное количество функциональных кнопок для форматирования материала. Они просто не знают, что по умолчанию используется стандартный режим, а ведь есть еще и расширенный!
Переходим в менеджер плагинов, находим в списке «Редактор — TinyMCE» и жмем на него. Попадаем в его настройки.
Основных параметром достаточно много, но, пожалуй, единственный из них, который заслуживает внимание — это . Выбираем расширенный.
Теперь TinyMCE выглядит следующим образом.
Впечатляет? Еще бы! Тут и добавление таблиц, и вставка текста из Word, смайликов, разделителей, клипов и еще вагон всевозможных полезных и не очень фишек. Обо всех кнопках рассказывать не буду, ибо к каждой есть подсказка на русском языке, по которой становится понятно ее назначение.
Вопрос русификации Tiny я уже затрагивал при рассмотрении в целом. Дабы не отправлять вас перечитывать ту статью, я решил несколько повториться и рассказать об этом здесь.
Для русификации TinyMCE нам потребуется русский языковой пакет. Где его можно взять? С сайта joomlaportal.ru . Скачайте «Пакет русской локализации Joomla 2.5.х».
Распаковав полученный архив, вы обнаружите в нем еще три архива. tinymce_ru-RU.zip — это и есть русский языковой пакет для TinyMCE. Распаковывать его не надо. Заходим в и с помощью менеджера расширений устанавливаем данный языковой пакет. Теперь его следует активировать (если это не произошло автоматически).
Переходим в в раздел «Управление». В списке всех доступных расширений находим TinyMCE ru-RU и включаем его. На этом русификация TinyMCE закончена.
Редактор Joomla с подсветкой синтаксиса кода CodeMirror
Вторым стандартным редактором для Joomla является CodeMirror. Назвать его визуальным язык не поварачивается — он только подсвечивает синтаксис кода, который вы вводите вручную. Будет полезен для людей, которые хорошо знакомы с кодом и привыкли с ним общаться напрямую.
Достоинства
Подсвечивает синтаксис кода и добавляет нумерацию строчек — и на том спасибо. Здраво воспринимает скрипты, а не зачищает от них код.
Приведу простой пример, когда может понадобиться использовать скрипты: вывод на страницы сайта через модуль HTML-код. Код социальных кнопок состоит из двух частей: скрипта, отвечающего за функционал, и html кода, отвечающего за вывод кнопок на сайт. TinyMCE обрезает скриптовую часть кода, поэтому социальные кнопки работать не будут. Просто используйте CodeMirror. После вставки скрипта в модуль и его сохранения, можете вновь переключится на Tiny, если он является для вас основным.
Недостатки
Для себя заметил только один существенный недостаток — отсутствует возможность добавлять, так называемые, «быстрые теги», которые позволяют не печатать каждый тег отдельно, а забить их на горячие кнопки, что значительно экономит время.
Конечно, для людей не знающих хотя бы основы html и css, CodeMirror покажется абсолютно бесполезным.
Работа с CodeMirror
Тут все делается в ручную: набиваем текст и вставляем html теги с атрибутами. CodeMirror только подсвечивает синтаксис кода, подобно тому же Notepad++.
Как видите, обязательно нужно знать HTML и CSS.
Режим «без редактора»
Ни разу не пользовался им. Просто даже не могу придумать задачу, которую нельзя было бы решиться с помощью одного из редакторов Joomla, описанных выше.
Функциональные кнопки, общие для всех редакторов
Если вы заметили, то под полем для текста располагаются функциональные кнопки.
— позволяет представить текст материала постранично. На страницу добавляется содержание и постраничная навигация.
При вставке разрыва страницы, необходимо указать заголовок последующей страницы и ее название в содержании.
Зачастую внешний вид статьи в редакторе нс совпадает с тем, что наблюдается на завершенной веб-странице. В частности, шрифты меняются, а их размеры увеличиваются или уменьшаются - иногда вопреки форматам, точно указываемым в редакторе, что совершенно изменяет внешний вид содержимого.
Подобная ситуация, разумеется, не сулит ничего хорошего администратору веб-сайта, но в то же время она предоставляет удобный случай, чтобы научиться выявлять и исправлять неполадки, используя интерфейс администратора веб-сайта на Joomla.
Как же разрешить подобное затруднение? Прежде всего, нужно попытаться откорректировать параметры настройки подключаемого модуля редактора. Для доступа к редактору TinyMCE выберите команду меню Extensions > Plug-in Manager (Расширения > Диспетчер подключаемых модулей). Как только появится окно со списком подключаемых модулей, щелкните на названии TinyMCE под заголовком Editor - TinyMCE, чтобы перейти по предоставляемой ссылке.
На панели Basic Options (Основные параметры) вы обнаружите два параметра, имеющих отношение к режиму отображения в редакторе. Для первого из них. Template CSS Classes (Классы вложенных таблиц стилей шаблона), выбран вариант Yes, а поле второго Custom CSS Classes (Классы специальных вложенных таблиц стилей), оставлено пустым. Можно было бы, конечно, задать специальную таблицу стилей в поле второго параметра, но прежде нужно выяснить, почему не действует вариант, автоматически выбираемый в поле первого параметра.
Итак, по умолчанию для первого параметра Template CSS Classes выбирается вариант Yes , а это означает, что содержимое в редакторе должно отображаться таким же образом, как и на веб-странице. Но дело не в самом редакторе TinyMCE , а в шаблонах, в том числе в стандартных, которые входят в состав системы Joomla.
В частности, поиск CSS-файла в редакторе TinyMCE осуществляется по имени editor, css в каталоге /SELECTEDTEMPLATE/css. Но многие создатели шаблонов не включают этот файл в каталог /css. А это означает, что редактор обращается к стандартным стилям для отображения содержимого. Для того чтобы убедиться в этом, выберите сначала шаблон Beez в качестве стандартного для своей установки Joomla, а затем создайте файл editor.css в каталоге /css этого шаблона. Так, на локальном ПК под управлением Windows путь к новому файлу будет выглядеть следующим образом:
С:\Apache22\htdocs\joomla\templates\beez_20\css\editor.css
Для большей наглядности рассматриваемого здесь примера увеличьте размер шрифта в основном абзаце на 300% и задайте для него наклонное начертание. С этой целью введите следующее определение в файл editor.css:
p {
font-size:500%;
font-style: italic;
}
Сохраните этот файл, а затем откройте любой документ в редакторе, используя интерфейс администратора веб-сайта на Joomla. Файл editor.css дает возможность включать в шаблон именно те стили, которые требуются в редакторе, в то же время исключая те из них, которые просто загромождают интерфейс.
Продвижение Вашего Сайта компанией ZaSEO – http://zaseo.ru/prodvizhenie-saitov-v-google/ . Комплекс работ, направленных на привлечение на Ваш Сайт целевых посетителей путем вывода и удержания в ТОП-10 "Яндекс" "Google" по поисковым запросам.
Если же стилевое оформление редактора не требуется задавать явным образом, настройте параметр Custom CSS Classes , указав основное стилевое оформление из файла template.css для выбранного шаблона. С этой целью выберите сначала команду меню Extensions > Plug-in Manager в интерфейсе администратора веб-сайта, а затем щелкните на подключаемом модуле Editor - TinyMCE, в результате чего появятся параметры настройки редактора TinyMCE. Далее введите в поле Custom CSS Classes имя файла, который требуется использовать из каталога /css текущего шаблона. Все стили из этого файла будут загружены в редактор TinyMCE и станут доступными для выбора из раскрывающегося списка Styles. Они сразу же внедряются в представление редактора для отображения содержимого веб-сайта.
Я лично предпочитаю дублировать основной CSS-файл и переименовывать его на editor.css. Благодаря этому я могу контролировать стили. Создавая файл таблиц стилей для редактора, можно и не обращаться к специально настраиваемым параметрам, если приходится сопровождать несколько веб-сайтов. Достаточно установить шаблон с файлом editor.css, чтобы активизировать подходящие стили в редакторе. Какой бы способ настройки редактора TinyMCE не был выбран, содержимое будет теперь отображаться в нем таким же образом, как и после публикации на веб-сайте.
Окончательное стилевое оформление, доступное непосредственно в редакторе, обеспечит отображение содержимого по принципу WYSIWYG (Что видишь, то и получишь).
Изменить шрифт по-умолчанию в редакторе JCE под CMS Joomla, к сожалению, через настройки расширения нельзя. Рулит всем этим процессом css-файл темы редактора. Причем файлик поставляется, что называется в release варианте, т.е. вытянут в одну строчку так, что там черт ногу сломит.
Кто сталкивался с редактором JCE под Joomla знают, что сам редактор удобный но шрифт там катастрофически мелкий. Установки в параметрах меняют только представление в пользовательской части сайта, а в админке все остается мелким.
На изображении ниже вариант до изменения. Такой шрифт в пору с лупой рассматривать. Для меня загадка о чем думали разработчики. Если еще на виндовой машине с относительно небольшим разрешением на это хоть как-то смотреть можно, то на Mac — полнейшее издевательство.
Как изменить шрифт по-умолчанию в JCE под Joomla
Вскрытие показало, что размер шрифта задается в css-файле основной темы оформления редактора JCE. Файл находится:
/components/com_jce/editor/tiny_mce/themes/advanced/skins/default/content.css
Открываем его, и находим кусок:
Body,td,pre{color:#000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;margin:8px;}
Font-size:11px
Font-size:15px
Размер можете поставить по-вкусу. Для меня вполне допустимо 15 пикселей.
Сбрасываем кэш в CMS и сбрасываем кэш браузера. После этого можно пользоваться.
После изменения редактором можно наконец нормально пользоваться:
Побочный эффект изменения шрифта
Ну без побочных в Joomla, как обычно — никуда. 😉
Очевидно, что при обновлении расширения файл будет обновлен.
Решить проблему можно изменением прав на файл. Пользователю www-data, под которым работает Apache оставляем возможность только чтения этого файла. Однако тут тоже нужно учитывать особенность работы системы обновления, которая может сглючить из-за исключения по доступу к файлу.
В данном уроке мы будем учиться работать с редактором Joomla. Вы узнаете, каким образом можно расширить функциональные возможности визуального редактора, как изменить редактор по умолчанию, как русифицировать редактор TinyMCE.
Для создания и редактирования статей в Joomla служит визуальный редактор TinyMCE, который можно использовать в обычном и расширенном режиме.
Переключение редактора Joomla в расширенный режим
Войдите в Панель управления и кликните по кнопке «Создать статью». Откроется окно редактора. В редакторе мы будем создавать материал, добавлять в него изображения, форматировать. По умолчанию редактор работает в ограниченном режиме и поэтому в панели редактора присутствует очень скромный набор инструментов. Как видите, для работы с материалами сайта инструментов в панели редактора явно недостаточно.
Для того чтобы расширить функциональные возможности редактора, нужно переключить редактор в расширенный режим. Переключить редактор в другой режим можно в настройках плагина TinyMCE. Поэтому, пока закроем редактор и идем в Менеджер плагинов:
1 - В панели управления в верхнем меню выбираем «Расширения» – «Менеджер плагинов», перед вами откроется список плагинов;
2 - Находим плагин TinyMCE, отмечаем его и жмем «Изменить»;
3 - В правой стороне открывшегося окна находим «Параметры», изменяем значение «Функциональность» (ставим «Расширенный») и сохраняем настройки.
По умолчанию для работы с материалом в Joomla используется визуальный редактор TinyMCE, который многие веб-мастера считают не достаточно мощным. В Joomla 3 редактор TinyMCE представлен в обновленной версии. Однако, при желании вы можете установить другой, более мощный редактор, например Joomla Content Editor (JCE) и затем установить его в настройках редактором по умолчанию.
Чтобы в Joomla 2.5 изменить редактор по умолчанию, войдите в Панель управления - Сайт - Общие настройки – вкладка «Сайт» – Визуальный редактор по умолчанию. В выпадающем списке выберите нужный редактор и сохраните настройки.
В Joomla 3 можно изменить редактор по умолчанию, войдя в Панель управления – Параметры – Общие настройки – вкладка «Сайт».
Русификация редактора TinyMCE
Конечно же, работать в любой программе удобнее, если она русифицирована. Русифицировать редактор TinyMCE не составляет никакого труда.
Изменить язык редактора можно в параметрах плагина TinyMCE. В Панели управления в верхнем меню выбираем «Расширения» – «Менеджер плагинов». В открывшемся списке плагинов выбираем TinyMCE, отмечаем его и жмем «Изменить».
В Параметрах плагина включаем Автоматический выбор языка - Вкл. В Joomla 3 - выбираем код языка ru и сохраняем настройки. В Joomla 2.5 - вводим код языка ru вручную и сохраняем настройки.
Теперь, если вы откроете редактор, то увидите, что в панели инструментов все всплывающие подсказки на русском языке.
У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.
В установочный дистрибутив Joomal входит единственный визуальный редактор TinyMCE. Часто визуальные редакторы называют редакторы wisiwyg (визивиг). Перевод соответствует функциям редактора – что видишь, то и получишь.
Редактор Joomla TinyMCE относится к расширениям типа плагин. Соответственно, управление редактором производится на вкладке Расширения→ . Тип плагина (название основного каталога) editors, элемент плагина (название каталога плагина) tinymce. Лежит редактор в корневой папке сайта в каталоге: /…/plugins/editors/tinymce.
Важно! Удалять плагин TinyMCE нельзя. Являясь базовым редактором, на нем строится работа других сторонних редакторов Joomla: JCE, CKEditor, Ark Editor (бывший JCK).
Визуальный редактор JoomlaTinyMCE - настройка
Исходный функционал редактора TinyMCE скудный, хотя и вполне достаточный для написания статей, вставки фотографий и расстановки ссылок.
Если вы привыкли работать с расширенным функционалом визуальных редакторов, идем в настройки плагина TinyMCE на вкладку: Расширения→Менеджер плагинов и воспользовавшись фильтром по названию TinyMCE, открываем плагин для редактирования.
Расширить функционал редактора можно в строке: Режим редактора (1). Можно выставить три режима: Простой, Стандартный, Расширенный (2). Каждый режим редактора имеет свой набор кнопок визуального редактирования.
В последних версиях Joomla, не помню, с какой версии, убрали стили редактора, оставив, один стиль: lightgray.
Недостатки редактора TinyMCE
К сожалению, для себя я изначально привык работать с редактором JCE и поэтому TinyMCE, субъективно имеет ряд недостатков. Основной из них это неудобное вставление фото в текст. На кнопке «Добавить изображение» фото можно вставить только по него URL. Это неудобно, так как нужно заранее скопировать URLы фотографий в Медиа-менеджере. Однако это удобно, если вы используете для сайта внешние хранилища фотографий.
class="eliadunit">
Обращу ваше внимание: В настройках TinyMCE есть строка, какой тип ссылок нужно вставлять в редакторе, относительную или абсолютную. По умолчанию стоит относительная ссылка. Такая настройка не запрещает вам вставлять в редакторе внешние ссылки абсолютного типа. Напомню, относительный тип ссылки указывает адрес файла относительно корня сайта. Абсолютная ссылка полный адрес файла, как в браузере.
Вернемся к недостаткам TinyMCE. В исправлении неудобства вставки фотографий на помощь приходит сама система Joomla. В системе, по умолчанию установлен плагин: Кнопка - Изображение (тип-editors-xtd, элемент-image). По умолчанию он включении внизу любого визуально редактора, включая внешние, появляется кнопка «Изображение». Она значительно упрощает вставку фото, непосредственно из папок Медиа-менеджера.
Причем, можно вставить фото кнопкой «Изображение», а потом отредактировать его кнопкой «Добавить фото» редактора TinyMCE добавив атрибут alt и title к изображению.
Как отключить редактор
Часто приходится редактировать или добавлять тексты не в визуальном режиме, а в режиме текстового редактора. Для этого не нужно входить в Общие настройки и переключать редакторы на «CodeMirror» или «Без редактора». Достаточно нажать кнопку внизу окна редактора «Выключить редактор».
На этом все! В следующих статьях про редакторы: JCE, JCK, Ark Editor. Сообщение о новых статьях и их анонсы можно получить по почте после подписки.
