CKEditor 5 open image in full screen

I am using CKEditor 5 in a Django project, where I display the created content on a front end page. My content wrapper is quite narrow, and therefore any images that I add via the CKEditor are small. I need a way to make them clickable and either open the image URL in a new tab or have a full screen Bootstrap Modal that shows the 100% width image.

Would this be achievable without altering the CKeditor JS files? Can I create a JS script that replaces CKEditor image tags with my own HTML code on every page load in the front end? Or can it be done so that the needed HTML code is directly saved to the database? (then can the CKEditor understand that new code when I edit the content?).

I hope you can help with some tips. No code needed. Thank you!

So I figured that the easiest way would be to replace the <img> tags on document load. Here is the JS that I came up with. I simplified it to just open images via their URL, but the same method can be used to add modals to each image.

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>`
    });
});
Back to Top