Free login module joomla

JCE - визуальный редактор для Joomla. Подробное руководство.

редактор JCEВизуальный редактор JCE (Joomla Content Editor) обладает широким функционалом благодаря которому Вы сможете легко добавлять и редактировать материалы сайта, изменять их стилевое оформление, при этом не обладая знаниями в CSS, HTML и PHP.  Знание и умение работать со всеми инструментами редактора JCE существенно упростит Вашу работу, позволит создавать эстетично оформленный текст с гармонично расположенными изображениями, ссылками, таблицами, загружать и настраивать медиа-файлы разных типов и т.д.

После того, как вы скачали, установили и настроили на своём сайте визуальный редактор JCE , войдите в административную панель и нажмите кнопку "Создать материал". Перед вами откроется панель инструментов  редактора JCE.  

панель инструментов  редактора JCE

Большинство кнопок редактора JCE весьма схожи с инструментами популярных редакторов текста и являются интуитивно понятными.
И так, давайте рассмотрим основные инструменты визуального редактора.
Справка - диалоговое окно редактора: Справка.
очистка окна редактора - очищает окно редактора для создания нового документа.
отменить последнее действие - отменить последнее действие (CTRL+Z).
вернуть последнее действие - вернуть последнее действие (CTRL+Y).
жирный шрифт - применить или удалить жирный шрифт к выделенному тексту.
курсив - применить или удалить курсив к выделенному тексту.
подчеркивание - применить или удалить подчеркивание к выделенному тексту.
зачеркиваие - применить или удалить зачеркиваие выделенного текста.
Выравнивание - Выравнивание выделенного текста или элементов по всей ширине, по центру, по левому краю и по правому краю соответственно.
блок цитаты- вставка и удаление блока цитаты.
формат блока - применить формат блока к выделенному тексту или элементу.
На этом инструменте редактора следует остановиться более подробно.
Этот инструмент позволяет обрамлять выделенный текст нужными тэгами, что является важным для SEO-оптимизации сайта. Из важных опций здесь:

  • Параграф – обрамление выделенного текста тегами <p></p>, что означает - текст относится к текущему параграфу. Тегами  <p></p> автоматически обрамляются все параграфы текста, вставленного из редактора Word.
  • Блочный элемент (Div) – блочный элемент html страницы, который предназначен для управления размещением и придания самых разнообразных свойств текстам, изображениям, ссылкам и др объектам.
  • Адрес - тег <address> предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и др. Поисковые системы анализируют содержимое этого тега для сбора информации об авторе сайта. По умолчанию текст внутри контейнера <address> отображается курсивом. Если эта особенность вам не требуется, то используйте стили для изменения начертания шрифта.
  • Форматированный - тег <pre> определяет предварительно отформатированный текст. Текст в элементе <pre>   обычно отображается шрифтом с фиксированной шириной, а также он сохраняет пробелы и переносы строк.
  • Заголовок – текст, к которому применена эта опция, обрамляется тегами h1, h2, h3 и.т.д. Теги h1-h6 сочетают в себе как функции оформления, так и функции оптимизации. С точки зрения оптимизации, заголовки h1-h6 – это теги акцентирования, задача которых обратить внимание поискового робота на наиболее важные с точки зрения определения тематики и темы участки текста и отдельные слова.
  • Код - тег <code> предназначен для отображения одной или нескольких строк текста, представляюего собой программный код. Сюда относятся переменные, ключевые слова, тексты функции и др. Браузеры, как правило, отображают содержимое контейнера <code> как моноширинный текст уменьшенного размера.
  • Пример кода - текст, к которому применена эта опция, обрамляется тегами <samp> . Тег <samp>  используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <samp> в виде моноширинного шрифта. С помощью стилей вы можете задать свое собственное оформление.
  • Строчный элемент (SPAN) – обрамление текста тегами <span> . Тег предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <div>, <p> или <table>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой собственный стиль.
  • Термин Определения – обрамление текста тегами <dt>. Тег <dt> входит в тройку элементов <dl>, <dt> , <dd>, предназначенных для создания списка определений. Каждый такой список помещается в контейнер <dl> </dl> , куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.
  • Описание Определения – обрамление текста тегами <dd> .  Тег <dd> входит в тройку элементов <dl>, <dt>,<dd> , предназначенных для создания списка определений. Каждый такой список помещается в контейнер <dl> </dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.

