javascriptjquerycsstinymce

Changing how TinyMCE aligns images center


I'm using TinyMCE 4.0 to construct HTML emails, I need to change the way that TinyMCE centers the image.

I've seen solutions after searching around which involve using classes, but this is not the way I want to do this due wanting to keep email client compatibility..

I've found where img's are centered, but can't find a way to do what I want to do

aligncenter: [{
    selector: "figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li",
    styles: {
        textAlign: "center"
    },
    defaultBlock: "div"
}, {
    selector: "img",
    collapsed: !1,
    styles: {
        display: "block",
        marginLeft: "auto",
        marginRight: "auto"
    }
}

All I need to do is..

When a img is selected and aligncenter is clicked, wrap the image in

<p style="text-align: center"><img /></p>

If anybody has any tips on how this can be achieved it would be much appreciated because I'm pulling my hair out trying to provide a solution to this problem at present.

Regards,

Charj


Solution

  • I think you can try to overwrite built in format "aligncenter" or create you own format for this. You can find info here. http://www.tinymce.com/tryit/custom_formats.php

    And example of usage here

    http://www.tinymce.com/tryit/custom_formats.php