Days
Hours
Minutes
Seconds
x

Froala Editor v4.3 is hereLEARN MORE

Skip to content

Images

Image Styles

While using the image.min.js plugin it is possible to add custom style on the selected image inside the WYSIWYG HTML editor.

image-styles

Try it yourself:

The classes should be defined in CSS, otherwise no changes will be visible on the image's appearance.

book

You can define your own image styles using the imageStyles option. This option is an Object where the key represents the class name and its value is the style name that appears in the dropdown list. It is important to have unique keys otherwise they will not work properly.

By default you can select multiple image styles at a time. If you want to toggle them and allow only one style to be selected at a time use the imageMultipleStyles option.

Edit in JSFiddle

HTML

<div id="froala-editor">
  <p>The classes should be defined in CSS, otherwise no changes will be visible on the image's appearance.</p>
  <img src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" class="fr-fil" alt="book" width="150"/>
</div>

CSS

<style>
  .class1 {
    border-radius: 10%;
    border: 2px solid #efefef;
  }

  .class2 {
    opacity: 0.5;
  }
</style>

JAVASCRIPT

<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      // Define new image styles.
      imageStyles: {
        class1: 'Class 1',
        class2: 'Class 2'
      },
      imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize']
    })
  });
</script>