выбор стилей из CSS - выбор стилей из CSS текущего шаблона.Очень важный инструмент. Подробнее...
очистить стиль форматирования - очистить стиль форматирования выделенного текста или элемента.
очистить от HTML-кода - очистить выделенный текст от HTML-кода.
выбор шрифта – выбор шрифта для выделенного текста.
выбор размера шрифта - выбор размера шрифта для выделенного текста.
изменение цвета текста - изменение цвета текста и цвета фона для выделенного текста.
вырезание выделенного текста - вырезание выделенного текста (кнопка работает не во всех браузерах). Используйте вместо неё сочетание клавиш CTRL+X.
копирование текста - копирование текста в буфер обмена (работает не во всех браузерах). Используйте вместо неё сочетание клавиш CTRL+С.
вставка текста – используется для вставки текста из редактора Word и других текстовых редакторов. Вид редактора определяется автоматически. После выбора опции откроется окно.

окно для вставки текста

В это окно нужно вставить (Ctrl+V) текст из редактора Word или любого другого редактора в котором сохранен материал, и нажать кнопку "Вставить".
После этого текст с максимальным сохранением стилей форматирования будет вставлен в текстовое поле JCE.
вставка текста - используется для вставки текста с одновременной очисткой его от стилей форматирования. При использовании этой опции получится просто сплошной текст, что-то вроде вставки из блокнота. При нажатии на кнопку откроется окно с надписью "Вставить как обычный текст".
увеличить/уменьшить отступ – увеличить/уменьшить отступ выделенного текста или элемента от левого края страницы.
упорядоченный списк - создание упорядоченного списка (из выпадающего списка можно выбрать цифры, строчные или заглавные буквы и т.д.).
маркированный список - создать маркированный список (круг, диск, квадрат).
нижний или верхний индекс - установка текста в нижнем или верхнем индексе.
изменение регистра - изменение регистра выделенного текста (заглавные, строчные, каждое предложение с заглавной, горбатый регистр).
специальный символ - выберите специальный символ из выпадающего окна с символами. При наведении курсора на символ в правой части окна появляется "превью" символа, его HTML-Code и NUM-Code.
вставить горизонтальную линию - вставить горизонтальную линию.
направленность текста - направленность отмеченного текста или элементов: слева-направо или справа-налево соответственно.
развернуть размер редактора - развернуть размер редактора во весь экран.
просмотр редактируемого материала - просмотр редактируемого материала.
редактор html-кода - окно для вставки и редактирования кода. При клике по этой кнопке открывается редактор html-кода с подсветкой:

редактор html-кода

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

Работа с таблицами – работа с таблицами. Подробнее...

скрыть направляющие – показать или скрыть направляющие (неотображаемые элементы на странице сайта).
отображение невидимых символов – вкл/выкл отображение невидимых символов (форматирование, пробелы и т.п.).
блочные элементы – показать или скрыть блочные элементы. При включении опции блоки с текстом и элементами будут выделены штрих-пунктирной линией для удобства работы с контентом.
неразрывный пробел – вставить неразрывный пробел (абривеатура &nbsp).
изменение стиля текста - изменение стиля выбранного текста.Многофункциональный инструмент.  Подробнее...
цитата -  помечает текст как цитату или сноску на другой материал. Выделение текста через тег <cite> удобно для изменения стиля контента через CSS, а также применяется для разделения HTML- кода на структурные элементы. Обычно браузеры устанавливают текст внутри контейнера <cite> курсивом. При клике по кнопке всплывает модальное окно.

цитата

  • Заголовок (title) - описание содержимого элемента в виде всплывающей подсказки.
  • id - указывает имя стилевого идентификатора.
  • Класс (class) - имя класса, которое позволяет связать тег со стилевым оформлением.
  • Стиль (style) - применяется для определения стиля элемента с помощью CSS.
  • Направление текста (dir) - задает направление и отображение текста ( слева направо или справа налево).
  • Язык (lang) - значение этого параметра используется браузером для правильного отображения некоторых национальных символов.

