Free In-Editor Image Editing for Froala with Filerobot Plugin

Froala v5.2.0 ships with a new plugin that brings a full-featured image editor directly into your editor workflow. This guide walks you through everything you need to know about the Filerobot Image Editor (FIE) Plugin: what it does, how to install it, all of its configuration options, its event hooks, and how it compares to the other advanced image editing integrations Froala supports.

Key Takeaways

• The Filerobot plugin is free, open-source, and requires no third-party account or API key.
• It adds an “Advanced Edit” button to Froala’s image toolbar, opening a full editing suite (annotations, filters, fine-tune, resize, rotate, watermark, crop) as a modal without leaving the editor.
• The plugin ships with two configuration options (filerobotOptions and FilerobotImageEditor) and five lifecycle events (beforeOpen, opened, beforeSave, saved, closed) giving you precise control over the editing experience.
• Froala offers two other advanced image editing integrations — Image TUI (free, open-source) and Filestack Transformation (cloud-based, paid) — covered in the Choosing the Right Integration section below.

What Is the Filerobot Image Editor Plugin?

The Filerobot Image Editor Plugin integrates Scaleflex’s Filerobot Image Editor directly into Froala. When a user selects an image in the editor, a new “Advanced Edit” button appears in the image toolbar. Clicking it opens a full editing suite as a modal overlay without leaving the editor context.

The editing suite supports:

• Annotations — draw shapes, add text, arrows, and freehand lines directly on the image
• Filters — apply Instagram-style visual filters
• Fine-tune — adjust brightness, contrast, saturation, and sharpness
• Resize — change image dimensions with aspect ratio control
• Rotate & Flip — rotate in configurable increments, flip horizontally or vertically
• Watermark — overlay a logo or text watermark
• Crop — crop to a custom ratio or preset dimensions

When the user clicks Save, the edited image replaces the original inline without page reload or manual re-upload step.

Choosing the Right Image Editing Integration

Before diving into setup, it’s worth knowing that Froala offers three different pathways for advanced in-editor image editing. Each targets a different set of requirements:

Filerobot Image Editor Plugin (new in v5.2.0): Free and open-source. Actively maintained by Scaleflex. Delivers a rich, modern editing UI with annotations, filters, fine-tuning, watermarks, and resize out of the box. No account or API key needed. A solid choice when you want a capable, dependency-light solution with no ongoing service cost.

Image TUI Plugin: Free and open-source (MIT). Built on TOAST UI Image Editor and bundled with Froala as imageTUI. Provides filters, cropping, drawing, and sticker support. Worth noting that the upstream TUI Image Editor project has not seen active maintenance in some time, which may be a consideration for long-term projects.

Filestack Transformation (via the Filestack Plugin): A commercially integrated solution that pairs Froala with Filestack’s cloud-based transformation pipeline. Delivers powerful server-side image processing and CDN delivery alongside Filestack’s file picker and storage capabilities. Requires a Filestack account and subscription. The right fit when you’re already in the Filestack ecosystem or need cloud-native image processing at scale.

All three integrate cleanly into Froala’s toolbar without requiring custom UI work on your part. The choice comes down to your project’s constraints around cost, maintenance expectations, and infrastructure.

Filerobot Image Editor Setup

Step 1: Install the Plugin Assets

The Filerobot plugin ships inside the froala-editor npm package as of v5.2.0.

Via npm:

npm install froala-editor@latest

Plugin files (local paths after npm install):

# JavaScript
node_modules/froala-editor/js/third_party/imageFileRobot.min.js

# CSS
node_modules/froala-editor/css/third_party/imageFileRobot.min.css

Via CDN (for plain HTML projects):

<!-- Filerobot Image Editor dependency — load this first -->
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>

<!-- Froala core -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

<!-- Filerobot plugin -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/third_party/imageFileRobot.min.css">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/third_party/imageFileRobot.min.js"></script>

Important: The Filerobot Image Editor script from Scaleflex must be loaded before the Froala plugin script. The plugin expects window.FilerobotImageEditor to exist at initialization time. If you load them in the wrong order, the plugin will silently fail to open.

Step 2: Basic Setup (Vanilla JS)

The minimum configuration to get the plugin running:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Filerobot Image Editor (load before Froala plugin) -->
  <script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>

  <!-- Froala core assets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css">
  <script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

  <!-- Filerobot plugin assets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/third_party/imageFileRobot.min.css">
  <script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/third_party/imageFileRobot.min.js"></script>
