JCE - визуальный редактор для Joomla. Часть 2. Основные инструменты.

В предыдущей статье мы определились с тем, что создавать текст материала лучше в редакторе операционной системы компьютера. Это может быть, например, Word. Но при работе с сайтом есть специфические моменты, с которыми можно работать только в редакторе Joomla. В этой статье я расскажу про основные инструменты JCE по работе с текстом, изображениями и  кодом.

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

JCE. Инструменты для работы с текстом

Начнем с инструментов для работы с текстом. Предполагается, что исходный текст у нас уже готов и написан в Word’e. Прежде всего нужно запомнить, что простым копированием переносить текст из Word’a в JCE нельзя! Это связанно с тем, что Word вносит в текст собственное, уникальное форматирование, которое, при простом копировании в JCE, вызовет хаос. Так как же тогда переносить текст? С этим вопросом мы подходим к первому инструменту JCE – «Вставка текста».

В редакторе этот инструмент выглядит следующим образом:

При клике по кнопке выпадает подменю, содержащие две опции:

• Paste – используется для вставки текста из Word’а и других редакторов. Вид редактора определяется автоматически. (В предыдущих версиях JCE кнопок вставки текста было несколько – для каждого из распространенных редакторов).
• Paste as plain text – вставка в виде плоского текста. При использовании этой опции все символы форматирования будут удалены при вставке, т.е. получится просто сплошной текст, что-то вроде вставки в блокнот.

После выбора опции откроется окно, как на рисунке:

В это окно мы вставляем наш текст из Word’а и жмем кнопку «Insert».

После этого текст с максимальным сохранением форматирования будет вставлен в JCE.

Следующим важным инструментом является выпадающий список с текстом «Paragraph»:

Важен он потому, что позволяет обрамлять нужные части текста нужными тэгами. Это, как считается, важно для SEO-оптимизации сайта. Из важных опций здесь:

• Paragraph – текст, к которому применена эта опция, обрамляется тегами <p></p>, что означает, что текст относится к текущему параграфу. Подобными тегами  автоматически обрамляются все параграфы текста, вставленного из Word.
• Div – текст, к которому применена эта опция, помещается в контейнер Div. Применений у этой опции много, но людям, не знакомым с html и css, можно не обращать на нее внимания.
• Heading – текст, к которому применена эта опция, обрамляется тегами h1, h2, h3 и.т.д. Это означает, что данный текст является заголовком. Для поисковой оптимизации текста, все его заголовки и подзаголовки рекомендуют помещать в теги h.

Последним, крайне важным инструментом, являются таблицы. К счастью, JCE текущей версии уже умеет переносить таблицы из word’а автоматически, создавая при этом весь необходимый код. Функция эта, по истине замечательная. Кто уже имеет опыт работы с html-редакторами, прекрасно понимает почему. Для остальных расскажу. Раньше, когда этой функции не было, редактор не умел автоматически создавать таблицы и вместо них вставлялся просто текст ячеек. Т.е. для вставки таблицы приходилось создавать ее вручную, а затем заново заполнять данными. И хорошо, если таблица небольшая, но ведь она могла содержать и сотню строк. Тогда работа превращалась в ужас. Никому не хотелось создавать таблицы в html-редакторе вручную. При этом стали придумываться некоторые способы полуавтоматизации. Например, был способ с копированием таблицы из word’а в Excel с хитрым преобразованием ее в html-код. Сегодня, слава Богу, все эти хитрости уже не нужны. Процесс автоматизирован. Но иногда может быть удобно создать небольшую табличку прямо в html-редакторе, так что ниже рассмотрим инструмент для создания таблиц.

Создать таблицу можно с помощью кнопки «Inserts a new table»:

При клике по ней открывается следующее окно:

Здесь мы можем установить следующие опции таблицы:

Вкладка «General»:

• Cols – количество столбцов таблицы
• Rows – количество строк таблицы

