Всем привет! Редактор 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
Как правило, макет содержит шрифт, стоящий первым в списке. Соответственно, проставить свой шрифт (к примеру, Ubuntu) можно, только поставив его название первым. Кроме того, указывая свой шрифт перед Arial, вы добьетесь вызова по умолчанию желаемого Ubuntu, а затем уже будет отображаться Arial, Verdana либо sans-serif.
Лучше, если проставлено несколько вариантов, чтобы не потерять пользователя изза такой досадной чепухи. Заходите в Расширения / Менеджер шаблонов / Свой шаблон / Редактировать CSS, вписывая нужный шрифт в строчку font-family: 1шрифт, 2шрифт и т.д.
Размер
Чтобы изменить размер шрифта заголовков, подзаголовков и самого текста, внутри административной панели Jooma вашего сайта потребуется изменить некоторые настройки. Подобная проблема может возникать, если по умолчанию используется визуальный редактор TinyMCE (в «Общих настройках» в разделе «Сайт»). По умолчанию в этом редакторе установлен размер шрифта 10 пикселей, однако решить проблему можно созданием пользовательских настроек размера шрифта с помощью CSS, после чего произвести настройку размеров шрифтов для использования в вашем редакторе.
В пункте Расширения выбираем подпункт Менеджер шаблонов и в нужном шаблоне выполняем редактирование стиля, отвечающего за изменение размера шрифтов.
Для создания файла CSS нужно воспользоваться текстовым блокнотом, чтобы получить следующую запись:
body, td, pre { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.6em; }
В этом файле CSS я отобразил шрифт на 160% больше от первоначального показателя. Желаемый размер выбирается с использованием пикселей (13px), пойнтов (13pt), но для удобства лучше применять форму записи в процентах (em), т.к. они подходят для всех браузеров. В дальнейшем, это поможет избежать проблем с отображением административной панели в предпросмотре разными браузерами.
Цвет шрифта
Цвет шрифта меняется аналогично размеру и типу шрифта. Единственно, в чем состоит разница, так это в выбранных параметрах. Цвет шрифта, равно как и фон сайта меняется внутри меню административной панели, в шаблоне JA_Purity. Находим в Расширениях/ Менеджее шаблонов / Своем шаблоне / Редактировать CSS и вписываем нужный цвет (например, blue) в параметр color (цвет фона – в параметре background #ffffff):
Требуемый цвет шрифта готов!
Стили CSS
Нередко новички Joomla! желают поменять спецоформление всех пунктов меню, чтобы улучшить конфигурацию дизайна сайта, в целом. Для этого понадобится корректировка CSS стилей меню внутри шаблона.
Отображение классов CSS, ответственных за оформление пунктов меню имеет следующий вид:
Разобъем настройку TinyMCE на несколько шагов. Обычно нужно сделать следующее:
- Добиться, чтобы текст внутри редактора TinyMCE отбражался согласно заданному набору CSS-правил
- Добиться, чтобы курсор при нажатии Enter перепрыгивал вниз на высоту строки
- Добиться, чтобы текст, написанный в TinyMCE, выглядел на сайте так же, как и в редакторе
- Разобраться, как использовать в TinyMCE CSS-классы оформления, используемые на сайте
Итак, по-порядку.
В первую очередь надо добиться, чтобы текст внутри редактора TinyMCE выглядел так, как нам надо. То есть, нужно настроить CSS-файл, в котором прописаны CSS-правила отображения текста в TinyMCE.
Существует мнение, что настройка форматирования текста, для самой популярной темы advanced, происходит в файле /themes/advanced/skins/default/content.css. Это не так. На деле, обращения к этому файлу, без дополнительной настройки, TinyMCE не делает.
Чтобы настроить внешний вид текста в области редактирования TinyMCE, надо сделать следующее:
1. Скопировать файл /themes/advanced/skins/default/content.css в каталог, где лежат css-файлы сайта или CMS. Я обычно использую каталог /css (относительно корня сайта).
2. Переименовать скопированный файл с /css/content.css на /css/tinymce.css, ибо через некоторое время можно забыть, откуда появился и для чего нужен файл с названием "content.css".
3. В настройках TinyMCE (т.е. в настроечном массиве tinyMCE.init) надо добавить опцию:
4. Надо убедиться, что данный файл влияет на TinyMCE. Для этого надо в первой строчке заменить размер шрифта font-size с 10px на 12px. Вот так:
Данную настройку имеет смысл так и оставить, ибо размер 10px все считают слишком мелким.
5. Обновляем страницу. Для того, чтобы увидеть изменения оформления, в некоторых браузерах, особенно это касается Opera, надо обязательно очистить кеш, чтобы перегрузился css-файл.
Далее нам необходимо сделать так, чтобы курсор при нажатии Enter перепрыгивал на следущую строчку, а не делал большой отступ, показывая создание нового параграфа. Как показывает практика, появление большого отступа при нажатии Enter в TinyMCE вызывает ступор у многих пользователей. Связано это с тем, что в "обычных" редакторах типа MS Word, межстрочный интервал и интервал между параграфами по-умолчанию равны. А в TinyMCE, по умолчанию, интервал между параграфами больше, чем межстрочный.
Многие пытаются решить эту проблему путем прописывания в настроечный массив tinyMCE.init следующей настройки:
force_br_newlines: true
Этого делать ненадо! Во-первых, TinyMCE глючит при работе со строками, разделенными тегом
. Об этом знают разработчики TinyMCE, но напрямую не говорят, а настоятельно не рекомендуют пользоваться такой настройкой. А во-вторых, наша задача совсем в другом - надо сделать одинаковым межстрочный интервал и интервал между параграфами. Тогда пользователю будет удобно работать.
Поэтому, в созданный нами файл /css/tinymce.css нужно добавляем строку:
С помощью этой строки новый параграф не будет отделяться большим отступом, а будет внешне выглядеть как новая строка.
Теперь нужно сделать так, чтобы текст, созданный в TinyMCE, отображался на страницах сайта именно в том виде, в котором он виден в области редактирования TinyMCE.
Если мы просто подключим файл /css/tinymce.css к коду страницы сайта, то ничего хорошего из этого не выйдет. А не выйдет потому, что правила, прописанные в /css/tinymce.css, написаны в "явном виде" для всех основных тегов. Таким образом, простое подключение /css/tinymce.css к HTML-коду страницы сайта, может нарушить верстку страницы.
Я долго разбирался, каким же образом можно подключить CSS-правила, используемые в TinyMCE так, чтобы они влияли только на определенную область HTML-кода (то есть на ту облась, в которой находится текст, созданный с помощью TinyMCE). В результате подошел только один метод. Немного неудобный, но зато работающий железобетонно.
Нам нужно сделать следующее:
1. Скопировать файл /css/tinymce.css, дав ему имя /css/site_tinymce.css. В этом новом файле надо перед каждым CSS-правилом прописать строку ".tinymce " . Например, имеем файл /css/tinymce.css с содержимым:
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
body {background:#FFF;}
p, span { margin: 0; padding: 0; }
body.mceForceColors {background:#FFF; color:#000;}
h1 {font-size: 2em}
MceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
td.mceSelected, th.mceSelected {background-color:#3399ff !important}
table {cursor:default}
table td, table th {cursor:text}
img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
font {font-family:inherit !important}
Тогда содержимое файла /css/site_tinymce.css должно быть:
Tinymce body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}
Tinymce body {background:#FFF;}
Tinymce p, span { margin: 0; padding: 0; }
Tinymce body.mceForceColors {background:#FFF; color:#000;}
Tinymce h1 {font-size: 2em}
Tinymce .mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
Tinymce a.mceItemAnchor {display:inline-block; width:11px !important; height:11px !important; background:url(img/items.gif) no-repeat 0 0;}
Tinymce td.mceSelected, th.mceSelected {background-color:#3399ff !important}
Tinymce img {border:0;}
Tinymce table {cursor:default}
Tinymce table td, table th {cursor:text}
Tinymce * html body {
scrollbar-3dlight-color:#F0F0EE;
scrollbar-arrow-color:#676662;
Tinymce img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
Tinymce font {font-family:inherit !important}
2. Подключаем файл /css/site_tinymce.css к HTML-коду страницы сайта:
3. Ту область, где должен выводиться текст, созданный в TinyMCE, заключаем в тег div, с указанием класса tinymce:
Таким образом, мы создали CSS-файл правил, которые применяются только к элементам, расположенным внутри тега с классом "tinymce". Посему, эти правила не будут нарушать верстку сайта. А чтобы эти правила применялись к тексту, созданному в TinyMCE, мы заключаем этот текст в тег
Почему такой подход неудобен? Да потому, что теперь нужно постоянно помнить, что если что-то перенастроили в файле /css/tinymce.css, тоже самое нужно сделать и в файле /css/site_tinymce.css.
А почему бы не обойтись одним файлом? Например, можно было бы иметь один CSS-файл (с содержимым /css/site_tinymce.css), а вставку редактора TinyMCE заключить бы в тег
Отвечаю. На самом деле, CSS-файл, подключаемый через опцию content_css - не настоящий css-файл. Он нигде в TinyMCE не подключается в том виде, в котором считан. Вместо этого он парсится ява-скриптом, и свойства отображения текста применяются динамически. Эксперименты и изучение кода TinyMCE (v. 3.3.6 от 20.05.2010) показали ограничения, которые накладываются на css-файл, подключаемый через опцию content_css . Вот эти ограничения:
1. В файле нельзя использовать сложные селекторы. Селекторы должны быть написаны для тегов в явном виде, либо простыми правилами. Вследствие этого, не работает идея прописывания строки ".tinymce " перед каждым селектором, и обрамление
2. В файле нельзя использовать инклуд других CSS-файлов. Строки следущего вида:
@import "/css/additional.css"
нарушают работу css-парсера, встроенного в TinyMCE, и текст начинает отображаться совершенно некорректно.
Вследствие этих ограничений, я пока не вижу другого решения, отличного от идеи держать два css-файла: один для TinyMCE, второй для страниц сайта.
Остался последний пункт - разобраться, как использовать в TinyMCE CSS-классы оформления, используемые на сайте. Здесь пришлось столкнуться с теми же проблемами, что и в предыдущей задаче, но к счатью, решение оказалось достаточно простым.
Итак, у нас есть CSS-файл, в котором прописаны CSS-правила оформления, используемые на страницах сайта. Пусть это будет файл /css/site.css. Пусть, к примеру в нем есть три вот таких правила:
font-size: 14pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
Font_block_code
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
margin-left: 20px;
margin-right: 20px;
background-color: #EFEFF5;
Мы хотим, чтобы в TinyMCE была возможность форматирования текста именно этими правилами. Внешне это должно выглядеть так - в панеле TinyMCE должен быть выпадающий список, в ктором будет три пункта:
- Большой заголовок
- Мелкий текст
При выборе соответсвующего пункта, текст должен форматироваться правилом ".font_big_head", ".font_mini" или ".font_block_code" .
Сделать такую функциональность нетрудно. Нужно в настроечном массиве tinyMCE.init добавить элемент styleselect в какую-нибудь линейку кнопок, например в theme_advanced_buttons2. Вот так это может выглядеть:
theme_advanced_buttons2: "fontselect, fontsizeselect, styleselect",
Затем надо указать, какой выпадающий список будет показывать элемент styleselect . Для этого в настроечный массив tinyMCE.init нужно добавить следующую опцию:
style_formats: [
{title: "Большой заголовок", block: "p", classes: "font_big_head" },
{title: "Мелкий текст", inline: "span", classes: "font_mini"},
{title: "Код", block: "p", classes: "font_block_code"}
Если теперь в редакторе выделить кусок текста, и нажать пункт "Большой заголовок" , этот текст будет заключен в тег
А если выбрать пункт "Мелкий текст ", то текст будет заключен в тег и т.д.
Однако, несмотря на правильно генерируемый HTML-код, в окне редактирования TinyMCE мы не увидим применения данного форматирования. Почему? Да потому, что CSS-файл /css/site.css с нашими правилами неизвестен TinyMCE.
Значит, нам надо подключить в TinyMCE два файла - /css/tinymce.css и /css/site.css . Однако, изучая документацию, мы видим, что с помощью опции content_css подключить-то можно только один CSS-файл. К тому же, как мы уже выяснили, подключить один CSS-файл внутри другого CSS-файла так же не представляется возможным.
Я даже попробовал прописать в массив tinyMCE.init две опции content_css :
content_css: "/css/tinymce.css",
content_css: "/css/site.css",
но как и ожидалось, ни к чему хорошему это не привело - считывается только первый файл.
Снова пришлось лезть в исходники TinyMCE, и что же я там увидел? Оказывается, возможность добавить несколько css-файлов есть, только об этом в документации не написано. Нужно просто перечислить подключаемые файлы, разделяя их имена пробелом/запятыми. Вот так:
content_css: "/css/tinymce.css, /css/site.css",
После этого действия, применение стилей, описанных в /css/site.css , становится сразу видно в редакторе TinyMCE.
Нужно сразу оговорить один важный момент.
Помните, что мы добавляли правило "p, span { margin: 0; padding: 0; }" в файл /css/tinymce.css ? Так вот, нулевые отступы, заданные в этом правиле, будут "перевешивать" отступы, заданные в правиле ".font_block_code" . Это происходит из-за того. что правило, с тегом в селекторе (p, span ), "весит" больше, чем правило, заданное только с использованием имени класса (.font_block_code ).
Поэтому, нужно взять за привило, что селекторы CSS-правил, используемые и на страницах сайта, и в редакторе TinyMCE, должны быть прописаны с использованием тегов. То есть, вместо вышеприведенных правил ".font_big_head" , ".font_mini" и ".font_block_code" , правильно будет писать такие правила:
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
p.font_block_code
font-family: "Courier New", Courier, monospace;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
margin-left: 20px;
margin-right: 20px;
background-color: #EFEFF5;
Надеюсь, эта статья поможет тем, кто из всего многообразия онлайновых HTML-редакторов (http://www.geniisoft.com/showcase.nsf/WebEditors) выбрал наиболее кросс-браузерный и конфигурабельный редактор TinyMCE.
Зачастую внешний вид статьи в редакторе нс совпадает с тем, что наблюдается на завершенной веб-странице. В частности, шрифты меняются, а их размеры увеличиваются или уменьшаются - иногда вопреки форматам, точно указываемым в редакторе, что совершенно изменяет внешний вид содержимого.
Подобная ситуация, разумеется, не сулит ничего хорошего администратору веб-сайта, но в то же время она предоставляет удобный случай, чтобы научиться выявлять и исправлять неполадки, используя интерфейс администратора веб-сайта на 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 (Что видишь, то и получишь).
И так, мы установили джумла 3 и прежде чем приступить к размещению контента, нам необходимо настроить стандартный визуальный редактор для joomla 3
Настройка редактора joomla
Когда мы размещаем статью, мы стараемся сделать ее удобной для чтения и в тоже время нам нужен приятный, эстетический вид. Для этого мы используем визуальный редактор. Для джумалы создано много разнообразных редакторов, но о них мы поговорим чуть позже. Сейчас мы рассматриваем, стандартный редактор tinymce.
При установке joomla интерфейс редактора сильно урезан.
Для того что бы расширить функционал редактора, нужно перейти: Расширения/ Менеджер плагинов далее мы находим ссылку «Редактор - TinyMCE» и кликаем по ней. В открывшемся окне, находим строку: Режим редактора и в выпадающем списка, выбираем «Расширенный»
Если Вы собираетесь добавлять материалы с мобильных устройств, дополнительно вклюем «Мобильную версию». Далее мы спускаемся ниже и проверяем корректность настроек языка. Они должны выглядеть вот так:
На этой вкладке все. Переходим на следующую вкладку: Дополнительные параметры
Здесь мы настраиваем размеры самого редактора и права для пользователей. После этого нажимаем кнопку «Сохранить и закрыть». Снова переходим на вкладку создание материалов и обновляем страницу. Функционал нашего редактора заметно расширился.
Теперь, что бы не загромождать панель инструментов редактора лишними кнопками, часть их можно отключить.
Для этого мы снова переходим в менджер плагинов.
Далее нажимаем: Инструменты поиска в выпадающем списке выбираем: editors-xtd и снимаем с публикации не нужные нам кнопки. Любые кнопки Вы снова можете подключить, проделав все действия в обратном порядке. Все, редактор tinymce для joomla 3 у нас настроен!