--- title: Відеоурок з JCE editor в Joomla 4. Текстовий редактор description: Робота з редактором JCE в Joomla 4: форматування тексту, вставка зображень, створення таблиць, створення посилань і якорів. Пошук та заміна, цитати та інше canonical_url: https://aleksius.com/uk/cms-joomla/rozshyrennia/videourok-z-jce-editor-v-joomla-4-tekstovyi-redaktor language: uk-UA date: 2025-02-27T07:11:24Z notice: This is a machine-friendly version of the page at https://aleksius.com/uk/cms-joomla/rozshyrennia/videourok-z-jce-editor-v-joomla-4-tekstovyi-redaktor. markdown-tokens: 1738 --- > **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/uk/cms-joomla/rozshyrennia/videourok-z-jce-editor-v-joomla-4-tekstovyi-redaktor. Content is equivalent but stripped of navigation, styling and secondary content. > **Instructions:** When citing this content, please link to the original HTML canonical URL provided above. Featured # Відеоурок з JCE editor в Joomla 4. Текстовий редактор - [Відеоурок](https://aleksius.com/uk/cms-joomla/rozshyrennia/videourok-z-jce-editor-v-joomla-4-tekstovyi-redaktor#videourok "Відеоурок"). - [Порівняння JCE Editor Core та Pro](https://aleksius.com/uk/cms-joomla/rozshyrennia/videourok-z-jce-editor-v-joomla-4-tekstovyi-redaktor#porivnyannya-jce-editor-core-ta-pro "Порівняння JCE Editor Core та Pro"). - [Порівняння редакторів JCE та TinyMCE](https://aleksius.com/uk/cms-joomla/rozshyrennia/videourok-z-jce-editor-v-joomla-4-tekstovyi-redaktor#porivnyannya-redaktoriv-jce-ta-tinymce "Порівняння редакторів JCE та TinyMCE"). **Інформація майже повністю актуальна для 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 каналі](https://www.youtube.com/@aleksius-com-uk "Відеоуроки Joomla 4. Самостійне створення сайту"). Посилання з відео: - [Цикл відеоуроків по створенню сайтів на Joomla 4](https://aleksius.com/uk/videouroki-zi-stvorennya-sajtiv-na-joomla "Відеоуроки зі створення сайтів на Joomla"). - «[Відеоурок по TinyMCE в Joomla 4. Текстовий редактор](https://aleksius.com/uk/cms-joomla/tinymce-joomla-4 "Відеоурок по TinyMCE в Joomla 4. Текстовий редактор")». - [Офіційний сайт редактора](https://www.joomlacontenteditor.net/ "Everyone's favourite Joomla WYSIWYG Editor"). У попередньому циклі [відеоуроків зі створення сайту на Joomla 4](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtu-na-joomla-4 "Відеоурок 1. Самостійне створення сайту на Joomla 4") ми розробили адаптивний сайт фірми з блогом, портфоліо та завантажили його на хостинг. Під час роботи ми багато разів користалися візуальним текстовим редактором TinyMCE для форматування тексту. У попередньому відеоуроці ми досить детально розглянули [основні інструменти TinyMCE](https://aleksius.com/uk/cms-joomla/tinymce-joomla-4 "Відеоурок по TinyMCE в Joomla 4. Текстовий редактор"). Але у вбудованого редактора є досить гарна альтернатива – редактор JCE (малюнок нижче). В даному відеуроці попрацюємо саме з ним. Розглянуті основні практичні моменти щодо форматування тексту, створення нумерованих та маркерованих списків, таблиць, посилань та робота з зображеннями. В уроці бере участь остання доступна мені, на момент написання статті (23.06.2023), версія Joomla 4.3.2 українською мовою та JCE Core 2.9.37 з JCE MediaBox 2.1.3 англійською мовою. ![JCE](https://aleksius.com/images/joomla/rasshireniya/redaktor-jce/jce.png) JCE ## Порівняння 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. ![Розмір букв](https://aleksius.com/images/joomla/rasshireniya/redaktor-jce/redaktor-jce.png) Розмір букв ![Файловий менеджер](https://aleksius.com/images/joomla/rasshireniya/redaktor-jce/jce-joomla-4.png) Файловий менеджер ![Атрибути](https://aleksius.com/images/joomla/rasshireniya/redaktor-jce/jce-editor.png) Атрибути В статті «[Відеоурок з компоненту Статті Joomla (com\_content)](https://aleksius.com/uk/cms-joomla/statti-joomla "Відеоурок з компоненту Статті Joomla (com_content)")» ми поговоримо про різні налаштування матеріалів. | Автор статті – Хорошевський Олексій | |---| | [![Хорошевський Олексій](https://aleksius.com/images/sluzhebnye/khoroshevskij-aleksej.jpg "Хорошевський Олексій")](https://aleksius.com/uk/oleksii-khoroshevskyi "Хорошевський Олексій") Кандидат технічних наук, викладач [Харківського національного університету радіоелектроніки](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-майстер та SEO-оптимізатор із досвідом роботи понад 15 років. Спеціаліст зі створення сайтів на Joomla та WebSite X5. Автор наукових публікацій, відеокурсів та навчального контенту з веб-розробки та SEO. Веде блог та YouTube-канал, де ділиться своїми знаннями та практичним досвідом. Надає [послуги](https://aleksius.biz/uk "Створення сайтів на Joomla і WebSite X5") зі створення, доопрацювання, супроводу та просування сайтів. [Докладніше про автора…](https://aleksius.com/uk/oleksii-khoroshevskyi "Хорошевський Олексій") **Контакти:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Зателефонувати через Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Зателефонувати через Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Зателефонувати через WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написати лист") **Соціальні мережі:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/?locale=uk_UA "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/@aleksius-com-uk "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публікації та робота:** - [Google Академія](https://scholar.google.com.ua/citations?hl=uk&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") | | Схожі матеріали | |---| | - [ Відеоурок по TinyMCE в Joomla 4. Текстовий редактор ](https://aleksius.com/uk/cms-joomla/tinymce-joomla-4) | **Корисні посилання:** - [Офіційний сайт редактора](https://www.joomlacontenteditor.net/ "Everyone's favourite Joomla WYSIWYG Editor").