Tinymce how to float an image?

Question

By default in tinymce there are no image floating, only image, text alignment should I do it manually or there already are some plugins? can't find any...or how can I get the current selected elements and float them?

Answer 1

you can use style_formats option.
Document is here: https://www.tiny.cloud/docs/configure/content-formatting/#style_formats

This option enables you to add more advanced style formats for text and other elements to the editor. The value of this option will be rendered as styles in the Formats dropdown.

You can go like this when you initialize a tinymce.

tinymce.init({
    ...
    style_formats: [
    {
        title: 'Image Left',
        selector: 'img',
        styles: {
            'float': 'left', 
            'margin': '0 10px 0 10px'
        }
     },
     {
         title: 'Image Right',
         selector: 'img', 
         styles: {
             'float': 'right', 
             'margin': '0 0 10px 10px'
         }
     }
]
});

Hope this helps.

Answer 2

In TinyMce v4 and v5, when you have the image plugin in place,

plugins: [
    "... image"
],

then you can use the image_class_list property to allow the user to add classes to the images.

For instance, in the example below, the user makes the image float right, selecting the 'Right' option. I have assigned to that option some TailwindCSS classes. The one that makes the image float is float-right.

image_class_list: [
    { title: 'Left', value: '' },
    { title: 'Right', value: 'w-full md:float-right' }
],

Here the official documentation of image_class_list: https://www.tiny.cloud/docs/plugins/opensource/image/#image_class_list

If you want also to make the image float in the editor you also have to add the content_style property and assign the corresponding CSS attributes.

content_style: "body img.md\\:float-right{ float: right; }"
               

Here the official documentation of content_style: https://www.tiny.cloud/docs/configure/content-appearance/#content_style