CKEditor 5 открыть изображение в полноэкранном режиме

Я использую CKEditor 5 в проекте Django, где я отображаю созданный контент на конечной странице. Моя обертка контента довольно узкая, и поэтому любые изображения, которые я добавляю через CKEditor, маленькие. Мне нужен способ сделать их кликабельными и либо открывать URL изображения в новой вкладке, либо иметь полноэкранный Bootstrap Modal, который показывает изображение шириной 100%.

Можно ли этого добиться, не изменяя JS-файлы CKeditor? Могу ли я создать JS скрипт, который заменяет теги изображений CKEditor на мой собственный HTML код при каждой загрузке страницы в front end? Или можно сделать так, чтобы нужный HTML-код сохранялся непосредственно в базе данных? (тогда сможет ли CKEditor понять этот новый код, когда я буду редактировать содержимое?).

Надеюсь, вы сможете помочь советами. Код не нужен. Спасибо!

Поэтому я решил, что самым простым способом будет замена тегов <img> при загрузке документа. Вот JS, который я придумал. Я упростил его, чтобы просто открывать изображения по их URL, но тот же метод можно использовать для добавления модалов к каждому изображению.

addEventListener('DOMContentLoaded', function() {
    let images = $('.ck-content img') // select all images inside the .ck-content container
    $.each(images, function(i, image) {
        image.outerHTML = `<a href="${image.src}">${image.innerHTML}</a>`
    });
});
Вернуться на верх