04-1(1) Окно работы с контентом редактора JCE для Joomla 4

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

Дополнительным бонусом при установке редактор контента «JCE» на предыдущей версии системы, был продвинутый, по сравнению со встроенным, менеджер изображений. Насколько этот аспект актуален для Joomla 4 разберемся в отдельном материале.

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

Общий вид окна Редактора контента «JCE» для Joomla 4:

Управление содержимым производится манипуляцией с иконками окна редактора. В общем случае редактирование напоминает работу в известной программе MS Word и других подобных для компьютера.

Компонент может быть русифицирован и при наведении мыши на иконку можно прочитать подсказку о ее назначении на русском языке.

Набор иконок настраивается и зависит (особенно расположение) от предпочтений указанных при разработке сайта и версии используемого редактора (Core/Pro). Так же для удобства использования панель иконок может (что и сделано) сворачиваться. Для сворачивания/разворачивания панели нажмите на иконку 

Действия большинства иконок редактора контента «JCE» не нуждаются в разъяснениях, но некоторых потребуют таковых и их описание сделано в этой статье и нескольких отдельных материалах. Так же обратите внимание, что некоторые иконки не активны.

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

Неактивные иконки активизируются ТОЛЬКО при выделении контента. Например, иконка изменения регистра букв, станет активной при выделении нужной буквы, а иконки работы с таблицей активизируются при нахождении курсора внутри таблицы.

Иконки и поля форматирования (изменения внешнего вида) текста

	Делаем текст полужирным, наклонным, подчеркнутым...
	Изменение регистра букв
	Изменение цвета текста и фона
	Выравнивание текста (по ширине, по центру, ...)
	Позволяет сделать сложное форматированние выделенной части текста. Для продвинутых пользователей, обладающих понятием о CSS.
	Форматирование текста в цитату
	Выбор HTML форматирования выделенной части текста (теги <p>,<div>, <span>, <h1>...<h6>). Возможно использование и других тегов.Желательно понимание разметки HTML
	Возможность присвоения, класса, определяющего форматирование (внешний вид), для выделенной части текста. Классы создаются заранее, разработчиком сайта в соответствии с задачами сайта.Необходимо понимание разметки HTML и CSS
	Изменение шрифта.
	Изменение размера шрифта
	Возможность создать списки: нумерованный (цифры, буквы), ненумерованный (маркеры)
	Позволяет увеличить / уменьшить отступ. Удобно при работе с иерархией списков

Иконки вставки контента (текста, изображений, формирования ссылок и т.д.)

	Вставка текста в место указанное курсором. После нажатия на иконку откроется  отдельное окно, куда и нужно вставить текст (Ctrl+V или правая кнопка мыши). Что бы Вы предварительно ни скопировали (текст из Word, контент с другого сайта) вставлен будет ТОЛЬКО ТЕКСТ!!! После вставки текст необходимо отформатировать в соответствии с желанием. Конечно Вы можете вставить текст в окно редактора JCE не используя этой иконки, а просто нажав Ctrl+V или через меню ПКМ. Но делать этого КАТЕГОРИЧЕСКИ НЕ РЕКОМЕНДУЕТСЯ!!! Особенно при копировании с других сайтов.
	Вставляем изображение в место указанное курсором. После нажатия иконки откроется окно Менеджера Изображений.
	Вставка ссылки. Точнее иконка производит изменение выделенного фрагмента текста, превращая его в ссылку. После нажатия на иконку откроется окно Менеджера Ссылок. Удаление ссылки. Здесь все просто - выделяем ссылку, жмем иконку, ссылка исчезает, остается выделенный текст. Вставка Якоря для создания особого вида ссылки.
	Возможность вставки специального символа, такого как кавычки («») или знак евро (€), а так же некоторых других.
	Вставка неразрывного пробела
	Вставка линии
	Вставить смайлик, выбор из списка
	Вставка специфического для CMS Joomla параметра - «Разрыв страницы», отделяющего вводный текст (Intro) от основного (Full). Иконка не применяется (отсутствует) при использовании компонента CCK Seblod.
	Выбор из списка для вставки: модуль, поле, контакт, материал, пункт меню

Иконки для работы с таблицами

	Вставляем таблицу в место указанное курсором. После нажатия иконки откроется окно Менеджера Таблиц.
	Удаляем таблицу. Иконка становится активной при установке курсора в любое место таблицы. При нажатии на иконку таблица удаляется целиком.
	Редактируем строку таблицы в котрой находится курсор (иконка станет активной). После нажатия иконки откроется окно Свойства Строки.
	Редактируем ячейку таблицы в котрой находится курсор (иконка станет активной). После нажатия иконки откроется окно Свойства Ячейки.
	Вставить строку таблицы выше/ниже строки в котрой находится курсор, удалить строку.
	Вставить столбец таблицы слева/справа от столбца в котром находится курсор, удалить столбец.

Иконки для других полезных действий 

	Развернуть/свернуть панель иконок
	Отменить/восстановить действие
	Убираем форматирование для выделенного фрагмента текста
	Проверка орфографии. Функция должна быть настроена
	Развернуть на весь экран, окно редактора
	Поиск и замена текста
	Позволяет присваивать атрибуты блокам текста
	Печатать контент из окна редактора JCE

Вооружившись этими знаниями можно легко вносить и править контент на сайте CMS Joomla 4.

Вкладка «Код»

Кроме вкладки «Редактор» c визуальным редактором, вид и работу с которым я до сих пор описывал, в редакторе JCE для Joomla 4 представлена вторая вкладка «Код». Вкладка «Код» содержит ИСХОДНЫЙ КОД контента и предназначена для работы пользователей ПОЛНОСТЬЮ понимающих всю структуру формирования вывода контента на страницах сайтов, таких как теги разметки страницы HTML, атрибуты HTML и принципы представления языка CSS.   

Обычно, необходимость полностью работать в редакторе Исходного кода не возникает. Но продвинутому пользователю может понадобиться в процессе создания или редактирования контента перейти из Визуального редактора в Редактор исходного кода, чтобы внести какие-ибо правки или проверить правильность интерпретации форматирования контента.

Визуальный редактор контента «JCE» для Joomla 4 в редакции PRO

Несколько слов о версии редактора «JCE Pro». Редактор «JCE» в версии PRO обладает рядом особенностей, дающих пользователю больше возможностей и дополнительные удобства.

1. Редактор Исходного кода имеет дополнительные возможности, такие как "подсветка синтаксиса", нумерация строк, поиск и замена и т.д. Вот так выглядит вкладка «Код» редактора «JCE Pro»

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

3. Расширенный менеджер изображений  позволяет легко управлять организацией модальных окон для просмотра изображений. Эта возможность реализована на сайте www.e-stas.com - по любому из размещенных на страницах изображений можно кликнуть мышкой, чтобы посмотреть в увеличенном виде в модальном окне.

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

В чем отличия между Расширенным менеджером изображений и просто Менеджером изображений будет описано в отдельных материалах сайта.

4. Видео менеджер  позволяет вставлять на страницы сайта видеофайлы.

Редактор «JCE» в версии PRO обладает еще некоторыми, очень специфическими функциями, менее очевидными для обычного пользователя админки сайта CMS Joomla 4. Например возможность создания Микроразметки, создания слоя для подписи под каждым изображением, вставки IFrame или фрагмента другого файла-шаблона.