D-Nik Editor Helper

D-Nik Editor Helper спрощує оформлення статей і покращує вигляд контенту на сайті.

Основні можливості плагіну:

1. Вставка стилізованих сповіщень та блоків.
2. Додавання галереї зображень.
3. Вбудовування відео з TikTok.
4. Оформлення таблиць.
5. Відображення PDF-документів в статті.

Як вставити в статтю стилізовані сповіщення та блоки

За допомогою цієї функції ви можете швидко виділити важливу інформацію в статті, винісши її в окремий блок або змінивши фон потрібного тексту, без ручного редагування HTML.

Щоб створити стилізований блок:

1. В редакторі статті виділіть текст, який має стати сповіщенням (alert).
2. Натисніть кнопку D-Nik Editor під полем редактора або кнопку плагіну на панелі редактора.
3. У вікні, що з’явилося, у блоці «Вибір кольору» оберіть потрібний тип (колір) сповіщення.
4. Натисніть кнопку «Застосувати».

Після цього виділений текст буде автоматично обгорнутий у HTML-блок із відповідним CSS-класом.

• 
• 
• 
•  

Для видалення оформлення:

1. Виділіть текст всередині стилізованого блоку.
2. Відкрийте вікно плагіну.
3. Натисніть кнопку «Очистити».

Плагін прибере обгортку сповіщення, залишивши лише звичайний текст.

Функція працює з TinyMCE, JCE та стандартним редактором Joomla, незалежно від режиму: візуального чи редагування HTML.

Доступні типи сповіщень, якщо шаблон вашого сайту підтримує Bootstrap

Якщо ваш сайт не підтримує Bootstrap, то стилі (CSS) блоків сповіщень потрібно створити самостійно.

Більш детально про Bootstrap Alerts можете почитати тут https://getbootstrap.com/docs/5.3/components/alerts/

Створення власних стилів сповіщень

Функція вставки стилізованих сповіщень та блоків працює таким чином, що після натискання кнопки «Застосувати», виділений текст обгортається у тег <div> із відповідним класом. Наприклад, для сповіщення «Success» буде створено такий код:

<div class="alert alert-success" role="alert">[ваш текст]</div>

Якщо ваш шаблон не підтримує Bootstrap, або ви хочете змінити вигляд сповіщень, то потрібно додати відповідні стилі до CSS-файлу вашого сайту.

Наприклад, щоб оформити вигляд блоку з вертикальною лінією збоку, потрібно додати в файл template.css (у вас це може бути інший файл) наступне правило:

.alert-side-line {
    border-left: 5px solid #6c757d; /* Колір вертикальної лінії */
    background-color: #f8f9fa; /* Фон блоку */
    color: #212529; /* Колір тексту */
    padding: 1rem 1.25rem; /* Внутрішні відступи: 1rem зверху/знизу, 1.25rem зліва/справа */
    margin: 1rem 0; /* Зовнішні відступи: 1rem зверху та знизу, 0 з боків */
    border-radius: 0.375rem; /* Заокруглення кутів блоку */
}

Як додати галерею зображень в статтю

До D-Nik Editor Helper додається плагін Simple Image Gallery. З його допомогою ви можете перетворити будь-яку папку з картинками, розташовану на вашому веб-сайті Joomla, на галерею зображень з дуже гарним попереднім переглядом в Lightbox.

Для створення такої галереї потрібно огорнути шлях до потрібної папки в тег {gallery}...{/gallery}.

Наприклад, якщо у вас є папка під назвою «myPhotos», розташована в images/stories/, то вставивши тег {gallery}stories/myPhotos{/gallery} в будь-яку статтю Joomla, ви створите галерею картинок.

Під час створення галереї, з оригінальних зображень формуються і кешуються мініатюри. Це робиться для швидшого завантаження сторінки з картинками. Коли користувач натискає на мініатюру, у спливаючому вікні відображається оригінальне зображення.

Для того щоб не вводити вручну теги {gallery}…{/gallery}, ми реалізували в D-Nik Editor Helper дві функції, які роблять це за вас.

Вибір папки з картинками для створення галереї через пошук:

1. Під час оформлення статті, встановіть текстовий курсор в те місце де ви хотіли б створити галерею картинок.
2. Натисніть по «D-Nik Editor», щоб відкрити панель інструментів плагіну.
3. В блоці «Вибір папки з картинками» ви можете одразу обрати потрібну папку з випадаючого списку. А можете спочатку скористатися автопошуком, ввівши у відповідне поле декілька символів з назви папки (або шляху до неї), щоб легше було знайти потрібний каталог.
4. Після того як ви обрали потрібну папку, натисніть «Прикріпити папку з картинками».

Якщо ви все зробили правильно, то в тому місці де було встановлено текстовий курсор з’явиться шлях до вказаної вами папки огорнутий в теги {gallery}…{/gallery}.

Самостійне визначення шляху до папки з картинками

Якщо ви самостійно хочете вказати шлях до потрібного каталогу зображень, то для цього в D-Nik Editor передбачено блок «Огорнути в {gallery}». Тут ви можете вказати як повний так і відносний шлях до картинок.

