Создание, поддержка и раскрутка интернет сайтов

Основы работы с визуальным редактором в Joomla

Я решил написать эту статью, потому что, как у web-мастера, у меня разрывается сердце, когда я вижу мусорный (не оправданный) код на страницах сайтов.

Используемый по умолчанию визуальный редактор в joomla - TinyMCE. В нём есть много замечательных функций и опций, но я считаю, что лучший редактор для joomla - это JCE, поэтому статья будет применительна именно к визуальному редактору JCE. Хотя, конечно, есть множество различий между этими редакторами, но так же есть и множество сходств, так что статья может быть полезна и тем, у кого установлен TinyMCE.

Основные функции визуального редактора

Создание параграфа в визуальном редакторе.
Чтобы создать параграф, нужно просто начать писать текст и писать его до того момента, где предполагается закончить параграф. В конце параграфа просто нужно нажать клавишу ENTER. Это приведёт к тому, что весь предыдущий текст станет первый параграфом. Создать параграф таким образом можно в любом месте уже написанного текста, поставив курсор в нужное место и нажав ENTER.

Простой перенос строки в визуальном редакторе.
Перенос строки в визуальном редакторе осуществяется аналогично созданию параграфа, но при нажатии SHIFT + INTER. Так же можно перенести строку в любом месте текста, просто поставив в необходимое место уже написанного текста  курсор мыши и нажав SHIFT + INTER.

Выделение текста жирным, курсивом или подчеркиванием.
Выделение текста определённым начертанием осуществляется с помощью выделения области текста для форматирования. Для этого нужно поставить курсор в начало выделяемого текста, нажать левую кнопку мыши и протащить курсор на необходимое расстояние, не отпуская кнопки мыши. Потом нужно нажать соответствующию кнопку:

- Жирный текст

-  Наклонный текст

-  Подчеркнутый текст (не путать с ссылкой)

Создание списков в визуальном редакторе.
пример:

• первый пункт
• второй пункт
• третий пункт

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

Вставка текста в визуальный редактор Joomla из текстового редактора WORD.
Если в визуальный редактор вставить текст скопированный из WORD (или другого текстового редактора) напрямую, то визуальный редактор передаст форматирование из текста используемого WORD. Это приведёт к тому, что при сохранении текст на лицевой стороне сайта будет выглядеть не соответственно стилю сайта. Кроме того в html-коде сайта появится много лишнего - это будет мешать его индексации поисковыми стемами и увеличивать время загрузки страницы.

Для качественной вставки текста скопированного из WORD нужно использовать специальную кнопку визуального редактора - , для этого нужно поставить курсор в нужное место, нажать на эту кнопку, перейти к окну WORD, скопировать текст в нём, перейти обратно к визуальному редактору и вставить текст в специальное окошко, открывшееся после нажатия на эту . Далее нужно нажать на кнопку "вставить".

Создание ссылки в визуальном редакторе.
Часто появляется необходимость ссылки на другой ресурс или на другую страницу текущего сайта. Для этого нужно выделить текст, который будет ссылкой, и нажать на кнопку которая становится активной только в том случае если в редакторе присутствует выделенный текст. Откроется окошко, изображенное на картинке слева (картинка увеличивается). В окне будет присутствовать пункты:

URL - это адрес ссылки
Цель - определяет, каким образом открывать ссылку.

Остальные параметры не являются обязательными. После определения URL и Цели нужно нажать кнопку "вставить".

Вставка картинки в визуальном редакторе.
Для вставки картинки в визуальном редакторе нужно поставить курсор в то место редактора, куда нужно добавить картинку и нажать на кнопку , после чего откроется окошко, отображенное на первой картинке слева. В этом окошке нужно выбрать кнопку (загрузить), появится ещё одно окошко, указанное на второй картинке слева. При нажатии на кнопку "Add" этого маленького окошка появится ещё одно окошко, с помощью которого Вы сможете выбрать картинку на своём компьютере. После выбора картинки нужно нажать на кнопку "загрузить" и далее на кнопку отмена (чтобы закрыть маленькое окошко). После этого нужно нажать на название изображения, оно выделится жирным шрифтом и в поле URL появится путь к изображению на сервере. Далее нужно выбрать выравнивание изображения в пункте "Выравнивание", пример выравнивания будет показан в этом окошке справа. В итоге окошко приобретёт вид приблизительно похожий на картинку справа. И наконец, можно нажать кнопку "вставить".

Нужно отметить, что вставка изображения и ссылки в визуальном редакторе TinyMCE сильно отличается от того что написано в этой статье, поскольку эта статья написана на примере визуального редактора JCE, который я использую в своих работах.

Другие полезные функции.

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

- раскрытие визуального редактора на всю ширину и высоту окна браузера. Полезно, когда статья имеет большие размеры.

Это основные функции, которые используются при форматировании текста, далее Вы сможете разобраться самостоятельно. Я не рекомендую изменять виды и размеры шрифта, так как это делает внешний вид сайта замусоренным и не профессиональным. Если есть какие либо вопросы, Вы можете задать их в комменатариях или в разделе Вопрос/ответ.