tinymcetinymce-5

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


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:

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.


Solution

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