Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Events

blur buttons.refresh charCounter.exceeded charCounter.update click codeView.update commands.after commands.before commands.mousedown commands.redo commands.undo contentChanged destroy drop edit.off edit.on element.dropped embedly.beforeRemove file.beforeUpload file.error file.inserted file.unlink file.uploaded file.uploadedToS3 filesManager.beforeUpload (files) filesManager.error (error, response) filesManager.uploaded (response) filesManager.uploadedToS3 (link, key, response) focus html.afterGet html.beforeGet html.get html.processGet html.set image.beforePasteUpload image.beforeRemove image.beforeUpload image.error image.hideResizer image.inserted image.loaded image.removed image.replaced image.resize image.resizeEnd image.uploaded image.uploadedToS3 imageManager.beforeDeleteImage imageManager.error imageManager.imageDeleted imageManager.imageLoaded imageManager.imagesLoaded initializationDelayed initialized input keydown keypress keyup link.bad link.beforeInsert link.beforeRemove mousedown mouseup paste.after paste.afterCleanup paste.before paste.beforeCleanup paste.wordPaste popups.hide.[id] popups.show.[id] popups.show.[id] position.refresh quickInsert.commands.after quickInsert.commands.before save.after save.before save.error shortcut snapshot.after snapshot.before table.inserted table.resized toolbar.esc toolbar.focusEditor toolbar.hide toolbar.show touchend touchstart url.linked video.beforeRemove video.beforeUpload video.codeError video.hideResizer video.inserted video.linkError video.loaded video.removed video.replaced video.uploaded video.uploadedToS3 window.copy window.cut filesManager.beforeUpload filesManager.error filesManager.uploaded filesManager.uploadedToS3

Buttons

buttons.refresh ()

Triggered when the buttons should be refreshed.
Note: Returning false in the handler assigned to the event will cancel the current action.

CODE EXAMPLES

Set the buttons.refresh event:

