---
title: Відеоурок по TinyMCE в Joomla 4. Текстовий редактор
description: Робота з TinyMCE в Joomla 4: форматування тексту, вставка зображень, створення таблиць, створення посилань і якорів. Пошук та заміна, цитати та інші інструменти
canonical_url: https://aleksius.com/uk/cms-joomla/tinymce-joomla-4
language: uk-UA
date: 2025-02-27T07:11:28Z
notice: This is a machine-friendly version of the page at https://aleksius.com/uk/cms-joomla/tinymce-joomla-4.
markdown-tokens: 2503
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/uk/cms-joomla/tinymce-joomla-4. 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
# Відеоурок по TinyMCE в Joomla 4. Текстовий редактор
- [Відеоурок](https://aleksius.com/uk/cms-joomla/tinymce-joomla-4#videourok "Відеоурок").
- [Рекомендації щодо форматування тексту](https://aleksius.com/uk/cms-joomla/tinymce-joomla-4#rekomendacii-thodo-formatuvannya-tekstu "Рекомендації щодо форматування тексту").
**Інформація майже повністю актуальна для Joomla 5 (примітку додано 21.10.2023).**
## Відеоурок
- Панель інструментів, редактор на весь екран – 00:01:30.
- Особливості вставки тексту, копіювання, вирізання – 00:02:06.
- Колір, розмір, зображення, гарнітура шрифту – 00:04:21.
- Вирівнювання тексту – 00:06:34.
- Заголовки 1-6 рівнів – 00:07:48.
- Маркований, нумерований списки – 00:10:47.
- Медіа (завантаження зображень на сайт) – 00:12:16.
- Зображення – 00:15:13.
- Посилання – 00:19:11.
- Якір (посилання на певне місце на сторінці) – 00:22:36.
- Таблиці – 00:26:35.
- Поділ тексту на вступний та повний – 00:34:26.
- Пошук та заміна – 00:36:24.
- Цитати – 00:37:12.
- Збільшення відступу – 00:38:03.
- Відміна та повторення дії – 00:38:22.
- Перегляд коду – 00:39:10.
- Нижній та верхній індекси – 00:39:36.
- Спеціальні символи та емоції (смайлики) – 00:39:59.
- Горизонтальна лінія та вставка прикладу коду – 00:40:43.
Відео краще переглядати з якістю «1080p HD». Цей та інші відеоогляди та уроки можна знайти [на моєму YouTube каналі](https://www.youtube.com/@aleksius-com-uk "Відеоуроки Joomla 4. Самостійне створення сайту").
Посилання з відео:
- [Цикл відеоуроків по створенню сайтів на Joomla](https://aleksius.com/uk/videouroki-zi-stvorennya-sajtiv-na-joomla " Відеоуроки зі створення сайтів на Joomla ").
- [Відео урок по створенню блогів](https://aleksius.com/uk/cms-joomla/rozrobka-vlasnogo-sayjtu "Відеоурок 6. Створення свого сайту на Joomla 4").
У попередньому циклі [відеоуроків зі створення сайту на Joomla 4](https://aleksius.com/uk/cms-joomla/samostiyjne-stvorennya-sayjtu-na-joomla-4 "Відеоурок 1. Самостійне створення сайту на Joomla 4") ми розробили адаптивний сайт фірми з блогом, портфоліо та завантажили його на хостинг. Під час роботи ми неодноразово користалися візуальним текстовим редактором TinyMCE для форматування тексту. У цьому відеоуроці детальніше розглянемо інструменти цього редактора та попрацюємо з компонентом Медіа.
У цьому відео розглянуті основні практичні моменти щодо форматування тексту, створення нумерованих та маркерованих списків, таблиці, посилань та робота з зображеннями. А в статті «[Відеоурок з компоненту Статті Joomla (com\_content)](https://aleksius.com/uk/cms-joomla/statti-joomla "Відеоурок з компоненту Статті Joomla (com_content)")» ми поговоримо про різні налаштування матеріалів.
В уроці бере участь остання доступна мені, на момент написання статті (27.05.2023), версія Joomla 4.3.1 українською мовою та TinyMCE 5.10.7.
У новій версії CMS було оновлено версію редактора та додано можливість задавати вирівнювання зображення у його налаштуваннях. Детальніше про оновлення у пя’тій Джумла можно дізнатися у статті «[Що нового в Joomla 5 та 4.4](https://aleksius.com/uk/cms-joomla/so-novogo-v-joomla-5-ta-4-4 "Що нового в Joomla 5 та 4.4")».
 TinyMCE Joomla 4 ## Рекомендації щодо форматування тексту
При форматуванні тексту на веб-сайті є кілька рекомендацій, які можуть допомогти зробити Ваш контент більш зрозумілим, зручним для читання і привабливим для відвідувачів. Ось кілька **загальних рекомендацій**, які варто врахувати.
- Використовуйте заголовки та підзаголовки для структурування вмісту вашої сторінки. Вони допоможуть читачам швидше зорієнтуватися і знайти необхідну інформацію. Використовуйте HTML-теги (наприклад, <h1>, <h2>, <h3>) для форматування заголовків.
- Розділяйте текст на невеликі абзаци, що містять одну думку або тему. Це полегшить читання і дозволить легше сприймати зміст.
- Використовуйте марковані або нумеровані списки для організації інформації. Це допоможе виділити ключові пункти і зробить їх більш помітними.
- Пишіть короткі речення та абзаци. Це полегшить сприйняття тексту і зробить його більш доступним для широкого кола читачів.
- Виділяйте ключові слова або фрази в тексті, використовуючи жирний шрифт або курсив. Це допоможе читачам швидше зорієнтуватися у контенті і знайти необхідну інформацію.
- Оберіть приємну комбінацію кольорів для тексту та фону, яка забезпечує достатню контрастність і не викликає змішання кольорів. Упевніться, що текст добре помітно на фоні.
- У тексті слід використовувати зображення та відео. Це допоможе підвищити зручність сприйняття інформації та зробить сторінку більш цікавою.
**Рекомендації щодо вирівнювання тексту.**
- Вирівнювання ліворуч є стандартним варіантом для більшості текстового контенту. Воно забезпечує читабельність та легкість сприйняття, оскільки рядки тексту розташовуються по лівому краю, а правий край стає нерегулярним.
- Вирівнювання праворуч використовується рідше, але може бути корисним для деяких елементів дизайну. Текст розташовується по правому краю, а лівий край стає нерегулярним. Використовуйте його з обережністю, оскільки це може ускладнити читання.
- Вирівнювання по центру використовується для здобуття визначеної симетрії та акценту на конкретному тексті або елементі. Використовуйте його для заголовків, банерів, цитат або інших важливих елементів, які ви хочете підкреслити.
- Рівномірне вирівнювання (вирівнювання за шириною) розподіляє текст по ширині контейнера або колонки, створюючи рівномірну візуальну структуру. Використовуйте його для таблиць, списків або інших випадків, де потрібно вирівняти текст у колонках або рядках.
 Редактор TinyMCE Joomla 4 **Рекомендації щодо заголовків тексту.**
- Використовуйте ієрархічну структуру заголовків, щоб візуально організувати і структурувати ваш текст. Використовуйте теги заголовків HTML (наприклад, h1, h2, h3) для встановлення різних рівнів заголовків. Головний заголовок (h1) має найбільший розмір і повинен відображати основний заголовок сторінки, а менші заголовки (h2, h3 і т.д.) можна використовувати для підрозділів.
- З точки зору SEO краще не використовувати заголовок першого рівня (h1) більше одного разу на сторінці. Також рекомендовано дотримуватися ієрархії рівнів заголовків. Наприклад, спочатку йде заголовок першого рівня, потім другого, а потім третього. Не слід ставити заголовок третього рівня вищим за заголовок другого рівня.
- Заголовки є важливими для SEO-оптимізації. Використовуйте ключові слова, які відповідають змісту розділу, у заголовках. Це допоможе пошуковим системам краще розуміти текст.
- Зробіть заголовки конкретними і описовими, щоб вони чітко передавали зміст відповідного розділу або блоку тексту. Заголовки мають привертати увагу користувача і давати йому уявлення про те, що він знайде в наступному відрізку тексту.
- Стежте за тим, щоб заголовки були достатньо короткими, але інформативними. Вони повинні передавати основну ідею розділу, але не бути занадто довгими, щоб уникнути розтягнення тексту на сторінці.
- Зробіть заголовки візуально привабливими та виокремленими від звичайного тексту. Використовуйте відповідні стилі, такі як збільшення розміру, жирний шрифт або інші візуальні ефекти, щоб зробити заголовки більш помітними.
 Форматування тексту **Рекомендації щодо маркерованих та нумерованих списків.**
- Переконайтеся, що ваш нумерований список має логічну послідовність пунктів. Використовуйте його для перерахування послідовних кроків, етапів або фактів.
- Намагайтеся зберігати кожен пункт списку якомога коротшим і зрозумілим. Ідеальною ситуацією є одне речення для кожного пункту. Якщо пункти стають занадто довгими, розгляньте можливість розбиття їх на декілька підпунктів.
- Використовуйте однаковий формат для всіх пунктів у списку. Наприклад, якщо ви починаєте пункти з великої літери і кінцеву пунктуацію, то використовуйте цей формат для всіх пунктів.
- Додайте візуальний розмежувальний знак (наприклад, крапку, дужку, тире) перед кожним пунктом списку. Це допоможе виділити кожен пункт і підкреслить його самостійність.
- Використовуйте числа або символи для нумерованого списку. Нумерація підкреслить послідовність пунктів і допоможе читачам легше розуміти структуру списку.
- Забезпечте відступи та достатні відстані між пунктами списку, щоб кожен пункт виділявся і був легко сприйнятим.
- Пам'ятайте, що пункти списку повинні бути змістовними та інформативними для читача. Вони повинні надавати важливу і конкретну інформацію.
 Нумерований список **Рекомендації щодо зображень.**
- Упевніться, що зображення відповідає контексту тексту і доповнює його. Використовуйте зображення, які ілюструють ключові поняття або допомагають у розумінні тексту.
- Забезпечте, щоб розмір файлу зображення був оптимізований для швидкгозавантаження сторінки. Використовуйте формати зображень, такі як JPEG, PNG та WebP, з оптимальним стисненням без втрати якості.
- Використовуйте високоякісні зображення з достатньою роздільною здатністю. Зображення повинні бути чіткими і не викликати розмиття або пікселяцію при збільшенні.
- Для кожного зображення встановлюйте атрибут «alt» з описом або коротким поясненням зображення. Це допоможе людям з вадами зору, а також покращить SEO-оптимізацію вашого сайту.
- Розмістіть зображення відповідно до контексту тексту. Використовуйте відповідні вирівнювання, такі як ліворуч, праворуч, по центру або «обтікання текстом», щоб досягти оптимального розташування зображення.
- Використовуйте рамки або межі навколо зображень, щоб їх виділити і відокремити від тексту. Це допоможе поліпшити їх видимість та зрозумілість.
- Мобільна сумісність: Переконайтеся, що зображення належним чином адаптуються до мобільних пристроїв.
 Зображення **Рекомендації щодо посилань.**
- Використовуйте тексти посилань, які чітко описують, куди вони ведуть. Уникайте загальних термінів, таких як «натисніть тут», натомість використовуйте описові фрази, що вказують на мету посилання.
- Якщо посилання ведуть на іншу сторінку або веб-сайт, розгляньте можливість відкриття його у новій вкладці браузера. Це дозволить користувачам зберігати ваш сайт і легко повернутися до нього.
- Використовуйте підкреслення або інші візуальні ефекти, щоб відрізнити посилання від звичайного тексту. Це допоможе користувачам легше розпізнати посилання та зробить їх більш сприйнятливими для кліків.
- Періодично перевіряйте посилання на вашому веб-сайті, щоб переконатися, що вони працюють належним чином. Пошкоджені або недійсні посилання можуть знизити користувальницький досвід.
- Пам'ятайте про доступність. Забезпечте, щоб посилання були достатньо видимими і мали чітку контрастність, щоб люди з різними вадами зору могли їх легко розпізнати. Крім того, уникайте виключно візуальних показників, наприклад, використання кольору як єдиного способу виділення посилання.
 Вставка посилання **Рекомендації щодо таблиці.**
- Прагніть до простоти та чіткої структури таблиці. Розділіть таблицю на колонки та рядки, які логічно організують вашу інформацію.
- Включіть заголовки для кожної колонки, щоб користувачам було легше розуміти, яка інформація відображена в кожній колонці.
- Розміщуйте дані у відповідних клітинах таблиці. Переконайтеся, що дані у кожній клітинці відповідають заголовку колонки.
- Використовуйте кольори або візуальне виділення, таке як сітка або фоновий колір, щоб покращити видимість та читабельність таблиці. Упевніться, що використовувані кольори не порушують доступності та контрастності.
- Забезпечте, щоб ваші таблиці були адаптивними і зручними для перегляду на різних пристроях. Вони повинні належним чином адаптуватися до розмірів екрану та бути легкими для читання навіть на мобільних пристроях.
- Використовуйте межі та відступи, щоб чітко розділяти клітинки таблиці і поліпшити їх вигляд. Розгляньте використання CSS-стилів для додаткового форматування.
- Якщо таблиця вимагає додаткових пояснень або описів, включіть їх під таблицею.
 Вставка таблиці У наступній статті «[Відеоурок з JCE editor в Joomla 4. Текстовий редактор](https://aleksius.com/uk/cms-joomla/rozshyrennia/videourok-z-jce-editor-v-joomla-4-tekstovyi-redaktor "Відеоурок з JCE editor в Joomla 4. Текстовий редактор")» ми розглянемо схожі дії, але в альтернативному текстовому редакторі.
| Автор статті – Хорошевський Олексій |
|---|
| [](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") |
| Схожі матеріали |
|---|
| - [ Відеоурок з компоненту Статті Joomla (com\_content) ](https://aleksius.com/uk/cms-joomla/statti-joomla) - [ Відеоурок з компоненту Com\_categories. Категорії Joomla ](https://aleksius.com/uk/cms-joomla/kategorii-joomla) - [ Відеоурок з меню Joomla. Компонент Com menus ](https://aleksius.com/uk/cms-joomla/menyu-dzhumla) - [ Відеоурок з Com modules. Модулі Joomla ](https://aleksius.com/uk/cms-joomla/moduli-joomla) - [ Відеоурок про стилі та шаблони Joomla ](https://aleksius.com/uk/cms-joomla/shablony-joomla) - [ Відеоурок «Рівні доступу, групи та користувачі Joomla» ](https://aleksius.com/uk/cms-joomla/korihstuvchi-joomla) - [ Відеоурок «Контакти Joomla» ](https://aleksius.com/uk/cms-joomla/kontaktih-joomla) |
**Корисні посилання:**
- [Офіційний сайт Джумла](https://www.joomla.org/).