Проблема работы с текстовыми редакторами заключается в том, что при простом копировании переносится не только текст, но и форматирование, которое в большинстве случаев является избыточным.
Например, если скопировать предыдущие два абзаца данной статьи (они создавались в Open Office), вставить их в визуальный редактор и просмотреть HTML код, мы увидим примерно следующее:
Обратите внимание на верхнюю часть кода. Мы видим, что здесь формируется стиль абзацев и заголовков первого уровня. Присваиваются свои шрифты, которые, скорее всего, будут отличаться от тех, что прописаны в шаблоне вашего сайта.
Далее опускаем глаза вниз и видим, что заголовку первого уровня зачем-то присвоен класс «western». Никакой полезной функции этот класс не несет и по сути выполняет роль мусора в коде.
Затем мы посмотрим на стили абзацев. Каждому из них присвоено абсолютно бесполезное правило. Таким образом , мы вместо двух абзацев текста получаем дополнительно почти такое же количество кода, который нам совсем-совсем не нужен, а во многих случаях даже вреден.
Нередко при копировании из Word в визуальный редактор вставляются просто километровые куски лишнего кода. Причем сам материал может включать 2-3 абзаца текста, зато общий размер HTML кода страницы будет достигать просто фантастических размеров.
Далее на рисунке я показал фрагмент такого кода.
Как избегать подобного в будущем?
Очень просто. Использовать в визуальном редакторе кнопку «Вставить только текст» или «Вставить как обычный текст». Ниже на рисунке показано расположение этой кнопки в визуальном редакторе JCE
В остальных визуальных редакторах проблем с поиском этой кнопки не возникает.
Вставленный через эту кнопку текст после ввода будет лишен какого либо форматирования. Однако, вместе с тем он будет лишен и бесполезных, лишних вредных тегов.
Далее нам остается разметить текст таким образом, чтобы заголовки стали заголовками, курсив курсивом и т. д.
Избыточное форматирование текста или как убрать лишние теги
При форматировании материала, в силу отсутствия опыта, многие совершают одни и те же ошибки. Рассмотрим фрагмент кода.
Если сайт с фронтальной части, то мы увидим всего то две надписи и пару картинок. Зато при просмотре исходного кода страницы обнаруживается два килограмма HTML тегов.
Причем повторяющихся HTML тегов.
Те, кто знаком с CSS, знают о том, что такое классы. Говоря простым языком, это набор правил форматирования, который потом можно использовать многократно. Не мудрствуя, создадим класс на основе повторяющегося кода, который мы видим. Класс назовем, допустим, «textform». Вот так он будет выглядеть:
Теперь вставим сие в файл с CSS нашего шаблона. Далее изменим код абзаца статьи. Там где было много кода, теперь мы подключим класс. И будет выглядеть все гораздо пристойнее:
Если мы посмотрим внимательнее на наш класс, да и на форматирование статьи, то увидим, что большинство тегов и правил вообще не нужны. Если их удалить, то фактически ничего не поменяется на странице.
Все, что требуется от владельца сайта или контент-менеджера, при добавлении материалов, после того или иного действия, открывать периодически статью в режиме редактирования HTML кода и поглядывать - а насколько корректно будет выглядеть исходный код страницы.
Возможность переключения в режим просмотра HTML кода есть в каждом визуальном редакторе. Например, в TinyMCE это кнопка HTML, в JoomlaCK кнопка SOURCE, а для JCE я сделал скриншот:
На этом хотелось бы завершить данную статью. Надеюсь, она помогла увидеть подводные камни при добавлении материалов на сайт под управлением Joomla.
C уважением, Владимир Егоров
