Дополнения к визуальному редактору JCE для CMS Joomla.Часть 1

1 звезда2 звезда3 звезда4 звезда5 звезда (3 голос, рейтинг: 5,00 из 5)
Loading ... Loading ...

Хотите оперативно получать новые уроки и статьи блога LAWANS.RU. Просто введите ВАШ e-mail на форме справа >>>

Привет Всем!

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

Но наконец, появилось свободное окно и сдерживая обещание –  выкладываю пост про дополнения в визуальном редакторе JCE. Я буду делать серию статей по данным дополнениям, т.к. материал довольно большой.

Все дополнения можно разделить следующим образом:

виды дополнений в JCE

Плагины (в стандартном пакете их нет)

-Расширения (в стандартном пакете уже присутствуют несколько)

-Языки (на официальном сайте можно скачать русский)

-Относящиеся к расширениям Joomla (в стандартном пакете их нет)

В предыдущей статье я не совсем до конца рассказал про русификацию компонента JCE и упустил важный момент!

Русский язык можно также скачать и с официального сайта разработчика  – www.joomlacontenteditor.net/downloads/languages

Поэтому я приведу здесь краткий пример ещё одного более легкого, и я бы сказал основного способа русификации JCE.

На рисунке ниже я показал цифрами порядок его установки.

русификация JCE

После инсталляции получим в Languages  запись Russian. И если понажимать другие вкладки, то редактор будет уже на русском языке. Язык также можно удалить, выделив галкой Russian и нажав кнопку Удалить выбранные. Таким же способом можно будет удалять все дополнения, у которых галка выделения активна.

русский язык в админке JCE

Так, с этим разобрались!

Давайте начнём с конца и поговорим теперь про – дополнения, относящиеся к расширениям Joomla.

Здесь речь пойдёт  о таком расширении как JCE MediaBox. На данный момент я нашёл только одно расширение такого рода. Его можно скачать бесплатно с официального сайта разработчика - www.joomlacontenteditor.net/downloads/mediabox/joomla-25

Утстановим его, обратите внимание, через стандартный МЕНЕДЖЕР РАСШИРЕНИЙ Joomla, а не через кнопку Установка дополнений в JCE.

Ах да забыл. А что же такое JCE MediaBox? А это дополнительный плагин для редактора JCE, который позволяет добавлять эффект lightbox (всплывающее окно) для выбранных объектов в контенте.

Когда мы установим плагин, его надо активировать. Для этого найдём в списке плагинов System – JCE MediaBox и включим его.

И если зайти в админское меню Компоненты – Администрирование JCE, то увидим новую вкладку Параметры JCE MediaBox и кнопку с таким же названием.

Параметры JCE MediaBox

Если хотите, можете залезть в неё и сделать какие-то манипуляции, например, сменить тему отображения. Ну а я продолжу и расскажу как применить эффект всплывающих окон.

Делаем эффект всплывающих окон в JCE.

Для этого заходи в нашу статью выделяем нужный текст или картинку и нажимаем кнопку кнопка ссылки в JCE  и о ужас  – нечитабельный текст !!!

нечитаемый текст  в JCE

Не переживайте! Знающие люди подсказали, что надо просто добавить одну строку в начало файла .htaccess (он лежит в корне сайта и первоначально называется htaccess.txt)
А строка такая: AddDefaultCharset utf-8

По идее можете либо переименовать файл htaccess.txt в .htacces или просто создать новый файл .htacces с одной такой строкой.

читабельный текст в JCE

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

После выбора изображения переходим на вкладку Всплывающие окна и выбираем тип JCE MediaBox Popups.

Всплывающие окна

После нажатия выскочили настройки, которые вы можете заполнить по своему усмотрению. Например, я так заполнил

тип всплывающего окна

А мы всё это сохраним и посмотрим, что будет на сайте. А там будет всплывание окна.

пример всплывающего окна на сайте

Но, например, есть на странице несколько изображений и их надо объединить в группу для листания, т.е. типа галереи. Тогда смотрим, что тут можно сделать.

Делаем всплывающую галерею изображений в JCE.

Сделать это просто. Создадим для примера ещё одну картинку для всплывания. И у обоих ссылок в поле Группа напишем одинаковое название группы латиницей. Я записал test.

всплывающая галерея изображений в JCE

Проверим работу этой настройки на сайте.

всплывающая галерея изображений на сайте

Как видим, появилась прокрутка страниц, значит всё получилось!

Но мы хотим ещё возможностей, например всплывание видео в окне. Всё просто.

Вывод медиа контента во всплывающем окне в JCE.

В поле Ссылка вставляем адрес видео-аудио. Далее на вкладке Всплывающие окна и выбираем тип JCE MediaBox Popups и смотрим опцию Тип медиа.

Вывод медиа контента во всплывающем окне в JCE.

Как видим можно вставить богатый выбор медиа контента, в том числе и видео с внешних источников типа Youtube, а также аудио, флешь и многое другое.

Есть и ещё одна фишка у JCE MediaBox – всплывающей подсказки. Давайте поглядим как их сделать.

Вывод всплывающей подсказки в JCE.

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

jcetooltip

Выставляем Класс – jcetooltip и вводим текст подсказки. Сохраняем и наблюдаем на сайте следующее.

всплывающая подсказка в JCE на сайте

Можно также поиграть с настройками плагина, если зайти в Менеджер плагинов –  System – JCE MediaBox

Настройка плагина JCE MediaBox