Стоит заметить, что таблицу в html можно строить только однотипную. Т.е. количество ячеек в каждой строке будет одинаково. Если вам нужно, чтобы в первой строке было, например, 2 ячейки, а во второй – 3, то сначала нужно создать таблицу 2х2, а потом, во второй строке, в одну из ячеек вставить таблицу 1х2(1 строка, 2 столбца). Не очень удобно, но ничего не поделать. Таков язык html для таблиц.

• Cellpadding – расстояние от границы ячейки до ее содержимого
• Cellspacing – расстояние между ячейками таблицы

Опции Cellpadding и Cellspacing для таблиц аналогичны опциям margin и padding для div’ов.

• Alignment –  определяет выравнивание содержимого таблицы(по левому краю, по центру, по правому краю)
• Border – ширина рамки таблицы
• Width – ширина таблицы
• Height – высота таблицы
• Class – CSS-класс, применяемый к таблице
• Table caption – место для заголовка таблицы. Если галочка установлена, над таблицей будет создана дополнительная строка, состоящая из одной ячейки, в которой предполагается размещение заголовка таблицы

Вкладка «Advanced» (в этой вкладке все опции не знакомы мне самому, поэтому опишу только основные):

• Id – уникальный идентификатор таблицы. Применяется в CSS;
• Style – CSS-стиль таблицы, заданный прямо в ее коде;
• Background image – изображение, которое будет использовано в качестве фона таблицы;
• Border color – цвет рамки таблицы;
• Background color – цвет фона таблицы.

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

JCE. Инструменты для работы с кодом

Первым, и самым главным инструментом для работы с кодом, который я очень люблю, является «Edit Code»:

При клике по этой кнопке открывается редактор html-кода с подсветкой:

Это крайне удобная штука, которая наглядно показывает структуру вашей страницы. Бывает, что у редактора происходит глюк и что-то отображается на сайте неправильно. В этом случае можно посмотреть html-код. Благодаря подсветке он читается легко и найти ошибку не составит труда. Это, конечно, относится лишь к тем, кто знаком с html и CSS.

Вторым инструментом, который, к сожалению, не входит в стандартный состав JCE, но многим будет крайне удобен, является JCE-плагин  «RJ_InsertCode». Данный плагин позволяет вставлять в статью пример кода, оформленного в соответствии с языком, на котором он написан. Например, выше можно видеть, как отображает код плагин «Edit Code». Он красиво подсвечен и структурирован. Чтобы просто так вставить такой код в статью(под словом «вставить» я сейчас понимаю код, как текст, т.е. вставка не для исполнения кода, а для его показа пользователям) потребуется много усилий для работы со стилями. Плагин  «RJ_InsertCode» применит все стили автоматически в соответствии с выбранным языком программирования(к которому относится код) и вставит его в красивом окошке с нумерацией строк. Выглядит это примерно так:

1
2
3
4
5
6
7
8
9
10
11
12
13

<table border="0">
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>

           <tr>
      <td></td>
      <td></td>
    </tr>
 </tbody>
</table>
<br />

Плагин распространяется бесплатно и доступен здесь.

JCE. Инструменты для работы с изображениями.

Теперь перейдем, наверное, к самой интересной для web-мастеров функции JCE – вставке изображений. Эта тема действительно волнует многих, а также вызывает наибольшее количество проблем при использовании редактора.

Начнем с того, что в отличие от Word’a, в JCE, как впрочем и в любой другой html-редактор, нельзя просто так вставить изображение. Перед вставкой оно должно быть загружено на сервер в одну из папок Joomla. Это правило. Если его нарушить, изображение не будет показано. Конечно, соединяться с сайтом по FTP каждый раз, когда нужно вставить на сайт картинку, крайне неудобно. К счастью в JCE есть возможность этого не делать. Рассмотрим ее ниже.

Вставка изображений в JCE вызывается кнопкой «Insert/Edit Image», либо кликом правой кнопкой мыши по месту вставки изображения и выбором «Insert/Edit Image»:

При клике открывается следующее окно:

