Image styles in Froala WYSIWYG Editor V3

HTML

<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<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://froala.net/assets/editor/docs/photo14.jpg" class="fr-fil" alt="book" width="150"/>
</div>

CSS

.class1 {
  border-radius: 5px;
  border: 2px solid #efefef;
  padding: 50px!important;
}

.class2 {
  opacity: 0.5;
}

JavaScript

new FroalaEditor('div#froala-editor', {
  // Define new image styles.
  imageStyles: {
    class1: 'Solid',
    class2: 'Blur',
    
  },
  imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize']
})