05-1(4) Работа со ссылками в редакторе контента JCE.

Для редактирования содержимого Материала в CMS Joomla используется так называемый ВИЗУАЛЬНЫЙ редактор WYSIWYG (What You See Is What You Get - что видишь, то и получишь). Редактор такого типа позволяет легко устанавливать ссылки на внешний и внутренний контент сайта в тексте или на изображение, размещенное на странице.

По умолчанию в Joomla встроен редактор TinyMCE. Это отличный, проверенный временем визуальный редактор, тем не менее удобнее пользоваться редактором «JCE» или «Joomla Content Editor». Это сторонний компонент, не входящий в стандартный пакет Joomla, обладающий большими возможностями, чем встроенный и удобнее для пользователя.

Редактор «JCE» предлагается разработчиком в двух вариантах «JCE Core» (бесплатный) и «JCE Pro» (платный). Варианты имеют различные возможности и об их отличиях написано в материале: «Окно работы с контентом редактора JCE».

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

Окно редактора контента «JCE Core» и иконки для работы со ссылками.

Управление содержимым страницы, в том числе установкой и удалением ссылок, производится манипуляцией с иконками окна редактора. Набор иконок настраивается и зависит от предпочтений заказчика и разработчика сайта.

Манипуляции со ссылками можно отнести к часто применяемым функциям и иконки для этой цели обычно располагаются в первых рядах.

	Вставка ссылки. Точнее иконка производит изменение выделенного фрагмента текста, превращая его в ссылку. После нажатия на иконку откроется окно Менеджера Ссылок.
	Удаление ссылки. Здесь все просто - выделяем ссылку, жмем иконку, ссылка исчезает, остается выделенный текст.
	Вставка Якоря для создания особого вида ссылки.

Создать/изменить ссылку в редакторе контента JCE

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

Вкладка ССЫЛКА окна редактора JCE

«Ссылка» - Здесь должен находится путь для формирования ссылки. При помощи окна работы со ссылками компонента визуального редактора JCE можно сформировать четыре типа ссылок:

1. Ссылка на внутренний контент сайта. При клике по такой ссылке откроется назначенная для этого страница. Для выбора внутренней страницы сайта предназначено центральное поле окна работы со ссылками.
2. Ссылка на внешний по отношению к сайту ресурс. В это поле нужно ввести полный путь ссылки на внешний ресурс.
3. Ссылка на файл, размещенный на сервере в рамках сайта. Для выбора файла на сервере нужно нажать на иконку «Обзор» в правой части поля. Откроется окно браузера файлов для выбора файла на сервере.
4. Ссылка на e-mail. Для выбора нужно нажать на иконку «E-Mail» в правой части поля. Откроется окно для ввода электронной почты.

«Текст» - Это текст который превратится в ссылку. В поле попадает тот текст который Вы выделили курсором на странице перед переходом в окно работы со ссылками. Здесь его можно изменить.

«Центральное окно» - содержит иерархическую древовидную структуру списка элементов сайта, на которые можно создать внутреннюю ссылку. Содержание этого окна (состав корневых папок) зависит от установленных расширений для менеджера ссылок компонента JCE. По умолчанию окно содержит четыре раздела:

1. «Контакты» для формирования ссылок на контакты и группы контактов сайта.
2. «Контент» - полная структура раздела Категории - Подкатегории - … - Материалы, для формирования ссылок на категории и материалы сайта
3. «Меню» - полная структура, созданных на сайте меню, для формирования ссылок на пункты меню сайта
4. «Вебссылки» для формирования ссылок на другие ссылки организованные на сайте при помощи компонента «Ссылки» на сайте.

Дополнительные разделы появляются после установки плагинов расширений для менеджера ссылок компонента JCE, например для Компонентов каталогов типа K2 или ZOO. При установке таких расширений ссылка может быть сформирована на категории и материалы этих компонентов.

Ссылка на внутренние страницы сайта, формируемая в компоненте редактора JCE имеет две особенности:

1. Внутренняя ссылка "относительная", т.е. при ее формировании не используется доменное имя сайта. Чем это хорошо? При переносе сайта на другое доменное имя (например при разворачивании архива сайта на Локальном сервере) все ссылки на страницах контента остаются рабочими.
2. Внутренняя ссылка "не зависит от ЧПУ", т.е. при ее формировании не используется человеко-понятные url, как на страницах фронтальной части сайта. Чем это хорошо? При изменении ссылки ЧПУ страницы сайта куда ведет ссылка (например при изменении алиаса пункта меню или статьи) ссылка останется рабочей.

