Tinymce how to float an image?

javascript, tinymce

Solution

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.

Problem

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?

Original source