Search code examples
javascripttinymce

Tinymce how to float an image?


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?


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.