Is there a way to run JavaScript snippet after inserting an image in CKEditor?

Question

I have a very interesting situation that I hope someone can help me with. I currently have a custom email campaign system set up for a client that is coded using cold fusion (but this isn't relevant) anyway, What they see in the campaign design bit is a CKEditor for every section (if they decide they want more than one section.) Here's my problem, the clients sometimes don't specify widths on their images, and sometimes they use images with widths 5k+. So I have in the email template:

    <style type="text/css">
        img {
            max-width: 100% !important;
            height: auto !important;
        }
    </style>

Which works great... except for Gmail, one of the most popular email clients.

What I dreamed up: somewhere in CKEditor, it would be really nice if after an image was inserted into the rich text editor, this snippet would be executed:

document.getElementsByTagName("img")[0].setAttribute("max-width", "800px");
document.getElementsByTagName("img")[0].setAttribute("height", "auto");

or

img.style.maxWidth = "800px";
img.style.height = "auto";

Is that possible? or am I just spinning my wheels? Thanks for your time and patience!

You can take image plugin dialog (image.js) and make changes in it (most probably in setupDimention function). Non-minified version is available on CKEditor site. — Alex Kudryashev
– Alex Kudryashev, Commented Jul 21, 2016 at 16:16

AlfonsoML · Accepted Answer · 2016-07-21 17:37:30Z

1

You're proposing just to patch the problem because the image will be oversized and should be scaled correctly before it's sent out, but if you want to do it that way you can write an output filter for CKEditor.
Something along this: (untested)

var dataProcessor = editor.dataProcessor,
    htmlFilter = dataProcessor && dataProcessor.htmlFilter;

// htmlFilter : conversion from internal data to html output.
htmlFilter.addRules( {
    elements :
    {
        'img' : function( element ) {

            element.attributes.style = 'max-width: 800px; height: auto';

            return element;
        }
    }
});

Obviously the correct solution is to scale down the image to max: 800px when you save it on your system or even before it's uploaded.

answered Jul 21, 2016 at 17:37

AlfonsoML

12.7k2 gold badges49 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is there a way to run JavaScript snippet after inserting an image in CKEditor?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related