аббревиатура - указывает, что последовательность символов является аббревиатурой (тег <abbr>). При клике по кнопке всплывает модальное окно аналогичное вышерассмотренному. Заголовок (title) добавляет всплывающую подсказку в которой можно дать расшифровку аббревиатуры. Кроме того, поисковые системы индексируют полнотекстовый вариант аббревиатуры, что может быть применено для повышения рейтинга документа.
акроним - указывает на то, что текст является акронимом. От аббревиатуры отличается тем, что акроним это общепринятое сокращение и является самостоятельным словом. К акронимам можно отнести следующие слова: США, DOS, ЦУМ, ООН, ликбез и др.
По умолчанию текст, помещенный внутрь контейнера <acronym>, подчеркивается пунктирной линией. В модальном окне для акронима можно заполнить универсальные атрибуты точно такие же, как и для аббревиатуры.
перечеркнутый - используется для выделения текста, который был удален в новой версии документа. Текст в контейнере <del> обычно отображается браузерами как перечеркнутый. Подобное отображение позволяет отследить, какие в тексте документа изменения были сделаны. При клике по кнопке всплывает модальное окно

текст, который был удален в новой версии документа

  • Дата/Время (datetime) - дата и время редактирования текста.
  • Цитата (cite) - указывает ссылку на документ, в котором приведена причина редактирования текста и прочие подробности.

Все остальные атрибуты, изложенные в данном окне, уже нам знакомы.
вставка –  выделение текста, который был добавлен в новую версию документа. Текст в контейнере <ins> обычно помечается браузерами как подчеркнутый. Подобное форматирование позволяет отследить, какие в тексте документа были сделаны изменения. При клике по кнопке всплывает модальное окно с атрибутами как для кнопки "Удаление".
редактирование атрибутов - вставка и редактирование атрибутов. Атрибуты используются для определения поведения текста при наведении курсора, нажатии и т.п.
Выделенный фрагмент текста помещается в контейнер <span>. Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов <table>, <p> или <div>, используя тег <span> можно выделить фрагмент документа внутри других тегов и установить для фрагмента свой стиль. При клике по кнопке всплывает модальное окно.

Вкладка "Стандартные" содержит знакомые нам атрибуты.

редактирование атрибутов

Вкладка "События"

"События" (Events)

Во вкладке "События" (Events) назначаются события, которые будут происходить при наведении, нажатии и т.д. курсора на элемент.

Возможные значения:
onblur - потеря фокуса. Событие onBlur возникает при потере объектом фокуса при переходе по клику мыши или с помощью клавиатуры. Это обычно происходит, если щелкнуть мышкой на другой элемент текущего текста. Событие onblur противоположно событию onfocus.
onchange - изменение значения элемента формы. Событие onchange возникает, когда элемент управления формы меняет свое значение.
onclick - событие возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick.
ondblclick - двойной щелчок левой кнопкой мыши на элементе.
onfocus - получение элементом фокуса. К примеру, для текстового поля фокусом называется возможность вводить текст (мигающий курсор).
onkeydown - клавиша нажата, но не отпущена. Событие cрабатывает в момент нажатия клавиши, но когда она еще не отпущена.
onkeypress - клавиша нажата и отпущена. Событие срабатывает, когда клавиша на клавиатуре нажата и уже отпущена.
onkeyup - клавиша отпущена. Событие возникает в тот момент, когда нажатая клавиша отпускается.
onload - документ загружен. Событие указывает, что страница полностью загружена, включая содержание, картинки, CSS-файлы, а также внешние скрипты.
onmousedown - нажата левая кнопка мыши. Событие по действию напоминает onclick и отличается от него тем, что возникает в момент нажатия на кнопку мыши.
onmousemove - перемещение курсора мыши. Событие применяется для создания разных эффектов, связанных с курсором мыши, например: всплывающие подсказки.
onmouseout - курсор покидает элемент. Событие возникает при перемещении указателя мыши за границы объекта.
onmouseover - курсор наводится на элемент. Событие возникает при наведении курсора мыши на элемент.
onmouseup - левая кнопка мыши отпущена. Событие возникает при отпускании нажатой левой кнопки мыши.
onreset - форма очищена. Событие возникает при очистке формы, происходящей при нажатии на кнопку типа Reset.
onselect - выделен текст в поле формы. Событие применяется в текстовых полях и происходит, когда выделяется текст с помощью мышки или клавиатуры.
onsubmit - форма отправлена. Событие возникает при отправке формы, это происходит, когда пользователь нажимает кнопку типа Submit, графическую кнопку (типа image).
onunload - закрытие окна. Событие срабатывает в том случае, когда страница не загрузилась по каким-либо причинам, либо при удалении страницы из окна или фрейма.


