Up to 30% off on Froala Plans.
Days
Hours
Minutes
Seconds
x
Skip to content
Froala Documentation

Filerobot Image Editor (FIE) Plugin

Plugins are fully functional during your trial once you've added your trial key to the setup.
Adds integration with Filerobot Image Editor for advanced image editing inside Froala Editor. Users can open the selected image in Filerobot, apply edits such as annotations, filters, resize, rotate, watermark, and save the updated image back into the editor. The plugin automatically adds Advanced Edit inside imageEditButtons.

Plugin options:

filerobotOptions Object – Configure the Filerobot Image Editor’s appearance and behavior such as theme, tools, default tabs, output type, and save settings.
Default: 
{
  theme: {
    palette: {
      'bg-primary-active': '#4CA6FF'
    },
    typography: {
      fontFamily: 'Roboto, Arial'
    }
  },
  annotationsCommon: {
    fill: '#ff0000'
  },
  Text: { text: 'Enter text...' },
  Rotate: { angle: 90, componentType: 'buttons' },
  tabsIds: ['Adjust', 'Annotate', 'Filters', 'Finetune', 'Resize', 'Watermark'],
  defaultTabId: 'Annotate',
  defaultToolId: 'Text',
  savingPixelRatio: 0,
  previewPixelRatio: 0,
  closeAfterSave: true,
  defaultSavedImageType: 'png'
}
FilerobotImageEditor Object Used to provide the Filerobot Image Editor instance manually if not available globally.
Default: window.FilerobotImageEditor

Plugin events:

filerobot.beforeOpen() Triggered before opening the Filerobot editor.
filerobot.opened(filerobotInstance) Triggered after the Filerobot editor is rendered.
● filerobotInstance (Object): The code content to insert
filerobot.beforeSave(editedImageObject) Triggered before saving the edited image.
● editedImageObject (Object): Contains image data
filerobot.saved (editedImageObject) Triggered after the edited image is uploaded successfully.
● editedImageObject (Object): Contains image data
filerobot.closed() Triggered after the Filerobot editor is closed or destroyed.

Dependencies:

Include Filerobot Image Editor script in your page
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js">

Add Plugin to your code:

Plugin name: imageFilerobot Plugin JS Script: ../js/third_party/imageFileRobot.min.js Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/third_party/imageFileRobot.min.js Plugin CSS link: ../css/third_party/imageFileRobot.min.css Plugin CSS link https://cdn.jsdelivr.net/npm/froala-editor@latest/css/third_party/imageFileRobot.min.css

Example:

new FroalaEditor('.selector', {
  pluginsEnabled: ['image', 'imageFilerobot']
});
Back to Plugins

Ready to dive in? Explore our plans

See plans