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».