якорь – создание ссылки с анкором (якорем). Якорь - средство для создания ссылки к определенному месту на странице сайта. Например, Вам нужно указать не на саму статью, а на конкретный абзац в ней - для этого нужно установить якорь на этом абзаце.  Подробнее...
ссылка - кнопки "Удалить ссылку" и "Вставить / редактировать ссылку" соответственно.
Объектами ссылки (URL (Uniform Resource Locator) с английского единый указатель ресурсов) могут быть файлы, материалы, якоря или изображения внутри сайта, а также внешние адреса других сайтов в Интернете.  Подробнее...
вставить/изменить изображение - вставить/изменить изображение.Вставка изображений в JCE вызывается кнопкой "Вставить/изменить изображение", либо кликом правой кнопкой мыши по месту вставки изображения и выбором "Вставить/изменить изображение".Подробнее...
переключатель проверки орфографии - переключатель проверки орфографии. Проверка правописания, использующая сервисы (например Google Spell Checking).
Подробнее - вставить Подробнее. После вступительного текста идёт вставка "Читать далее (Подробнее)". Для удобства иконка "Подробнее" дублируется кнопкой "Подробнее", расположенной в нижней части редактора.
разбить материал на страницы - разбить материал на страницы. Предпочтительно не создавать материалы в одну страницу весом более 200Кб, это приводит к длительной загрузке страницы, а также усложняет навигацию по сайту.
Кликните по кнопке разбивки материала на страницы и перед вами откроется окно:

разбить материал на страницы

  • Название страницы - название страницы, создаваемой в результате разделения материала.
  • Псевдоним Содержания - название ссылки на страницу, отображаемой в мини- меню.

Помимо ссылки перехода по станицам, расположенной внизу каждой страницы (<<Назад - Вперед >>),  справа в верхней части первой страницы появится мини- меню, со списком ссылок на вторую и последующие страницы материала. Благодаря мини-меню можно легко переходить со страницы на страницу используя их названия (псевдоним), а выбор пункта "Все страницы" позволяет вывести весь материал на одну страницу. Для удобства иконка разбиения материала на страницы дублируется кнопкой "Разрыв страницы", расположенной в нижней части редактора.
вставить изображение- вставить/изменить изображение. Данная иконка появится в панели инструментов редактора после установки плагина Image Manager Extended, который существенно сэкономит Вам время и с его помощью Вы сможете: загружать изображения и изменять их размер при загрузке в менеджер изображений, создавать папки, переименовать, вырезать, копировать, вставлять и удалять папки и изображения, создавать и удалять изображения-миниатюры, создавать альтернативные изображения "Rollover Image", редактировать изображения в в встроенном редакторе изображений, создать всплывающие окна с изображениями, галереями и подсказками др. Подробнее...
загрузка медиа-файлов- вставить/изменить медиа-файл. Данная иконка появится в панели инструментов редактора после установки плагина Media Manager, который предназначен для загрузки и вставки в статьи сайта медиа-файлов (Flash, Windows Media, QuickTime и др.), позволяет легко вставлять фильмы с Youtube и имеет широкий спектр настроек. Подробнее...

↓↓↓ Понравилась статья? Жми на кнопки! ↓↓↓

Тэги: CSS-стили, редактор JCE, статья, контент

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


Защитный код
Обновить