Doing Wonders With Images In the Froala Editor

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

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 look at how users can add and customize image buttons, image styles, and perform various operations on images in the Froala HTML Code Editor, such as changing image alignment and size, inserting links and images, adding captions, and so on. So, let’s get coding in the editor with HTML and JS code!

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:

Custom image upload button in a web editor interface
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:

Web editor interface initialized on an image, showing editing tools
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 at how easy and user-friendly it is. Take a tour and start creating beautiful content today.

Posted on April 1, 2020

Kirti Joshi

Kirti Joshia former writer for Froala, showcased exceptional talent and dedication during their tenure with the company.

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.

    Hide Show