Клик по изображению в TinyMCE открывает его во всплывающем окне?

InstantCMS 2.X

Настройка открытия изображений во всплывающем окне (FancyBox) в TinyMCE (InstantCMS 2.17 +)

#1 26 марта 2025 в 06:57

В InstantCMS 2.17 + при клике по изображению в редакторе TinyMCE оно вставляется в текст, но не открывается для просмотра.

Есть ли встроенный способ сделать так, чтобы изображения при клике открывались во всплывающем окне (например, через FancyBox)?

Если да — как это включить? Если нет — куда и какой код нужно добавить для такой функциональности?

(Используется стандартный шаблон, без модификаций ядра).

Рабочий проект NEURO-AI.ru

#2 26 марта 2025 в 07:16

Clear, если вставляется ужимка до размера то не открывается

Если в настройках загрузки изображения изменить размер то по клику открывается

Я ставил открыть по клику оригинал

А минимальный размер шириной 1024

Укажу путь. Запаяю крышу.

#3 26 марта 2025 в 09:59

Clear, если вставляется ужимка до размера то не открывается
WadimKow

В смысле, у меня изображение всегда больше чем контент, но это никак не работает в тексте. Как это у тебя получилось то ?

Решил проблему с FancyBox. Просто подключил FancyBox 4 и добавил скрипт:

В настройках шаблона Готовый HTML, добавляемый в тег <head> страницы

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css">

Спойлер

...

перед закрывающим тегом </body> в файле main.tpl.php:

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.content_item img').forEach(img => {
        if (!img.parentElement.matches('a')) {
            let link = document.createElement('a');
            link.href = img.src;
            link.setAttribute('data-fancybox', 'gallery');
            img.parentElement.insertBefore(link, img);
            link.appendChild(img);
        }
    });
    Fancybox.bind('.content_item [data-fancybox="gallery"]', {
        loop: false,
        arrows: true,
        on: { init: f => { if (f.items.length === 1) f.options.Navigation = false; } }
    });
});
</script>

Всё работает, ошибок нет. Класс .content_item подставьте свой, если другой.

Рабочий проект NEURO-AI.ru

Сегодня в 09:46

#4 26 марта 2025 в 10:05

Я ни делал правок шаблона и не ставил ничего стороннего

На память не помню. Час полазил по форуму и нашёл рецепт в настройках

Сделал по найденой инструкции за 3 минуты и ву-а-ля

Укажу путь. Запаяю крышу.

Считающие поля в типах контент

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Клик по изображению в TinyMCE открывает его во всплывающем окне?

Похожие темы

как установить TinyMCE на InstantCMS 2.14.1?

Подсветка синтаксиса html кода в TinyMCE5

TinyMCE file manager плагин

Смайлы в Tinymce не работают

Tinymce и плагин tinymce-table-of-contents

Добавление плагинов TinyMCE

webp не открывается

Форма заказа в один клик во всплывающем окне

Похожее в блогах

TinyMce 4.1.4 - пятый редактор для ICMS 2.1.1

Файловый менеджер - загрузчик файлов для редактора TinyMCE 4

Добавление фото из альбома фотогалереи . Компонент

Вывод изображений в модальном окне загруженными WYSIWYG редактором.

InstantCMS Team

О проекте

Поддержка

Дополнения