Skip to content
Small man wearing a blue shirt and jeans writing on a document that's laying down on a large laptop.

Doing Wonders With Images In the Froala Editor

Froala Editor can enhance your editing experience by providing methods to customize and manipulate creative images. After all, a picture is worth a thousand words and plain text without pictures can be dry and boring.

In this post we’ll explore how users can add and customize image buttons, styles and perform various operations on the image such as change image alignment, size, insert links, add captions and so on.

Adding and Customizing Image Buttons

With Froala, users can develop custom buttons on an image to provide functionality such as Display (Inline or Break text), Align (left, center, right, justify), Info (image info) and Remove (delete image). All you need to do is define these buttons in “imageEditButtons” in JS.

Step 1:
Include Froala Editor CSS and JS File under the Resources section:
https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css
https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css
https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js

Step 2:
Add the HTML code of the editor on the page.

<div id="froala-editor">
  <p> Click on the image below to see the custom image button.</p>
  <img src="https://froala.net/assets/editor/docs/photo14.jpg" class="fr-fil" alt="book" width="150"/>
</div>

Step 3:
Add the JS code of the editor by defining customized buttons such as ‘imageDisplay’, ‘imageAlign’, ‘imageInfo’ and ‘imageRemove’ buttons. 

FroalaEditor.DefineIcon('imageInfo', {NAME: 'info', SVG_KEY: 'help'});
FroalaEditor.RegisterCommand('imageInfo', {
  title: 'Info',
  focus: false,
  undo: false,
  refreshAfterCallback: false,
  callback: function () {
    var $img = this.image.get();
    alert($img.attr('src'));
  }
});

new FroalaEditor('div#froala-editor', {
  // Set image buttons, including the name
  // of the buttons defined in customImageButtons.
  imageEditButtons: ['imageDisplay', 'imageAlign', 'imageInfo', 'imageRemove']
})

Try it out in JSFiddle:

Final Output of this feature (You can see 4 new Custom Buttons)


IMAGE STYLES

Users can define their own image styles using “imageStyles” options. For example, when you click the image, custom styling options are presented. Here we are using “Solid” and “Blur” effects for the selected image.  

Follow Steps 1 & 2 above.

Step 3: Add the JS Code of the editor by defining Image classes. Here we have assigned two classes and named them ‘Solid’ & ‘Blur’ for the desired effects.

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']
})

Try it out in JSFiddle:

              Final Output of this feature (Image Style)


INIT ON IMAGE

This feature can be used to initialize the WYSIWYG HTML editor on an image. After selecting the image, you can explore a wide array of options such as Replace, Align, Image Caption, Remove, Insert Link, Display, Style, Alternative Text, and Change Size. 
Here’s how to enable this feature.

Step 1:
Include Froala Editor CSS and JS File under the Resources section:
https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css
https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css
https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js

Step 2:
Add the HTML code of the editor on the page.

<img id="edit" class="fr-fil fr-dib" src="https://froala.net/assets/editor/docs/photo14.jpg" alt="Old Clock" width="300"/>

Step 3:
Include the JS code of the editor and set attribute as ‘img#edit’ 

new FroalaEditor('img#edit');

Try it out in JSFiddle:

Final Output of this feature (Init On Image)

Try Froala Editor

Froala Editor offers a free trial so you can try out the features before you decide to buy. We promise you’ll be amazed how easy and user friendly it is. Take a tour and start creating beautiful content today.

4 Comments

  1. How can the horizontal and vertical padding be adjusted for uploaded images? CK Editor does a good job with that functionality.

  2. how we can add image caption if me add image caption then it show infront of image why ?


Add a Comment

Your email address will not be published. Required fields are marked *