</head>
<body>
  <div id="editor">
    <p>Insert an image to try the advanced editor.</p>
  </div>

  <script>
    new FroalaEditor('#editor', {
      // Enable both the core image plugin and the Filerobot plugin
      pluginsEnabled: ['image', 'imageFilerobot'],

      // Your Froala license key
      key: 'YOUR_FROALA_LICENSE_KEY'
    });
  </script>
</body>
</html>

That’s all it takes for a working integration. Once an image is inserted and selected, you’ll see the Advanced Edit button in the image toolbar.

Step 3: Configuration Options

The plugin exposes two options under the main Froala options object.

filerobotOptions (Object)

This option is passed directly to the Filerobot Image Editor instance and controls the editor’s UI and behavior. The full default configuration Froala ships with is:

filerobotOptions: {
  theme: {
    palette: {
      'bg-primary-active': '#4CA6FF'  // Accent color for active UI elements
    },
    typography: {
      fontFamily: 'Roboto, Arial'
    }
  },
  annotationsCommon: {
    fill: '#ff0000'  // Default fill color for annotations
  },
  Text: { text: 'Enter text...' },       // Default text for text annotations
  Rotate: { angle: 90, componentType: 'buttons' },  // Rotation step and control type
  tabsIds: ['Adjust', 'Annotate', 'Filters', 'Finetune', 'Resize', 'Watermark'], // Visible tabs
  defaultTabId: 'Annotate',   // Tab shown when the editor opens
  defaultToolId: 'Text',      // Tool selected on load within the default tab
  savingPixelRatio: 0,        // 0 = use original image pixel ratio
  previewPixelRatio: 0,       // 0 = use screen pixel ratio for preview
  closeAfterSave: true,       // Close the editor modal automatically after saving
  defaultSavedImageType: 'png' // Output format: 'png', 'jpeg', or 'webp'
}

You override only the properties you need — Froala merges your config with the defaults.

FilerobotImageEditor (Object)

Use this option when the Filerobot library is not available on window — for example, when you import it as an ES module rather than loading it via a <script> tag.

import FilerobotImageEditor from 'filerobot-image-editor';

new FroalaEditor('#editor', {
  pluginsEnabled: ['image', 'imageFilerobot'],
  // Pass the constructor directly instead of relying on window.FilerobotImageEditor
  FilerobotImageEditor: FilerobotImageEditor
});

Default: window.FilerobotImageEditor

Step 4: Practical Configuration Examples

Restrict the editor to only Crop and Resize

new FroalaEditor('#editor', {
  pluginsEnabled: ['image', 'imageFilerobot'],
  key: 'YOUR_FROALA_LICENSE_KEY',

  filerobotOptions: {
    // Only show Adjust and Resize tabs — remove annotation and filter clutter
    tabsIds: ['Adjust', 'Resize'],
    defaultTabId: 'Adjust',
    defaultToolId: 'Crop',

    // Save as JPEG for smaller file sizes
    defaultSavedImageType: 'jpeg',

    // Keep the editor open after saving so users can make additional adjustments
    closeAfterSave: false
  }
});

Why this matters: Restricting tabs reduces cognitive overhead for users who only need basic adjustments. It also reduces the initial render cost of the editor modal since unused tool panels are never instantiated.

Custom theme to match your app’s branding

new FroalaEditor('#editor', {
  pluginsEnabled: ['image', 'imageFilerobot'],
  key: 'YOUR_FROALA_LICENSE_KEY',

  filerobotOptions: {
    theme: {
      palette: {
        'bg-primary-active': '#6C47FF',  // Your brand purple
        'bg-secondary': '#F5F5F5'
      },
      typography: {
        fontFamily: 'Inter, sans-serif'
      }
    },
    annotationsCommon: {
      fill: '#6C47FF'  // Match annotation color to your brand
    },
    tabsIds: ['Adjust', 'Annotate', 'Filters', 'Finetune', 'Resize', 'Watermark'],
    defaultTabId: 'Filters'  // Open on Filters tab by default
  }
});

Using the ES module import (for bundled projects)

// Import the Filerobot Image Editor as a module
import FilerobotImageEditor from 'filerobot-image-editor';

// Import Froala and the plugin
import FroalaEditor from 'froala-editor';
import 'froala-editor/js/plugins/image.min.js';
import 'froala-editor/js/third_party/imageFileRobot.min.js';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/third_party/imageFileRobot.min.css';

new FroalaEditor('#editor', {
  pluginsEnabled: ['image', 'imageFilerobot'],
  key: 'YOUR_FROALA_LICENSE_KEY',

  // Provide the class directly — no window global needed
  FilerobotImageEditor: FilerobotImageEditor,

  filerobotOptions: {
    tabsIds: ['Adjust', 'Annotate', 'Filters', 'Resize'],
    defaultTabId: 'Annotate',
    defaultSavedImageType: 'png'
  }
});

Event Reference

The plugin emits five lifecycle events you can hook into:

The editedImageObject passed to filerobot.beforeSave and filerobot.saved contains the edited image data and metadata from the Filerobot editor. You can use filerobot.beforeSave to intercept the save — for example, to upload the image to your own server first, or to apply additional server-side processing before the image src is updated in the editor.

events: {
  'filerobot.beforeSave': function (editedImageObject) {
    // Log the object shape to understand what's available
    console.log(editedImageObject);

    // Example: prevent the default save behavior by returning false,
    // then handle the upload yourself
    // return false;
  },

  'filerobot.saved': function (editedImageObject) {
    // Track edits in your analytics or audit log
    trackImageEdit({ timestamp: Date.now(), imageData: editedImageObject });
  }
}

Conclusion

The Filerobot Image Editor Plugin is a meaningful addition to Froala’s image management capabilities. It gives your users a modern, fully-featured editing suite without leaving the editor — and without adding a paid service dependency. The event lifecycle is clean, the configuration API maps directly to the upstream Filerobot options, and the ES module import path makes it easy to integrate into any modern bundled project.

Whether the Filerobot plugin, Image TUI, or Filestack Transformation is the right fit depends on your specific requirements around maintenance expectations, infrastructure, and budget. All three are first-class Froala integrations with clear documentation and stable APIs.

Try Froala’s Filerobot plugin in your editor setup and give users a faster way to annotate, crop, resize, watermark, and save images without leaving the editing workflow.

FAQ

What image formats does the plugin support as output?

The plugin outputs png, jpeg, or webp. Control this with the defaultSavedImageType option inside filerobotOptions. PNG is the default. Use jpeg when file size matters more than transparency support, and webp for modern browsers where you want both compression and quality.

Will the edited image be re-uploaded to my server automatically?

No. By default, the plugin replaces the image’s src attribute in the editor with a base64 data URL of the edited image. If you need the edited image uploaded to your server, use the filerobot.beforeSave or filerobot.saved events to intercept the save, upload the image yourself, and update the src with the returned URL before it’s committed to the editor content.

Can I limit which editing tools are available to users?

Yes. Use the tabsIds property inside filerobotOptions to specify exactly which tabs appear. For example, passing tabsIds: ['Adjust', 'Resize'] removes Annotations, Filters, Fine-tune, and Watermark entirely. You can also control which tool is active on open via defaultTabId and defaultToolId.

The “Advanced Edit” button isn’t appearing in the image toolbar. What’s wrong?

Check three things in order. First, confirm that both 'image' and 'imageFilerobot' are present in your pluginsEnabled array. The Filerobot plugin won’t register without the core image plugin.

Second, verify that the Scaleflex script loads before the Froala plugin script; if window.FilerobotImageEditor is undefined at plugin initialization time, the button won’t render.

Third, if you’re using a bundler, make sure you’re passing the FilerobotImageEditor constructor explicitly via the FilerobotImageEditor option rather than relying on the window global.

Does the plugin work with images hosted on external domains?

It depends on the CORS configuration of the image host. The Filerobot editor draws the image onto an HTML5 canvas to apply edits. Browsers block canvas operations on images from cross-origin sources that don’t send Access-Control-Allow-Origin headers. If the image host doesn’t support CORS, the editor will open but throw a security error when attempting to render the image on canvas. The fix is either to configure your image server to send the appropriate CORS headers or to proxy the image through your own origin.

Can I use this plugin alongside the Image TUI or Filestack plugins at the same time?

Technically you can load multiple image editing plugins, but activating more than one will add multiple “Advanced Edit”-style buttons to the image toolbar, which creates a confusing user experience. Choose one image editing integration per project and enable only that plugin.

Further Reading

• Filerobot Image Editor Plugin Documentation
• Image TUI Plugin Documentation
• Filestack Plugin Documentation
• Froala v5.2.0 Release Notes
• Froala Image Upload Concepts
• Filerobot Image Editor on GitHub