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

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

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

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

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

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

Основные инструменты JCE.

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

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

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

Основные инструменты JCE.

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

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

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

Основные инструменты JCE.

 

Важен он потому, что позволяет обрамлять нужные части текста нужными тэгами. Это, как считается, важно для 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»:

Основные инструменты JCE.

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

Основные инструменты JCE.

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

Вкладка «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»:

Основные инструменты JCE.

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

Основные инструменты JCE.

Это крайне удобная штука, которая наглядно показывает структуру вашей страницы. Бывает, что у редактора происходит глюк и что-то отображается на сайте неправильно. В этом случае можно посмотреть 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»:

Основные инструменты JCE.

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

Основные инструменты JCE.

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

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

Основные инструменты JCE.

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

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

Основные инструменты JCE.

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

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

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

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

Основные инструменты JCE.

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

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

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

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

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

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

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

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

4.551724137931 1 1 1 1 1 4.55

Комментарии  

0 # подзаголовкиviktoryar 21.03.2015 04:24
Когда размечаю текст на заголовки и подзаголовки, то ниже подзаголовка с тегом h2 появляется горизонтальная линия и никак ее не могу убрать. Подскажите, в чем дело?
Ответить | Ответить с цитатой | Цитировать
0 # RE: подзаголовкиWedal 23.03.2015 04:35
viktoryar, скорее всего в CSS-стилях применяется стиль к заголовку H2. Найти и удалить его можно через web-инспектор. Подробности в этой статье:
http://wedal.ru/internet/rukovodstvo-po-firebug.html
Ответить | Ответить с цитатой | Цитировать
0 # RE: JCE - визуальный редактор для Joomla. Часть 2. Основные инструменты.Татьяна 20.08.2012 09:47
например ссылку подробнее, и к ней прикрепить документ word
Ответить | Ответить с цитатой | Цитировать
0 # RE: JCE - визуальный редактор для Joomla. Часть 2. Основные инструменты.Wedal 21.08.2012 03:11
Татьяна, как вариант, закачать(загрузить файл на хостинг), а затем просто вставить ссылку через редактор и указать в ней путь к файлу.
Ответить | Ответить с цитатой | Цитировать
0 # icqКатя 26.11.2012 08:47
подскажите пожалуйста как поместить на сайт icq
Ответить | Ответить с цитатой | Цитировать
0 # помогитеТатьяна 10.08.2012 07:06
подскажите пожалуйста как вставить ссылку на главную страничку сайта
Ответить | Ответить с цитатой | Цитировать
0 # RE: помогитеWedal 13.08.2012 04:50
Татьяна, вставить КУДА?
Ответить | Ответить с цитатой | Цитировать
0 # RE: помогитеТатьяна 20.08.2012 09:48
на документ word
Ответить | Ответить с цитатой | Цитировать
0 # ParagraphBright 19.05.2012 19:07
Цитата:
Paragraph – текст, к которому применена эта опция, обрамляется тегами , что означает, что текст относится к текущему параграфу. Подобными тегами автоматически обрамляются все параграфы текста, вставленного из Word.
Что имеется ввиду под словом "параграф"?
Вся страница или смысловые куски с подзаголовками (или без оных)?
А может абзац?
Ответить | Ответить с цитатой | Цитировать
0 # RE: ParagraphWedal 21.05.2012 03:56
Bright, да, это абзац.
Ответить | Ответить с цитатой | Цитировать
+1 # Вопрос по Edit CodeДмитрий1 26.10.2011 11:02
Прежде всего хочу поблагодарить за очень ценный ресурс, читаю вас регулярно, и нашел очень много полезной информации.
Вопрос такой, при вставке кода посредством Edit Code, редактор меняет код и он соответственно не работает. Это можно обойти выставив в настройках Джумлы No editor, но дело в том, что если снова открыть этот файл в JCE, он его все равно поменяет. Если нужно просто создать материал это не так критично, но когда материал необходимо регулярно обновлять, то каждый раз менять редактор совсем неудобно. Посоветуйте пожалуйста, что можно сделать в такой ситуации.
Спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Вопрос по Edit CodeАлександр+ 26.10.2011 11:47
Цитирую Дмитрий1:
Прежде всего хочу поблагодарить за очень ценный ресурс, читаю вас регулярно, и нашел очень много полезной информации.
Вопрос такой, при вставке кода посредством Edit Code, редактор меняет код и он соответственно не работает. Это можно обойти выставив в настройках Джумлы No editor, но дело в том, что если снова открыть этот файл в JCE, он его все равно поменяет. Если нужно просто создать материал это не так критично, но когда материал необходимо регулярно обновлять, то каждый раз менять редактор совсем неудобно. Посоветуйте пожалуйста, что можно сделать в такой ситуации.
Спасибо.
Я для этого пользуюсь ndeditorswitch, в админке вверху появляется переключатель редакторов.
Ответить | Ответить с цитатой | Цитировать
0 # DIVАлександр+ 25.10.2011 14:34
В JCE есть функция выбора стиля текста, т.е. если в css шаблона есть описания класов типа .blabla то в JCE можно выбрать этот .blabla в выпадающем списке. Но было просто супер, если это можно было бы делать с DIV. Т.е. что-бы он видел имена DIV в CSS шаблона. B и можно было бы заключать в выбранный DIV кусок выделенного текста... Вот сейчас ищу как это реализовать, если кто знает, отзовитесь плз :D
Ответить | Ответить с цитатой | Цитировать
0 # выделение h1Марина 06.05.2011 11:00
Подскажите почему выделяя в сплошном тексте одну фразу и присваивая ей выделение h1 выделяется весь абзац - весь текст как h1??? как выделить заголовком h1 только одно слово во всем тексте?
Ответить | Ответить с цитатой | Цитировать
+1 # RE: JCE - визуальный редактор для Joomla. Часть 2. Основные инструменты.Pega 09.01.2011 13:56
Если статья большая, я ее делаю в Dreamweaver`е, оформляю как надо и полученный html код вставляю через кнопку Edit Code в JCE. И код красивый и проблем нет :-)
Ответить | Ответить с цитатой | Цитировать
0 # Вопрос по таблицам!?euGene 04.01.2011 15:28
Что хочу сделать: разместить контент на странице в две колокни.
Что делаю: создаю таблицу с двумя колонками и 1 строкой. Заполняю левую и правую колонки текстом, делаю выравнивание по центру, верхнему краю.
Что получаю: Левая колонка шире на 100+ пикселей чем правая, что в корне не устраивает меня.
Посоветуйте каким образом я могу решить этот вопрос в ОСУ либо любым другим способом. Спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # Решение на первое время..euGene 04.01.2011 15:58
При создании в правой коленке (та которая меньше) нового абзаца и вписыванием в него текста без употребление enter (новый абзац) колонка автоматически увеличивается забирая, соответственно место с правой колонки. Нужно быть внимательным так как можно перебрать малехо.
Вопрос остается актуальным, так как это, на самом деле, не техническое решение, а выход из положения..
Ответить | Ответить с цитатой | Цитировать
0 # RE: Решение на первое время..Wedal 05.01.2011 07:38
euGene, просто пропишите для ваших колонок ширину по 50%. Это можно сделать через редактор в свойствах ячейки таблицы, либо в html-коде, примерно так:
table
tbody
tr
td style="width:50%"
/td
td style="width:50%"
/td
/tr
/tbody
/table
Ответить | Ответить с цитатой | Цитировать
0 # Вставка текста из ВордаЛинда 01.01.2011 14:04
Цитата:
Линда, возможно в последней версии JCE процедуру вставки еще более упростили. Т.е. все, что нужно определяется и применяется автоматически.
Ок! Теперь понятно.

Цитата:
Линда, как избавиться от лишних энтеров подскажут самоучители по ворду(есть там кнопочка, при нажатии которой все энтеры отображаются символами). Перенос строк должен происходить автоматически.
Про кнопочку – я знаю:) А если нужно перенести строку (например, в диалоге), как правильно сделать форматирование для сайта?
Поздравляю с Новым Годом!!! Большое спасибо за ответы!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Вставка текста из ВордаWedal 03.01.2011 07:54
Линда, с диалогом даже и не знаю. Никогда не задумывался об этом.
Ответить | Ответить с цитатой | Цитировать
0 # Вставка текста из ВордаЛинда 29.12.2010 16:11
Забыла еще раз спросить. А почему у меня не выходит окно при выборе Paste через стрелочку. Текст просто вставляется в редактор. Пробовала в различных браузерах, тоже самое - окна нет. :cry:
Ответить | Ответить с цитатой | Цитировать
0 # RE: Вставка текста из ВордаWedal 30.12.2010 06:00
Линда, возможно в последней версии JCE процедуру вставки еще более упростили. Т.е. все, что нужно определяется и применяется автоматически.
Ответить | Ответить с цитатой | Цитировать
0 # Вставка текста из ВордаЛинда 29.12.2010 16:08
Большое спасибо!!!
Через стрелочку и делала, то же самое получалось. Это точно из-за Ентера! Теперь понятно!
А тогда вопрос – как правильно оформлять текст, чтобы предложение начиналось с новой строки без ентера? И как правильно избавляться от лишних ентеров?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Вставка текста из ВордаWedal 30.12.2010 05:59
Линда, как избавиться от лишних энтеров подскажут самоучители по ворду(есть там кнопочка, при нажатии которой все энтеры отображаются символами). Перенос строк должен происходить автоматически.
Ответить | Ответить с цитатой | Цитировать
0 # Вставка текста из ВордаЛинда 27.12.2010 18:46
Подскажите, пожалуйста! У Вас в статье написано: "...После выбора опции откроется окно, как на рисунке..." У меня при нажатии на "Paste" не открывается окно, а скопированный текст из буфера сразу вставляется в поле редактора. И каждая вордовская строчка с "Ентером" на конце, оформляется в отдельный параграф - получаются прогалы. Что делать! Почему так получается?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Вставка текста из ВордаWedal 28.12.2010 05:21
Линда, жмите не на кнопку, а на стрелочку справа. А вообще, проблема не в том, что JCE неправильно вставляет ваш текст, а в том, что этот текст неправильно оформлен в Ворде.
По ГОСТу принято, что "Enter" после текста означает окончание абзаца. Текст самого абзаца не переносится энтерами, а пишется сплошняком. Ворд сам переносит строки.

Чтобы при вставке все выводилось правильно, удалите в ворде все лишние ентеры.
Ответить | Ответить с цитатой | Цитировать
0 # Приветствую!euGene 26.12.2010 12:41
Спасибо за подробное и приятное описание! Я начинающий вебер и для меня это была по истине находка!
Ответить | Ответить с цитатой | Цитировать
-1 # RE: JCE - визуальный редактор для Joomla. Часть 2. Основные инструменты.Ветал 07.12.2010 15:22
прикольно... столько приятных мелочей даже не использовал (не знал) что так млжно.
Wedal, скажите как Вы побороли версию 1.5.7.6 (и выше) очень уж много глюков при установке (лично я откатился назад на 1.5.6
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: JCE - визуальный редактор для Joomla. Часть 2. Основные инструменты.Wedal 08.12.2010 04:28
Ветал, при написании статьи у меня стояла версия 1.5.7.5. При ее установке глюков не было, за исключением одного предупреждения относительно файла template.css кажется.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх