Інформація майже повністю актуальна для Joomla 5 (примітку додано 21.10.2023).
Відеоурок
- Встановлення та «підключення» редактора – 00:01:29.
- Особливості вставки тексту, копіювання, вирізання – 00:03:44.
- Колір, розмір, зображення, гарнітура шрифту – 00:05:46.
- Вирівнювання тексту – 00:06:50.
- Заголовки 1-6 рівнів – 00:07:30.
- Маркований, нумерований списки – 00:08:57.
- Браузер файлів – 00:10:03.
- Зображення – 00:11:52.
- Збільшення картинок натискання (MediaBox) – 00:16:22.
- Вставка посилання на відео у спливаючому вікні (MediaBox) – 00:17:36.
- Посилання – 00:19:08.
- Якір (посилання на певне місце на сторінці) – 00:20:42.
- Таблиці – 00:24:03.
- Поділ тексту на вступний та повний – 00:31:01.
- Пошук та заміна – 00:31:55.
- Цитати – 00:32:29.
- Збільшення відступу – 00:33:07.
- Відміна та повторення дії – 00:33:23.
- Перегляд коду – 00:34:11.
- Нижній та верхній індекси – 00:34:26.
- Спеціальні символи – 00:34:51.
- Регістр символів – 00:35:10.
- Горизонтальна лінія – 00:35:32.
Відео краще переглядати з якістю «1080p HD». Цей та інші відеоогляди та уроки можна знайти на моєму YouTube каналі.
Посилання з відео:
- Цикл відеоуроків по створенню сайтів на Joomla 4.
- «Відеоурок по TinyMCE в Joomla 4. Текстовий редактор».
- Офіційний сайт редактора.
У попередньому циклі відеоуроків зі створення сайту на Joomla 4 ми розробили адаптивний сайт фірми з блогом, портфоліо та завантажили його на хостинг. Під час роботи ми багато разів користалися візуальним текстовим редактором TinyMCE для форматування тексту. У попередньому відеоуроці ми досить детально розглянули основні інструменти TinyMCE. Але у вбудованого редактора є досить гарна альтернатива – редактор JCE (малюнок нижче). В даному відеуроці попрацюємо саме з ним.
Розглянуті основні практичні моменти щодо форматування тексту, створення нумерованих та маркерованих списків, таблиць, посилань та робота з зображеннями.
В уроці бере участь остання доступна мені, на момент написання статті (23.06.2023), версія Joomla 4.3.2 українською мовою та JCE Core 2.9.37 з JCE MediaBox 2.1.3 англійською мовою.
Порівняння JCE Editor Core та Pro
Core | Pro | |
Ціна | Безкоштовно | €29 |
Редактор зображень. Створення мініатюр та зображень, оптимізовані під різні пристрої (атрибут «srcset») | - | + |
Управління відео та аудіо. Проста вставка відео з Youtube та Vimeo. Спрощене додавання декількох медіа-файлів | - | + |
Створення посилань на файл або їх вбудовування у матеріал | - | + |
Створення стилізованих підписів до зображень | - | + |
Покращений редактор коду (підсвічування синтаксису, пошук тощо) | - | + |
Інтегрована підтримка спрощеної мови розмітки Markdown | - | + |
Пріоритетна підтримка на форумі | - | + |
Створення стовпців (на базі Flexbox) | - | + |
Вставка вмісту із збережених файлів або фрагментів HTML за допомогою списку елементів шаблону | - | + |
Створення підписів до зображень | - | + |
Стилізація тексту підпису з параметрами кольору, фону, вирівнювання, полів і відступів | - | + |
Стилізація контейнера підписів за допомогою параметрів кольору фону, вирівнювання, полів і відступів | - | + |
Порівняння редакторів JCE та TinyMCE.
Редактори JCE (Joomla Content Editor) та TinyMCE (Tiny Moxiecode Content Editor) є двома популярними вебредакторами, які використовуються для редагування контенту на вебсторінках. JCE – це редактор контенту, специфічно розроблений для системи управління вмістом Joomla. Він встановлюється безпосередньо з Joomla і надає розширені можливості редагування для користувачів цієї CMS. З іншого боку, TinyMCE є незалежним редактором, який може бути використаний в різних вебплатформах, таких як WordPress, Drupal, або просто у власних вебпроектах. JCE має дещо більш складний інтерфейс порівняно з TinyMCE. Це пов'язано з більшим набором функцій і можливостей JCE. У той час, як TinyMCE пропонує більш простий та легкий у використанні інтерфейс.
JCE гнучкіше налоштовується, ніж TinyMCE. Плюс, у ньому є низка додаткових інструментів для полегшення верстки тексту. А деякі інструменти, які є в обох редакторах, в JCE оснащені додатковими параметрами.
Позначення у таблиці нижче:
- «-» – немає такої можливості/інструменту.
- «+» – є така можливість/інструмент.
- «++» – є така можливість/інструмент з більш розширеним функціоналом/налаштуваннями.
| JCE | TinyMCE |
Вбудований у Joomla за замовчуванням | - | + |
Інструмент Великі літери. Для зміни регістру символів (малі, великі, всі великі і т.д.) | + | - |
Інструмент Редактор CSS стилю | + | - |
Налаштування цитат | + | - |
Інструмент Абревіатура (тег «abbr») | + | - |
Інструмент Вставити/Редагувати атрибути | + | - |
Інструмент Перемикач перевірки орфографії. Дозволяє вимкнути контекстне меню редактора та увімкнути контекстне меню браузера для виправлення орфографічних помилок | + | - |
Вставка посилань | ++ | + |
Менеджер зображень | ++ | + |
Попередній перегляд матеріалу | + | - |
Інструменти оптимізації швидкості завантаження самого редактора | + | - |
Налаштування профілю редактора для різних груп користувачів | ++ | + |
Налаштування окремих інструментів редактора | + | - |
На рисунках нижче показані деякі з інструментів, які є в JCE, але немає TinyMCE, чи вони більш розширені за можливостями, у порівнянні з TinyMCE.
В статті «Відеоурок з компоненту Статті Joomla (com_content)» ми поговоримо про різні налаштування матеріалів.
| Автор статті – Хорошевський Олексій |
|---|
 Кандидат технічних наук, викладач Харківського національного університету радіоелектроніки, веб-майстер та SEO-оптимізатор із досвідом роботи понад 15 років. Спеціаліст зі створення сайтів на Joomla та WebSite X5. Автор наукових публікацій, відеокурсів та навчального контенту з веб-розробки та SEO. Веде блог та YouTube-канал, де ділиться своїми знаннями та практичним досвідом. Публікації та робота: |
| Схожі матеріали |
|---|
Корисні посилання:
