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 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:

 

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:

 

 

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:

 

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.