How to override TinyMCE default implementation of right alignment for images?

Question

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:

• for right alignment > adds style="float:right;" to the img tag
• for center alignment > adds style="display:block;margin-left:auto;margin-right:auto;" to the img tag

Outlook 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.

Answer 1

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'}}
    },
});