Розглянемо приклад, якщо ви завантажили картинку на сервер в папку images/stories/2026.

1. Для того щоб не вводити шлях до цієї папки вручну, можна скопіювати посилання на будь-яку картинку, яка міститься в ній:
• Відкрийте Медіа-менеджер.
• Перейдіть в папку stories.
• Перейдіть в папку 2026.
• Клацніть по іконці з трьома крапками, яка знаходиться у правому верхньому куті будь-якого зображення в папці 2026.
• Оберіть пункт «Отримати посилання».
• Натисніть «Отримати посилання».
• Клацніть по «Скопіювати в буфер обміну».
2. Перейдіть в редактор статті.
3. Встановіть текстовий курсор в те місце де потрібно відобразити галерею.
4. Натисніть на «D-Nik Editor».
5. Вставте скопійоване посилання у відповідне поле блоку «Огорнути в {gallery}».
6. Натисніть «Огорнути в {gallery}».

Якщо ви все зробили правильно, то в тому місці де було встановлено текстовий курсор, ви побачите шлях до папки з картинками огорнутий в тег {gallery}…{/gallery}.

Доменне ім’я та назву файлу з цього шляху D-Nik Editor прибере.

Як додати відео з TikTok в статтю Joomla

Для того, щоб додати в статтю відео з TikTok треба:

1. Скопіювати посилання на відеоролик.
2. Встановити курсор вводу тексту в те місце де ви хочете відобразити програвач TikTok.
3. Натиснути на D-Nik Editor.
4. Вставити посилання у відповідне поле блоку «Відео з TikTok».
5. Натиснути «Додати відео з TikTok».

Якщо ви все зробили правильно, то в тому місці де було встановлено редактор вводу тексту, з'явиться посилання на відео огорнуте в тег {tiktok}…{/tiktok}.

Як оформити таблицю за допомогою D-Nik Editor

Якщо ваш шаблон підтримує Bootstrap, то зробивши всього-на-всього декілька кліків мишкою, ви можете гарно оформити таблиці в своїх статтях.

Додавання горизонтальної прокрутки для таблиці

Великі таблиці з багатьма колонками часто «ламають» верстку на мобільних пристроях, планшетах та ПК з маленьким монітором. Щоб цього уникнути, краще додавати горизонтальну полосу прокрутки, щоб користувач міг прогорнути таблицю вліво-вправо і ознайомитися із повним вмістом усіх її комірок.

Щоб додати горизонтальну полосу прокрутки:

1. Виділіть таблицю або її HTML-код в редакторі.
2. Натисніть кнопку D-Nik Editor.
3. У розділі «Робота з таблицями» натисніть «Вставити полосу прокрутки».

Якщо ви все зробили правильно, то плагін автоматично огорне таблицю в контейнер <div class="table-responsive">…</div>, завдяки чому таблиця стане адаптивною і отримає горизонтальну прокрутку на малих екранах.

Застосування смугастого стилю (Striped table)

Для покращення читабельності великих таблиць, Bootstrap пропонує смугастий стиль рядків. Використовуючи D-Nik Editor, ви можете миттєво застосувати стиль table-striped до своєї таблиці:

1. Переведіть редактор в режим перегляду HTM-коду.
2. Поставте курсор всередину тегу <table>.
3. Відкрийте D-Nik Editor.
4. Натисніть кнопку «Смугаста таблиця».

В результаті до таблиці буде додано клас class="table table-striped" і рядки автоматично отримають чергування фону.

Як вставити PDF в статтю

Плагін D-Nik Editor Helper дозволяє вставляти PDF-файли в статті Joomla без ручного написання тегів.

Використовуйте блок «Вставити PDF з сайту» для додавання в статтю файлів, які вже завантажені на ваш сайт (зазвичай у папку /images/). Для цього:

1. Скопіюйте посилання на PDF-файл на вашому сайті (наприклад: https://site.com/images/docs/catalog.pdf).
2. Відкрийте статтю в адмінці Joomla.
3. Натисніть кнопку D-Nik Editor під полем редактора.
4. Перейдіть до блоку «Вставити PDF з сайту».
5. Вставте посилання на PDF у поле вводу.
6. Оберіть один із варіантів:
• Embed PDF — для стандартного вбудованого перегляду;
• FlipBook PDF — для перегляду у форматі «перегортання сторінок» (якщо підтримується відповідним плагіном).

Якщо ви все зробили правильно, то у вікні редактору матеріалу ви побачите відносне посилання на ваш PDF огорнуте в теги {embedpdf}…{/embedpdf} або {flipbookpdf}…{/flipbookpdf}.

Більш того, плагін приведе посилання до коректного формату, прибравши домен і зайві частини URL.

Приклад:

{embedpdf}/images/docs/catalog.pdf{/embedpdf}

{flipbookpdf}/images/docs/catalog.pdf{/flipbookpdf}

Як додати в статтю PDF з Google Drive

Щоб додати в статтю PDF з Google Drive або іншого серверу, вставте посилання у відповідне поле блоку «Вставити PDF з Google Drive».