Главные настройки:

  • Popup Theme – темы для показа всплывающего изображения.
  • Icon path - путь к иконкам для JCE Mediabox

Главные настройки JCE MediaBox

Настройки выпадения окон:

  • Fade Speed - скорость появления/исчезания окна
  • Scale Speed – скорость масштабирования окна
  • Overlay – включить или выключить затемнение объектов за окном
  • Overlay Opacity – прозрачность затемненных объектов
  • Overlay Color – цвет затемнения за всплывающим окном
  • Width/Height – ширина/высота всплывающего окна
  • Resize Popups – включить или выключить изменение размера окна
  • Close Action – выбор закрытия окна (по щелчку вне окна или по кнопке креста)
  • Zoom/Popup Icons – показывать или нет иконку увеличения внизу окна
  • Hide Objects – скрывать или нет объекты за окном
  • Scrolling – окно будет следовать за прокруткой сайта (Fixed) или оставаться на месте (Scroll)
  • Exclude Components – внести компоненты для исключения использования JCE mediabox
  • Dynamic Theme Switching – включить/выключить динамическое переключение тем

Настройки выпадения окон JCE Mediabox

Настройки всплывающих подсказок:

  • Tooltip Class – имя класса CSS всплывающей подсказки
  • Tooltip Opacity – прозрачность подсказки
  • Tooltip Speed – скорость появления окна c подсказкой
  • Tooltip Position – положение появления подсказки
  • X Offset/Y Offset – смещение подсказки по оси XY относительно курсора

Настройки всплывающих подсказок JCE Mediabox

Вот пока на этом всё! Жду ваших комментариев и вопросов! В следующих постах продолжим тему и посмотрим, что ещё умеет JCE.


У ВАС ведь есть ТЕЛЕФОН? Или mp3-player? А может даже планшет, ноутбук или игровая консоль!
Хочется, чтобы он был необычным и уникальным?
Заходите к нам – мы поможем.

  
  
{lang: 'ru'}

Похожие статьи

17 thoughts on “Дополнения к визуальному редактору JCE для CMS Joomla.Часть 1

    • теоретически скорее всего возможно. Но проще сделать статью в ней посадить плагин Chronoform в каком нибудь скрытом блоке и по ссылке этот блок просто отображать.

  1. Зравствуйте!
    Хорошая статья!
    Вопрос
    “Но проще сделать статью в ней посадить плагин Chronoform в каком нибудь скрытом блоке и по ссылке этот блок просто отображать.”
    Если можно подробнее, пожалуйста
    Спасибо

    • ставите плагин (можно и модуль по идее) для Chronoform. В статье делаете обычный div с некоторым классом (в стилях по умолчанию его скрываете) и в него этот плагин прописываете. А при клике по ссылке через jquery делаем этот div видимым. Может конечно заумно написал, но тут придётся целую статью постить подробно.Думаю как ниб. на досуге напишу

  2. Здравствуйте. При установке ссылки на изображение на сайте не видно самой картинки а работает на “ощуп” только всплывающее окно. Переустановка JCE ничго не даёт. Что может быть?

  3. Хорошая статья, я столкнулся с кракозябрами в всплывающих окнах JCE на первом своем сайте все исправил а вот на втором никак не получается, добавил строчку AddDefaultCharset UTF-8 а результат такой же. подскажите есть ли еще какое нибудь решение этой проблемы.

  4. Да вроде кривого ничего не должно быть, ставил один и тот же редактор в первом случае исправил во тором никак не получается, ладно спасибо буду искать решение, как найду дам знать :)

  5. Прошу прощения, что-то я не въехал, а каким образом можно с одного объекта протянуть несколько ссылок, чтобы в итоге получилась галерея? Ведь проводя вторую, мы убиваем первую ссылку, и в итоге все равно одна картинка выводится … не взирая ни на какие “группы”. :)

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

      • не понял … поясню, есть объект (картинка) для которой через этот редактор я сделал увеличение (в медиабокс) посредством ссылки, проведенной на 2-ую, только бОльшего размера, картинку. В целом получился симпатичный эффект увеличения 1-ой картинки. А дальше непонятка выходит, как можно с 1-ой картинки протянуть ссылки (разные) на десяток других, чтобы те открылись в боксе в качестве галереи? Если бы была функция “добавить” ссылку, тогда понятно … но как можно с одного объекта перейти в разные места … извините, не догоняю чего то. :)

        • чтобы получилась галлерея надо установить для начала все картинки на страницу с разными соответственно ссылками на увеличенную копию. А затем у каждой такой ссылке просто обозначить одинаковую группу. Из одной картинки сделать галлерею понятно не получится.

  6. Но в общем-то, это не важно. Главная цель другая … возможно ли воткнуть подсказку (желательно с текстом и картинкой) в ролловер?

    • насчёт всплывающей картинки навряд. Для вставок подсказок для текста кнопка есть, в посте написано как.

      • ммм, попробую … точнее, подсказку уже вставил, сложность в том, что в ролловере уже с картинки есть ссылка и ведет на пункт меню, получается, что посредством JCE другую не вставить, к тому же она по клику пошла бы … нашел плагин, который текст с картинкой выводит как подсказку по наведению, но он вообще ролловер разваливает … видимо текстом придется обойтись :)

  7. У меня такой вопрос. А как можно в этом редакторе сделать так. Я хочу в материал добавить много фотографий (не в виде галереи) а так подряд! Но чтобы фотки увеличивались при клике в сплывающие окно!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>