При большом количестве объектов для формирования ссылок по ним можно осуществлять поиск при помощи соответствующего поля в верхней части. Поиск может быть более сложным чем просто ввод текста, для этого надо нажать на иконку «Параметры поиска» с шестеренкой.

«Якорь статьи» - Метка на странице, куда направлена ссылка, для дополнительного позиционирования перехода (например в нужное место большого текста).

«Цель» - Выбор страницы открытия, после срабатывания ссылки. В том же окне или на новой вкладке.

«Название» - Поясняющий текст, всплывающий при наведении курсора на ссылку.

Вкладка РАСШИРЕННЫЕ окна редактора JCE

На этой вкладке несколько настроек для "продвинутых пользователей". Без необходимости и понимания здесь ничего не заполняется.

«ID» - уникальный идентификатор ссылки.

«Стиль» - список CSS свойств примененных к ссылке.

«Класс» - возможность применения заранее настроенных свойств внешнего вида ссылки. Если поле класс не заполнено - ссылка имеет стандартный текстовый вид. Например "Смотреть/Скачать Инструкцию"

В шаблоне сайта разработчиком шаблона или разработчиком сайта заложены некоторые настройки внешнего вида ссылок. Чтобы изменить вид ссылки необходимо в поле «Класс» вписать (или выбрать из списка) имя класса. Например, для того чтобы ссылка выглядела как кнопка - ей может быть присвоен класс, например "btn" или "btn-primary" (Bootstrap). Если ссылке необходимо присвоить несколько классов их имена пишутся через пробел.

Остальные поля вкладки РАСШИРЕННЫЕ имеют узкоспециализированное специфическое назначение и используются в редких случаях.

Вкладка ВСПЛЫВАЮЩИЕ ОКНА редактора ссылок JCE.

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

На вкладке много настроек, отмечу несколько наиболее важных

«Тип всплывающего окна» - выбор типа всплывающего окна из списка. С редактором JCE как правило используется тип «JCE MediaBox Popups». Его функционал (внешний вид и прочее) обеспечивается одноименным плагином, который должен быть установлен, активирован и настроен.

«Название» - текст обеспечивающий подпись для всплывающего окна.

«Заголовок» - дополнительный текст для всплывающего окна.

«Группа» - возможность просмотра нескольких целевых окон для нескольких ссылок на странице в виде слайдера. В отличии от изображений для ссылок не слишком актуально.

«Размеры» - можно ограничить размер всплывающего окна.

«Авто окна» - можно разрешить автоматическое срабатывание ссылки (показ всплывающего окна). Дополнительная настройка - Один раз за сессию пользователя или при каждом открытии страницы.

Сформировать ссылку на конкретный файл в редакторе контента JCE.

Подробнее остановимся на ссылке на КОНКРЕТНЫЙ ФАЙЛ, находящийся на сайте (сервере). Будем использовать это для размещения на сайте ссылки на файлы PDF. Для перехода к файлам на сайте предназначена кнопка окна редактора ссылок, расположенная рядом с полем «Ссылка». Но начнем мы с окна Редактора JCE

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

• Выбираем файл PDF и жмем «Вставить». Браузер файлов закроется а в поле «Ссылка» окна менеджера ссылок появится путь к выбранному файлу.
• Если хотим, чтобы ссылка выглядела как кнопка - присваиваем ей классы btn btn-primary, на вкладке РАСШИРЕННЫЕ. Вид ссылки в окне редактора может не измениться, результат будет отражен на фронтальной части сайта после завершения всех манипуляций.
• Если хотим, чтобы файл PDF открывался во всплывающем окне настраиваем параметры на вкладке ВСПЛЫВАЮЩИЕ ОКНА
• Завершаем работу по вставке ссылки на файл нажатием кнопки «Вставить» окна работы со ссылками.
• Сохраняем Материал в который вставлена ссылка на файл
• Результат вставки ссылки (текстом или в виде кнопки) смотрим с фронтальной части сайта.
• По нажатию на созданную ссылку выбранный файл PDF открывается на странице или во всплывающем окне.

По умолчанию в редакторе JCE Core возможность работы с файлами отличными от изображений не настроена. Для работы с файлами PDF или видео файлами требуются соответствующие настройки по типу и на разрешенный размер закачки.

Для работы с этими типами файлов, а так же для открытия изображений, файлов PDF и видеофайлов рекомендуется установка Редактора «JCE PRO».