I am using TinyMCE V5 to enable my users to write email templates.
Since we're dealing with email templates, there's the Outlook problem. Outlook does not support a wide variety of styles and elements.
Here I am focused on aligning images in a way that Outlook can understand.
TinyMCE default implementation of alignment for images is:
style="float:right;"
to the img
tagstyle="display:block;margin-left:auto;margin-right:auto;"
to the img
tagOutlook doesn't support float nor auto margins.
Is there a way I can override how TinyMCE does alignment for images?
If so, I'd add text-align:right
to the p
tag, and make img
have display:block
.
I am aware that this would make it impossible to have two images aligned to different sides in the same paragraph, and I'm OK with that.
I opened a support ticket with Tiny, and they were quick and helpful in finding the solution, which was to use the formats
option like so:
tinymce.init({
selector: "textarea",
plugins: ["code", "image", "paste"],
toolbar: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image",
formats: {
alignleft: {selector: 'p', styles: {'text-align':'left'}},
aligncenter: {selector: 'p', styles: {'text-align':'center'}},
alignright: {selector: 'p', styles: {'text-align':'right'}}
},
});