new FroalaEditor('.selector', {
  events: {
    'buttons.refresh': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Char Counter

charCounter.exceeded ()

Triggered when the maxCharNumber was exceeded.

CODE EXAMPLES

Set the charCounter.exceeded event:

new FroalaEditor('.selector', {
  events: {
    'charCounter.exceeded': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

charCounter.update ()

Triggered when the charCounter should update.

CODE EXAMPLES

Set the charCounter.update event:

new FroalaEditor('.selector', {
  events: {
    'charCounter.update': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Code View

codeView.update ()

Triggered when the code view is changed.

CODE EXAMPLES

Set the codeView.update event:

new FroalaEditor('.selector', {
  events: {
    'codeView.update': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Commands

commands.after (cmd, param1, param2)

This event is a generic event that is triggered after every command executed in the editor. The command information are passed through the cmd, param1 and param2 parameters.

cmd Description param1 param2
align Triggered when a block is aligned. The alignment value: left, center, right, justify -
backgroundColor Triggered when background color is set. The new color. -
bold Triggered when bold command is executed. - -
clearFormatting Triggered when clearFormatting command is executed. - -
fontFamily Triggered when font family is changed. The new value for font family. -
fontSize Triggered when font size is changed. The new value for font size. -
formatOL Triggered when insertOrderedList command is executed. - -
formatUL Triggered when insertUnorderedList command is executed. - -
fullscreen Triggered when fullscreen buttons is clicked. - -
html Triggered when the code view button is hit. - -
imageAlign Triggered when the image is aligned. The alignment value: left, justify, right or center. -
imageDisplay Triggered when the image display has changed. The display value: inline or block -
imageSetAlt Triggered when setting image alt. - -
imageSetSize Triggered when setting image size. - -
imageStyle Triggered when the image style has changed. Possible values are the ones specified by the imageStyles option. -
indent Triggered when a block is indented. - -
inlineStyle Triggered when an inline style is set. Possible values are the ones specified by the inlineStyles option. -
insertHR Triggered when a horizontal line is inserted. - -
italic Triggered when italic command is executed. - -
linkInsert Triggered when a link was inserted either in the editor or on an image. - -
linkList Triggered when a predefined link is selected. The predefined link key. -
linkOpen Triggered when hitting the open link button from the link edit popup. - -
linkRemove Triggered when a link was removed either from the editor or from an image. - -
linkStyle Triggered when a link style was chosed. Possible values are the ones specified by the linkStyles option. -
outdent Triggered when a block is outdented. - -
paragraphFormat Triggered when a block is formatted. The paragraph type. -
paragraphStyle Triggered when an paragraph style is changed. Possible values are the ones specified by the paragraphStyles option. -
quote Triggered when a quote command is executed. Possible commands: increase, decrease -
redo Triggered when redo. - -
selectAll Triggered when selectAll command is executed. - -
strikeThrough Triggered when strikeThrough command is executed. - -
subscript Triggered when subscript command is executed. - -
superscript Triggered when superscript command is executed. - -
tableCellBackgroundColor Triggered when a cell background color is changed. The new color. -
tableCellStyle Triggered when a cell style is changed. Possible values are the ones specified by the tableCellStyles option. -
tableCells Triggered when a cell command is executed. Possible actions: horizontal-split, vertical-split, merge -
tableColumns Triggered when a columns command is executed. Possible actions: delete, after, before -
tableHeader Triggered when the table header button is hit. - -
tableInsert Triggered when a table is inserted. - The number of rows and columns: rows, cols
tableRemove Triggered when the table is deleted. - -
tableRows Triggered when a rows command is executed Possible actions: delete, above, below -
tableCellVerticalAlign Triggered when table cell vertical align is changed. Possible actions: top, middle, bottom -
tableCellHorizontalAlign Triggered when table cell horizontal align is changed. Possible actions: left, right, center, justify -
textColor Triggered when the text color is set. The new color. -
underline Triggered when underlin command is executed. - -
undo Triggered when undo command is executed. - -
updateText Triggered when the text is updated when the option editInPopup is used. - -
videoALign Triggered when the video is aligned. The alignment value: left, justify, right -
videoDisplay Triggered when the video display is changed. The display value: inline, block. -
videoInsertEmbed Triggered when video is inserted with embedded code. - -
videoInsertByURL Triggered when video is inserted by URL. - -
videoRemove Triggered when the current video is removed. - -
videoSetSize Triggered when setting video size. - -

  • cmd

    The command name.

  • param1

    Possible first parameter for command.

  • param2

    Possible second parameter for command.

CODE EXAMPLES

Set the commands.after event:

new FroalaEditor('.selector', {
  events: {
    'commands.after': function (cmd, param1, param2) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

commands.before (cmd, param1, param2)

This event is a generic event that is triggered before every command executed in the editor. The command information are passed through the cmd, param1 and param2 parameters. For more details, please see the table with possible values from the commands.after event.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • cmd

    The command name.

  • param1

    Possible first parameter for command.

  • param2

    Possible second parameter for command.

CODE EXAMPLES

Set the commands.before event:

new FroalaEditor('.selector', {
  events: {
    'commands.before': function (cmd, param1, param2) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

commands.mousedown (btn)

This event is a generic event that is triggered after every command clicked in the editor.

  • btn

    The button reference.

CODE EXAMPLES

Set the commands.mousedown event:

new FroalaEditor('.selector', {
  events: {
    'commands.mousedown': function (btn) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

commands.redo ()

This event is a generic event that is triggered after command redo.

CODE EXAMPLES

Set the commands.redo event:

new FroalaEditor('.selector', {
  events: {
    'commands.redo': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

commands.undo ()

This event is a generic event that is triggered after command undo.

CODE EXAMPLES

Set the commands.undo event:

new FroalaEditor('.selector', {
  events: {
    'commands.undo': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Edit

edit.on ()

Triggered after the editor is enabled for editing.

CODE EXAMPLES

Set the edit.on event:

new FroalaEditor('.selector', {
  events: {
    'edit.on': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

edit.off ()

Triggered after the editor is disabled for editing.

CODE EXAMPLES

Set the edit.off event:

new FroalaEditor('.selector', {
  events: {
    'edit.off': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Element

element.dropped (element)

Triggered after the any element is dropped in editor.

  • element

    Reference object of dropped element.

CODE EXAMPLES

Set the element.dropped event:

new FroalaEditor('.selector', {
  events: {
    'element.dropped': function (element) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Embedly

embedly.beforeRemove (embeded)

Triggered before the embedly embeded is removed from editor.

  • embeded

    Current embeded object to be removed.

CODE EXAMPLES

Set the embedly.beforeRemove event:

new FroalaEditor('.selector', {
  events: {
    'embedly.beforeRemove': function (embeded) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

File

file.beforeUpload (files)

Triggered before uploading a file to the server.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • files

    An array with the files to be uploaded.

CODE EXAMPLES

Set the file.beforeUpload event:

new FroalaEditor('.selector', {
  events: {
    'file.beforeUpload': function (files) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

file.error (error, response)

Triggered after error is occured in uploading a file to the server.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • error

    An object containing error code and description.

  • response

    Response object received from server.

CODE EXAMPLES

Set the file.error event:

new FroalaEditor('.selector', {
  events: {
    'file.error': function (error, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

file.inserted ($file, response)

Triggered after the request to upload a file has been completed successfully.

  • $file

    A jQuery object with the inserted file.

  • response

    The original response from the server.

CODE EXAMPLES

Set the file.inserted event:

new FroalaEditor('.selector', {
  events: {
    'file.inserted': function ($file, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

file.uploaded (response)

Triggered after the file was uploaded.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • response

    The original server response.

CODE EXAMPLES

Set the file.uploaded event:

new FroalaEditor('.selector', {
  events: {
    'file.uploaded': function (response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Triggered after the file was uploaded to S3.

  • link

    The link to the uploaded file.

  • key

    The key of the uploaded file.

  • response

    The original server response.

CODE EXAMPLES

Set the file.uploadedToS3 event:

new FroalaEditor('.selector', {
  events: {
    'file.uploadedToS3': function (link, key, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Files Manager

filesManager.beforeUpload (files)

Triggered before uploading a file to the server.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • Files

    An array with the files to be uploaded.

CODE EXAMPLES

Set the filesManager.beforeUpload event:

new FroalaEditor('.selector', {
  events: {
    'filesManager.beforeUpload': function (files) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

filesManager.error (error, response)

Triggered before uploading a file to the server.
Note:Returning false in the handler assigned to the event will cancel the current action.

  • error

    An object containing error code and description.

  • response

    Response object received from server.

CODE EXAMPLES

Set the filesManager.error event:

new FroalaEditor('.selector', {
  events: {
    'filesManager.error': function (error, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

filesManager.uploaded (response)

Triggered after the file was uploaded.
Note:Returning false in the handler assigned to the event will cancel the current action.

  • response

    The original server response.

CODE EXAMPLES

Set the filesManager.uploaded event:

new FroalaEditor('.selector', {
  events: {
    'filesManager.uploaded': function (response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Triggered after the file was uploaded to S3.
Note:Returning false in the handler assigned to the event will cancel the current action.

  • link

    The link to the uploaded file.

  • key

    The key of the uploaded file.

  • response

    The original server response.

CODE EXAMPLES

Set the filesManager.uploadedToS3 event:

new FroalaEditor('.selector', {
  events: {
    'filesManager.uploadedToS3': function (link, key, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

General

blur ()

Triggered after the Froala Rich Text Editor looses "focus".

CODE EXAMPLES

Set the blur event:

new FroalaEditor('.selector', {
  events: {
    'blur': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

click (clickEvent)

Triggered by the click event of the editable area.

  • clickEvent

    The jQuery click event.

CODE EXAMPLES

Set the click event:

new FroalaEditor('.selector', {
  events: {
    'click': function (clickEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

contentChanged ()

Triggered when the content from the Froala Rich Text Editor has changed.

CODE EXAMPLES

Set the contentChanged event:

new FroalaEditor('.selector', {
  events: {
    'contentChanged': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

destroy ()

Triggered when the destroy method was called.

CODE EXAMPLES

Set the destroy event:

new FroalaEditor('.selector', {
  events: {
    'destroy': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

drop (dropEvent)

Triggered by the drop event of the editable area. Instead of assigning the event this way, it is better to assign it like described in the dropped event example.

  • dropEvent

    The jQuery drop event.

CODE EXAMPLES

Set the drop event:

new FroalaEditor('.selector', {
  events: {
    'drop': function (dropEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

focus ()

Triggered after the Froala Rich Text Editor gets focused.

CODE EXAMPLES

Set the focus event:

new FroalaEditor('.selector', {
  events: {
    'focus': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

initialized ()

Triggered when the Froala Rich Text Editor has finished to initialize.

CODE EXAMPLES

Set the initialized event:

new FroalaEditor('.selector', {
  events: {
    'initialized': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

initializationDelayed ()

Triggered when the Froala Rich Text Editor has finished to do basic initialization for initOnClick option.

CODE EXAMPLES

Set the initializationDelayed event:

new FroalaEditor('.selector', {
  events: {
    'initializationDelayed': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

input (inputEvent)

Triggered by the input event of the editable area.

  • inputEvent

    The jQuery input event.

CODE EXAMPLES

Set the input event:

new FroalaEditor('.selector', {
  events: {
    'input': function (inputEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

keydown (keydownEvent)

Triggered by the keydown event of the editable area.

  • keydownEvent

    The jQuery keydown event.

CODE EXAMPLES

Set the keydown event:

new FroalaEditor('.selector', {
  events: {
    'keydown': function (keydownEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

keypress (keypressEvent)

Triggered by the keypress event of the editable area.

  • keypressEvent

    The jQuery keypress event.

CODE EXAMPLES

Set the keypress event:

new FroalaEditor('.selector', {
  events: {
    'keypress': function (keypressEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

keyup (keyupEvent)

Triggered by the keyup event of the editable area.

  • keyupEvent

    The jQuery keyup event.

CODE EXAMPLES

Set the keyup event:

new FroalaEditor('.selector', {
  events: {
    'keyup': function (keyupEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

mousedown (mousedownEvent)

Triggered by the mousedown event of the editable area.

  • mousedownEvent

    The jQuery mousedown event.

CODE EXAMPLES

Set the mousedown event:

new FroalaEditor('.selector', {
  events: {
    'mousedown': function (mousedownEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

mouseup (mouseupEvent)

Triggered by the mouseup event of the editable area.

  • mouseupEvent

    The jQuery mouseup event.

CODE EXAMPLES

Set the mouseup event:

new FroalaEditor('.selector', {
  events: {
    'mouseup': function (mouseupEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

shortcut (e, cmd, val)

Triggered before the command is executed via shortcut.

  • e

    The event object.

  • cmd

    The command name

  • val

    The value of registered shortcut

CODE EXAMPLES

Set the shortcut event:

new FroalaEditor('.selector', {
  events: {
    'shortcut': function (e, cmd, val) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

touchstart (touchstartEvent)

Triggered by the touchstart event of the editable area.

  • touchstartEvent

    The jQuery touchstart event.

CODE EXAMPLES

Set the touchstart event:

new FroalaEditor('.selector', {
  events: {
    'touchstart': function (touchstartEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

touchend (touchendEvent)

Triggered by the touchend event of the editable area.

  • touchendEvent

    The jQuery touchend event.

CODE EXAMPLES

Set the touchend event:

new FroalaEditor('.selector', {
  events: {
    'touchend': function (touchendEvent) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

HTML

html.afterGet ()

Triggered after the HTML was served to the html.get method.

CODE EXAMPLES

Set the html.afterGet event:

new FroalaEditor('.selector', {
  events: {
    'html.afterGet': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

html.beforeGet ()

Triggered before the HTML was served to the html.get method.

CODE EXAMPLES

Set the html.beforeGet event:

new FroalaEditor('.selector', {
  events: {
    'html.beforeGet': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

html.processGet (el)

Triggered before the HTML is getting cleaned.

  • el

    Element to be cleaned

CODE EXAMPLES

Set the html.processGet event:

new FroalaEditor('.selector', {
  events: {
    'html.processGet': function (el) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

html.get (html)

Triggered when the HTML of the editor is saved or synced. If a string is returned, then the new string will be used.

  • html

    The HTML from the editor.

CODE EXAMPLES

Set the html.get event:

new FroalaEditor('.selector', {
  events: {
    'html.get': function (html) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

html.set ()

Triggered after the HTML was set into the editor.

CODE EXAMPLES

Set the html.set event:

new FroalaEditor('.selector', {
  events: {
    'html.set': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Image

image.beforePasteUpload (img)

Triggered before uploading a pasted image from clipboard to the server.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • img

    The DOM element representing the image to be uploaded.

CODE EXAMPLES

Set the image.beforePasteUpload event:

new FroalaEditor('.selector', {
  events: {
    'image.beforePasteUpload': function (img) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.beforeRemove ($img)

Triggered after user confirms to remove the image from the Froala Rich Text Editor, but before actually removing it.
Note: The image is removed only from the editable box and no delete request is being made the server.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • $img

    A jQuery object with the image to be removed.

CODE EXAMPLES

Set the image.beforeRemove event:

new FroalaEditor('.selector', {
  events: {
    'image.beforeRemove': function ($img) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.beforeUpload (images)

Triggered before uploading an image to the server.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • images

    An array with the images to be uploaded.

CODE EXAMPLES

Set the image.beforeUpload event:

new FroalaEditor('.selector', {
  events: {
    'image.beforeUpload': function (images) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.hideResizer (images)

Triggered before uploading an image to the server.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • images

    An array with the images to be uploaded.

CODE EXAMPLES

Set the image.hideResizer event:

new FroalaEditor('.selector', {
  events: {
    'image.hideResizer': function (images) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.error (error, response)

Triggered by an error occurred while trying to load the image.

Code Message Description
1 Image cannot be loaded from the passed link. The passed link is either incorrect or the file is not an image.
2 No link in upload response. Incorrect response for the HTTP request to upload image. The response did not respect the instructions from imageUploadURL option.
3 Error during file upload.
4 Parsing response failed.
5 File is too large.
6 Image file type is invalid.
7 Files can be uploaded only to same domain in IE 8 and IE 9.

  • error

    An object containing error code and error message.

  • response

    The original server response.

CODE EXAMPLES

Set the image.error event:

new FroalaEditor('.selector', {
  events: {
    'image.error': function (error, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.inserted ($img, response)

Triggered after image was inserted in the Froala Rich Text Editor.

  • $img

    A jQuery object containing the inserted image.

  • response

    The original server response.

CODE EXAMPLES

Set the image.inserted event:

new FroalaEditor('.selector', {
  events: {
    'image.inserted': function ($img, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.loaded ($img)

Triggered when an image has finished to load successfully.

  • $img

    The jQuery object with the loaded image.

CODE EXAMPLES

Set the image.loaded event:

new FroalaEditor('.selector', {
  events: {
    'image.loaded': function ($img) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.removed ($img)

Triggered after image is removed from the Froala Rich Text Editor.
Note: The image is removed only from the editable box and no delete request is being made the server.

  • $img

    A jQuery object with the image to be removed. It can be used to delete the image from the server.

CODE EXAMPLES

Set the image.removed event:

new FroalaEditor('.selector', {
  events: {
    'image.removed': function ($img) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.replaced ($img, response)

Triggered after image was replaced with a new one.

  • $img

    A jQuery object containing the new image.

  • response

    The original response from the server.

CODE EXAMPLES

Set the image.replaced event:

new FroalaEditor('.selector', {
  events: {
    'image.replaced': function ($img, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.resize ($img)

Triggered while doing image resize.

  • $img

    The jQuery object containing the resized image.

CODE EXAMPLES

Set the image.resize event:

new FroalaEditor('.selector', {
  events: {
    'image.resize': function ($img) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.resizeEnd ($img)

Triggered when image resize has finished.

  • $img

    The jQuery object containing the resized image.

CODE EXAMPLES

Set the image.resizeEnd event:

new FroalaEditor('.selector', {
  events: {
    'image.resizeEnd': function ($img) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

image.uploaded (response)

Triggered after the image was uploaded.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • response

    The original server response.

CODE EXAMPLES

Set the image.uploaded event:

new FroalaEditor('.selector', {
  events: {
    'image.uploaded': function (response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Triggered after image was uploaded to S3.

  • link

    The link to the image.

  • key

    The S3 key for the image.

  • response

    The original server response.

CODE EXAMPLES

Set the image.uploadedToS3 event:

new FroalaEditor('.selector', {
  events: {
    'image.uploadedToS3': function (link, key, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Image Manager

imageManager.beforeDeleteImage ($img)

Triggered before deleting an image from the image manager.

  • $img

    The jQuery object with the thumb of the image to be removed.

CODE EXAMPLES

Set the imageManager.beforeDeleteImage event:

new FroalaEditor('.selector', {
  events: {
    'imageManager.beforeDeleteImage': function ($img) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

imageManager.error (error, response)

Triggered by an error occurred while trying to load images inside the image manager.

Code Message Description
10 Image cannot be loaded from the passed link. The passed link is either incorrect or the file is not an image.
11 Error during load images request. The HTTP request to load images failed. The imageManagerLoadURL option may be set incorrect, the server faild to respond or a custom error was sent by the server.
12 Missing imageManagerLoadURL option. The imageManagerLoadURL option was not set.
13 Parsing load response failed. The load images response does not respect the required structure: imageManagerLoadURL and cannot be parsed.
14 Missing image thumb. The load images response did not contain thumb. Although this is not required, it is highly recommended to use thumb. Thumbs are used for the images displayed in the image manager, instead of displaying the full-sized image to prevent server overload.
15 Missing image URL. The load images response did not contain url for an image.
21 Error during delete image request. The HTTP request to delete an image faild. The imageManagerDeleteURL option may be set incorrect, the server faild to respond or a custom error was sent by the server.
22 Missing imageManagerDeleteURL option. The imageManagerDeleteURL option was not set.

  • error

    An object containing error code and error message.

  • response

    The original response from the server.

CODE EXAMPLES

Set the imageManager.error event:

new FroalaEditor('.selector', {
  events: {
    'imageManager.error': function (error, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

imageManager.imageDeleted (data)

Triggered after the image was deleted from image manager.

  • data

    An object with additional data of the image.

CODE EXAMPLES

Set the imageManager.imageDeleted event:

new FroalaEditor('.selector', {
  events: {
    'imageManager.imageDeleted': function (data) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

imageManager.imageLoaded ($img)

Triggered after an image was loaded in image manager.

  • $img

    The jQuery object of the image loaded.

CODE EXAMPLES

Set the imageManager.imageLoaded event:

new FroalaEditor('.selector', {
  events: {
    'imageManager.imageLoaded': function ($img) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

imageManager.imagesLoaded (data)

Triggered after the request to load images in the media manager has been completed successfully.

  • data

    The data returned from the server.

CODE EXAMPLES

Set the imageManager.imagesLoaded event:

new FroalaEditor('.selector', {
  events: {
    'imageManager.imagesLoaded': function (data) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Paste

paste.after ()

Triggered after pasting something into the Froala Rich Text Editor.

CODE EXAMPLES

Set the paste.after event:

new FroalaEditor('.selector', {
  events: {
    'paste.after': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

paste.afterCleanup (clipboard_html)

Triggered after the content was pasted from the clipboard into the Froala Rich Text Editor and it was cleaned up. If a string is returned, the new string will be used as the pasted content.

  • clipboard_html

    A string with the pasted content after it was cleaned up.

CODE EXAMPLES

Set the paste.afterCleanup event:

new FroalaEditor('.selector', {
  events: {
    'paste.afterCleanup': function (clipboard_html) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

paste.before (original_event)

Triggered before pasting something into the Froala Rich Text Editor.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • original_event

    The jQuery event object for the paste event.

CODE EXAMPLES

Set the paste.before event:

new FroalaEditor('.selector', {
  events: {
    'paste.before': function (original_event) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

paste.beforeCleanup (clipboard_html)

Triggered after the content is pasted from the clipboard into the Froala Rich Text Editor. If a string is returned the new string will be used as the pasted content.

  • clipboard_html

    The clipboard pasted HTML.

CODE EXAMPLES

Set the paste.beforeCleanup event:

new FroalaEditor('.selector', {
  events: {
    'paste.beforeCleanup': function (clipboard_html) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

paste.wordPaste (clipboard_html)

Triggered after the content is pasted from the MS Office into the Froala Rich Text Editor.

  • clipboard_html

    The clipboard pasted HTML.

CODE EXAMPLES

Set the paste.wordPaste event:

new FroalaEditor('.selector', {
  events: {
    'paste.wordPaste': function (clipboard_html) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Popups

popups.hide.[id] ()

Triggered when a popup is hidden. [id] should be replaced with the id of the popup.

CODE EXAMPLES

Set the popups.hide.[id] event:

new FroalaEditor('.selector', {
  events: {
    'popups.hide.[id]': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

popups.show.[id] ()

Triggered when a popup is shown. [id] should be replaced with the id of the popup.

CODE EXAMPLES

Set the popups.show.[id] event:

new FroalaEditor('.selector', {
  events: {
    'popups.show.[id]': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Position

position.refresh ()

Triggered before the position of toolbar is refreshed.

CODE EXAMPLES

Set the position.refresh event:

new FroalaEditor('.selector', {
  events: {
    'position.refresh': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

popups.show.[id] ()

Triggered when a popup is shown. [id] should be replaced with the id of the popup.

CODE EXAMPLES

Set the popups.show.[id] event:

new FroalaEditor('.selector', {
  events: {
    'popups.show.[id]': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Save

save.after (data)

Triggered after the save request.

  • data

    The returned data from the save request.

CODE EXAMPLES

Set the save.after event:

new FroalaEditor('.selector', {
  events: {
    'save.after': function (data) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

save.before (html)

Triggered before doing the save request. If a string is returned, the new string will be used as the saved content.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • html

    The HTML to save.

CODE EXAMPLES

Set the save.before event:

new FroalaEditor('.selector', {
  events: {
    'save.before': function (html) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

save.error (error, response)

Triggered when an error occurs during save request.

  • error

    The description of the error that happened during the save request.

  • response

    The original response from the server.

CODE EXAMPLES

Set the save.error event:

new FroalaEditor('.selector', {
  events: {
    'save.error': function (error, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Snapshot

snapshot.after ()

Triggered after getting a snapshot

CODE EXAMPLES

Set the snapshot.after event:

new FroalaEditor('.selector', {
  events: {
    'snapshot.after': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

snapshot.before ()

Triggered before getting a snapshot.

CODE EXAMPLES

Set the snapshot.before event:

new FroalaEditor('.selector', {
  events: {
    'snapshot.before': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Table

table.inserted (table)

Triggered after the table was inserted.

  • table

    The DOM element for the inserted table.

CODE EXAMPLES

Set the table.inserted event:

new FroalaEditor('.selector', {
  events: {
    'table.inserted': function (table) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

table.resized (table)

Triggered after the table was resized.

  • table

    The DOM element for the resized table.

CODE EXAMPLES

Set the table.resized event:

new FroalaEditor('.selector', {
  events: {
    'table.resized': function (table) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Toolbar

toolbar.esc ()

Triggered before hiding the toolbar on pressing esc key.
Note: Returning false in the handler assigned to the event will cancel the current action.

CODE EXAMPLES

Set the toolbar.esc event:

new FroalaEditor('.selector', {
  events: {
    'toolbar.esc': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

toolbar.focusEditor ()

Triggered when doing focus on editor.
Note: Returning false in the handler assigned to the event will cancel the current action.

CODE EXAMPLES

Set the toolbar.focusEditor event:

new FroalaEditor('.selector', {
  events: {
    'toolbar.focusEditor': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

toolbar.hide ()

Triggered when hiding the editor toolbar.
Note: Returning false in the handler assigned to the event will cancel the current action.

CODE EXAMPLES

Set the toolbar.hide event:

new FroalaEditor('.selector', {
  events: {
    'toolbar.hide': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

toolbar.show ()

Triggered when showing the editor toolbar.
Note: Returning false in the handler assigned to the event will cancel the current action.

CODE EXAMPLES

Set the toolbar.show event:

new FroalaEditor('.selector', {
  events: {
    'toolbar.show': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Video

video.codeError (code)

Triggered by an error occurred while trying to insert a video by embedded code.

  • code

    The original code inserted by the user.

CODE EXAMPLES

Set the video.codeError event:

new FroalaEditor('.selector', {
  events: {
    'video.codeError': function (code) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

video.inserted ($video)

Triggered after video was inserted.

  • $video

    The jQuery object for the inserted video.

CODE EXAMPLES

Set the video.inserted event:

new FroalaEditor('.selector', {
  events: {
    'video.inserted': function ($video) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

video.replaced ($video)

Triggered after video was replaced.

  • $video

    The jQuery object for the inserted video.

CODE EXAMPLES

Set the video.replaced event:

new FroalaEditor('.selector', {
  events: {
    'video.replaced': function ($video) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    })
  }
});

Triggered by an error occurred while trying to insert a video by URL.

  • link

    The original link input from the user.

CODE EXAMPLES

Set the video.linkError event:

new FroalaEditor('.selector', {
  events: {
    'video.linkError': function (link) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    })
  }
});

video.removed ($video)

Triggered after video was removed.

  • $video

    The jQuery object for the removed video.

CODE EXAMPLES

Set the video.removed event:

new FroalaEditor('.selector', {
  events: {
    'video.removed': function ($video) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

video.loaded ($video)

Triggered after video was loaded.

  • $video

    The jQuery object for the removed video.

CODE EXAMPLES

Set the video.loaded event:

new FroalaEditor('.selector', {
  events: {
    'video.loaded': function ($video) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

video.uploaded (response)

Triggered after video was uploaded.

  • response

    The response from server.

CODE EXAMPLES

Set the video.uploaded event:

new FroalaEditor('.selector', {
  events: {
    'video.uploaded': function (response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Triggered after video was uploaded to S3.

  • link

    The link of the uploaded video.

  • key

    The key of the uploaded vide.

  • response

    The response from server.

CODE EXAMPLES

Set the video.uploadedToS3 event:

new FroalaEditor('.selector', {
  events: {
    'video.uploadedToS3': function (link, key, response) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

video.beforeUpload ($video)

Triggered before video is uploaded.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • $video

    The jQuery object of the video to be uploaded.

CODE EXAMPLES

Set the video.beforeUpload event:

new FroalaEditor('.selector', {
  events: {
    'video.beforeUpload': function ($video) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

video.beforeRemove ($video)

Triggered before video is removed.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • $video

    The jQuery object of the video to be removed.

CODE EXAMPLES

Set the video.beforeRemove event:

new FroalaEditor('.selector', {
  events: {
    'video.beforeRemove': function ($video) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

video.hideResizer ()

Triggered after hiding the edit toolbar.
Note: Returning false in the handler assigned to the event will cancel the current action.

CODE EXAMPLES

Set the video.hideResizer event:

new FroalaEditor('.selector', {
  events: {
    'video.hideResizer': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Quick Insert

quickInsert.commands.after (cmd)

This event is a generic event that is triggered after every command inside the Quick Insert tool is executed. The command information are passed through the cmd parameter.

  • cmd

    The command name.

CODE EXAMPLES

Set the quickInsert.commands.after event:

new FroalaEditor('.selector', {
  events: {
    'quickInsert.commands.after': function (cmd) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

quickInsert.commands.before (cmd)

This event is a generic event that is triggered before every command inside the Quick Insert tool is executed. The command information are passed through the cmd parameter.
Note: Returning false in the handler assigned to the event will cancel the current action.

  • cmd

    The command name.

CODE EXAMPLES

Set the quickInsert.commands.before event:

new FroalaEditor('.selector', {
  events: {
    'quickInsert.commands.before': function (cmd) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

URL

Triggered after auto-linking an url while typing.

  • link

    The inserted link.

CODE EXAMPLES

Set the url.linked event:

new FroalaEditor('.selector', {
  events: {
    'url.linked': function (link) {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Window

window.cut ()

Triggered after cut command is executed.

CODE EXAMPLES

Set the window.cut event:

new FroalaEditor('.selector', {
  events: {
    'window.cut': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

window.copy ()

Triggered after copy command is executed.

CODE EXAMPLES

Set the window.copy event:

new FroalaEditor('.selector', {
  events: {
    'window.copy': function () {
      // Do something here.
      // this is the editor instance.
      console.log(this);
    }
  }
});

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_892386833" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1628388784" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1212291340" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>