Функции, представленные здесь, довольно удобны и значительно облегчают работу по вставке изображений.

Прежде всего изображения нужно загрузить на сервер и «разложить по полочкам». В нижней части окна мы видим некоторое подобие файлового менеджера, в котором содержится файловая структура и файлы папки «images\stories» Joomla. Для редактора изображений JCE эта папка является корневой, но можно выбрать и другую корневую папку, задав ее в настройках JCE (подробнее об этом будет рассказано в одной из следующих статей про JCE). Справа есть 3 кнопки:

Благодаря им мы можем создавать подпапки и загружать изображения на сайт без использования FTP.

Для загрузки изображений нажимаем кнопку «Загрузить», при этом открывается следующее окно:

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

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

За один раз можно вставить только одно изображение. Если необходимо вставить сразу несколько изображений, следующих друг за другом, возможно, удобнее будет вставить одно, а затем, перейдя в просмотр html-кода, скопировать его код, вставить его и изменить имена файлов.

Но вернемся к вставке одного изображения. Раньше, чтобы вставить изображение, приходилось прописывать путь к нему на сервере. Это отнимало много времени и часто возникали ошибки, приводящие к потере еще большего количества времени. С JCE ситуация кардинально изменилась. Теперь достаточно лишь кликнуть по изображению, которое необходимо вставить в файловом менеджере изображений, и путь к нему будет прописан автоматически:

Теперь рассмотрим остальные опции:

Вкладка «Изображение»:

• URL – путь к изображению. Заполняется автоматически при клике по файлу изображения;
• Alternate Text – альтернативный текст. Будет показан вместо изображения у пользователей, которые отключили изображения в браузере. Кроме того, считается, что этот текст положительно влияет на поисковую оптимизацию статьи;
• Dimensions – размер или разрешение изображения. Здесь вы можете задать размеры, которые будет иметь изображение в статье. Я советую вам выбрать для себя какую-то одну ширину всех изображений для сайта. Таким образом вы убьете сразу двух зайцев. Во-первых, вам не нужно будет беспокоится о том, что новое изображение может нарушить верстку сайта и вылезти за пределы экрана. Достаточно протестировать сайт с каким-то одним размером изображения, а в дальнейшем применять его ко всем новым, а во-вторых, когда все изображения одинаковой ширины, статьи выглядят гораздо аккуратнее. Кроме того, поставив галочку «Proportional» высота вашего изображения изменится автоматически, не нарушая его пропорции.
• Выравнивание – данную опцию лично я использую только тогда, когда требуется сделать обтекание изображения текстом. Как например картинка в самом начале статьи. Выравнивание изображения относительно страницы проще делать точно также, как и выравнивание текста – специальными кнопками редактора.
• Margin – отступ изображения от текста. Задается со всех четырех сторон. Если установлена галочка «Equal Values», достаточно задать только один отступ. Остальные три автоматически будут заполнены тем же самым значением.
• Граница – здесь определяется все, что связанно с границей изображения.

Вкладка «Rollover»(интересная вкладка, опции которой я хоть и понимаю как работают, но совершенно не представляю, для чего это может понадобиться):

Прежде всего, для активации нужно установить галочку в опции «Разрешить».

• Mouseover – путь к изображению, которое будет показано вместо текущего(выбранного во вкладке «Изображение»), при наведении на него курсора мыши.
• Mouseout – путь к изображению, которое будет показано при ВЫведении с него курсора мыши. Здесь нужно указывать путь первоначального изображения(выбранного во вкладке «Изображение»)

В обеих вышеописанных опциях пути можно указать автоматически, кликнув по файлам соответствующих изображений ниже.

Ну вот и все. С изображениями закончили. Как нет? Не закончили? Да, знаю, у всех остался еще один, самый главный вопрос. Как сделать, чтобы изображение плавно увеличивалось при клике по нему, как, например, в этой статье? Вопрос, действительно, хороший. И ответ будет дан. Даже несколько ответов. Но в следующей статье серии. Следите за обновлениями.