Поводом написания данной статьи послужил тот факт, что несмотря на всю мощность и user-дружелюбность html-редакторы TinyMCE, JCE так и не имеют в своем составе таких важных опций, как создание красной строки (text-indent) и междустрочного интервала (line-height). В этих редакторах присутствует множество интересных кнопок, они красиво оформлены. Как показала практика, из всего этого множества может использоваться шрифт, выравнивание, вставить картинку, гиперссылку, таблицу.
Преимущества использования простого текстового редактора:
- Область редактора гораздо шире за счет отсутствия панелей с кнопками.
- Большая гибкость и оптимальность в форматировании содержимого статьи
- Ожидаемое форматирование = реальность.
- Страница получается несколько легче, меньше избыточного кода. Загружается быстрее.
- Возможно задать такое форматирование по умолчанию, которое, даже будучи очень сложным, само по себе делается быстрее (сразу копируется готовая таблица стилей в начало текста и все), чем задание отдельно размера текста, его гарнитуры, жирности, отступа и прочее. Более того, определенных таким образом параметров форматирования, как правило, достаточно для всей статьи - настроил и забыл. Некоторое форматирование html-редакторы TinyMCE и JCE просто не поддерживают - нет такого функционала.
Недостатки использования простого текстового редактора:
- Иногда требуется вставка определенных символов, которые будучи введенными так как есть интерпретируются браузером как служебные и игнорируются при отображении или их отображение не такое, как ожидалось - так называемые Специальные символы HTML. У них есть специальный html-код и десятичный код. Чтобы эти специальные символы вставлялись так как они отображаются в исходном коде страницы они должны быть определении их соответствующим html-кодом. В этом случае их нужно вставлять вручную или использовать специальные преобразования
Было потрачено около двух суток, чтобы создать в панели кнопок TinyMCE, JCE кнопку "красная строка", "междустрочный интервал". Был сделан вывод, что необходимо времени раз в 10 больше, чтобы разобраться в коде Joomla, коде этих html-редакторов. Эта затея была отложена.
Принято решение использовать встроенный в Joomla текстовый редактор. Он отличается от html-редактора тем, что последний работает с текстом аналогично MS Word - все теги скрыты и редактор их расставляет сам, редактирование само по себе осуществляется налету: изменения тут же становятся видны. В текстовом редакторе все теги форматирования расставляются вручную, изменения можно увидеть только сохранив содержимое веб-страницы и перезагрузив браузер.
Для того, чтобы начать использовать встроенный текстовый редактор нужно перейти в "Система" -> "Общие настройки" -> слева выбрать "Общие настройки" -> справа выбрать вкладку "Сайт". В поле "Редактор по умолчанию" выбрать "Редактор - Без редактора". Затем перейти в "Система" -> "Общие настройки" -> слева выбрать "Общие настройки" -> справа выбрать вкладку "Фильтры текста". Выбрать пользователя, который используется для создания, модификации, удаления статей. Назначить ему тип фильтра "Белый список". В поле "Фильтр тегов" указать тег "style".
В общем-то готово. Далее речь пойдет о некоторых тегах форматирования содержимого страницы гипертекстовой разметкой, а также о стилях. Содержимое статьи Joomla помещает в специальный контейнер, он имеет имя div. Форматирование в веб-странице определяется специфичной гипертекстовой разметкой и, дополнительно, таблицами стилей, которые расширяют предопределенные для разметки результаты форматирования. Дополнительное форматирование можно задать как в атрибуте тега, так и отдельной таблицей стилей, которая будет размещена в начале текста веб-страницы. Причем, в таблице стилей можно переопределить параметры форматирования содержимого в теге-контейнере и эти параметры будут также применены ко всему содержимому, которое будет заключено в тег-контейнер с таким же именем - задать значения по умолчанию для всего текста статьи. Несмотря на то, что теги проставляются вручную, они сами по себе не будут перегружать своим видом набираемый текст. Если необходимо переопределить форматирование какого либо тег, для которого задано форматирование по умолчанию в таблице стилей в самом начале текста статьи, данному тегу можно назначить атрибут class или id и в таблице стилей в самом начале определить параметры, которые будут относиться как данному тегу, который будет иметь соответствующее значение атрибута class или id или можно задать атрибутом style непосредственно в самом теге (это менее гибко, немного перегрузит текст).
Здесь, все же, есть одна особенность - применение стилей. Без дополнительных манипуляций указанные стили могут переопределить стили, заданные по умолчанию, так как заданы в конце (вне тега head). И некоторые элементы интерфейса могут отображаться неверно. Тем не менее, в css есть механизм, который позволяет определять стили только внутри этого конкретного контейнерного тега. Таким образом и отформатирована данная статья.
Самые частые теги гипертекстовой разметки, которые используются для обычного форматирования это: b , i, u, strong, style, pre, p, br, ul, ol, li, img, a, dl, dd, marquee, q, cite, h1-h6. Все эти теги кроме br, img являются контейнерными.
Сложного ничего нет. Разобраться, как ведут себя теги разметки, какое форматирование они дают время недолгое. Можно воспользоваться сторонним html-редактором (например, brackets, notepad++, notepadqq) для верстки, а готовый текст вставлять и сохранять. Html-редактор подобный brackets при вводе первой скобки выдает подсказки варианты имен тегов, тем самым упрощает и ускоряет работу. К сожалению brackets не поддерживает русскоязычную проверку орфографии, поэтому ее нужно проверять непосредственно после вставки текста из brackets
В итоге получился следующий начальный сниппет:
<style type="text/css">
div#myarticle p {
font-size: 10pt;
text-indent: 18pt;
line-height: 18pt;
text-align:justify;
}
div#myarticle ul{
font-size: 10pt;
line-height: 18pt;
text-align:justify;
}
div#myarticle ol{
font-size: 10pt;
line-height: 18pt;
text-align:justify;
}
div#myarticle li {
font-size: 10pt;
line-height: 18pt;
text-align:justify;
}
div#myarticle img {
text-align: center;
}
</style>
<div id="myarticle">
<p>Сюда помещается содержимое статьи</p>
</div>
Этот сниппет вставляется в поле редактирования текстового редактора "Без редактора" при создании новой статьи перед внесением материала. Сам материал вносится в контейнерный тег div с идентификатором "myarticle". В контейнерном теге style определена таблица стилей форматирования для содержимого в контейнерном теге div с идентификатором myarticle. При определении параметров форматирования в этой таблице очень важна конструкция вида div#myarticle p{стили форматирования}. Данная конструкция определяет стиль форматирования содержимого в контейнерном теге р, который находится внутри контейнерного тега div, имеющего идентификатор myarticle. Эта конструкция позволяет изолировать форматирование нашей статьи границами тега div id="myarticle" и не влиять, переопределять форматирование остальных элементов страницы иначе это исказит ее.
Внутри тега div id="myarticle" тегам можно присваивать атрибуты class и id. Конструкция будет выглядеть следующим образом: div#myarticle p.className{}, div#myarticle p#identificator{} и div#myarticle p.className#identificator {}.
Практика показала, что данный способ имеет один недостаток. В общем списке статей возможны конфликты и было принято решение перенести стили в единую таблицу стилей для сайта в шаблоне. Как создать и подключить свою таблицу стилей хорошо описано здесь.