Events

Buttons

froalaEditor.buttons.refresh (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the buttons.refresh event:

$('.selector').on('froalaEditor.buttons.refresh', function (e, editor) {
  // Do something here.
});

Unset the buttons.refresh event:

$('.selector').off('froalaEditor.buttons.refresh');

Char Counter

froalaEditor.charCounter.exceeded (e, editor)

Triggered when the maxCharNumber was exceeded.

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the charCounter.exceeded event:

$('.selector').on('froalaEditor.charCounter.exceeded', function (e, editor) {
  // Do something here.
});

Unset the charCounter.exceeded event:

$('.selector').off('froalaEditor.charCounter.exceeded');

froalaEditor.charCounter.update (e, editor)

Triggered when the charCounter should update.

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the charCounter.update event:

$('.selector').on('froalaEditor.charCounter.update', function (e, editor) {
  // Do something here.
});

Unset the charCounter.update event:

$('.selector').off('froalaEditor.charCounter.update');

Commands

froalaEditor.commands.after (e, editor, 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. - -

  • e

    The callback event.

  • editor

    The editor instance.

  • cmd

    The command name.

  • param1

    Possible first parameter for command.

  • param2

    Possible second parameter for command.

CODE EXAMPLES

Set the commands.after event:

$('.selector').on('froalaEditor.commands.after', function (e, editor, cmd, param1, param2) {
  // Do something here.
});

Unset the commands.after event:

$('.selector').off('froalaEditor.commands.after');

froalaEditor.commands.before (e, editor, 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.

  • e

    The callback event.

  • editor

    The editor instance.

  • cmd

    The command name.

  • param1

    Possible first parameter for command.

  • param2

    Possible second parameter for command.

CODE EXAMPLES

Set the commands.before event:

$('.selector').on('froalaEditor.commands.before', function (e, editor, cmd, param1, param2) {
  // Do something here.
});

Unset the commands.before event:

$('.selector').off('froalaEditor.commands.before');

File

froalaEditor.file.beforeUpload (e, editor, files)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • files

    An array with the files to be uploaded.

CODE EXAMPLES

Set the file.beforeUpload event:

$('.selector').on('froalaEditor.file.beforeUpload', function (e, editor, files) {
  // Do something here.
});

Unset the file.beforeUpload event:

$('.selector').off('froalaEditor.file.beforeUpload');

froalaEditor.file.inserted (e, editor, $file, response)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • $file

    A jQuery object with the inserted file.

  • response

    The original response from the server.

CODE EXAMPLES

Set the file.inserted event:

$('.selector').on('froalaEditor.file.inserted', function (e, editor, $file, response) {
  // Do something here.
});

Unset the file.inserted event:

$('.selector').off('froalaEditor.file.inserted');

froalaEditor.file.uploaded (e, editor, response)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • response

    The original server response.

CODE EXAMPLES

Set the file.uploaded event:

$('.selector').on('froalaEditor.file.uploaded', function (e, editor, response) {
  // Do something here.
});

Unset the file.uploaded event:

$('.selector').off('froalaEditor.file.uploaded');

froalaEditor.file.uploadedToS3 (e, editor, link, key, response)

Triggered after the file was uploaded to S3.

  • e

    The callback event.

  • editor

    The editor instance.

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

$('.selector').on('froalaEditor.file.uploadedToS3', function (e, editor, link, key, response) {
  // Do something here.
});

Unset the file.uploadedToS3 event:

$('.selector').off('froalaEditor.file.uploadedToS3');

General

froalaEditor.blur (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the blur event:

$('.selector').on('froalaEditor.blur', function (e, editor) {
  // Do something here.
});

Unset the blur event:

$('.selector').off('froalaEditor.blur');

froalaEditor.click (e, editor, clickEvent)

Triggered by the click event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • clickEvent

    The jQuery click event.

CODE EXAMPLES

Set the click event:

$('.selector').on('froalaEditor.click', function (e, editor, clickEvent) {
  // Do something here.
});

Unset the click event:

$('.selector').off('froalaEditor.click');

froalaEditor.contentChanged (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the contentChanged event:

$('.selector').on('froalaEditor.contentChanged', function (e, editor) {
  // Do something here.
});

Unset the contentChanged event:

$('.selector').off('froalaEditor.contentChanged');

froalaEditor.destroy (e, editor)

Triggered when the destroy method was called.

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the destroy event:

$('.selector').on('froalaEditor.destroy', function (e, editor) {
  // Do something here.
});

Unset the destroy event:

$('.selector').off('froalaEditor.destroy');

froalaEditor.drop (e, editor, 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.

  • e

    The callback event.

  • editor

    The editor instance.

  • dropEvent

    The jQuery drop event.

CODE EXAMPLES

Set the drop event:

$('.selector').on('froalaEditor.drop', function (e, editor, dropEvent) {
  // Do something here.
});

Unset the drop event:

$('.selector').off('froalaEditor.drop');

froalaEditor.focus (e, editor)

Triggered after the Froala Rich Text Editor gets focused.

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the focus event:

$('.selector').on('froalaEditor.focus', function (e, editor) {
  // Do something here.
});

Unset the focus event:

$('.selector').off('froalaEditor.focus');

froalaEditor.initialized (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the initialized event:

$('.selector').on('froalaEditor.initialized', function (e, editor) {
  // Do something here.
});

Unset the initialized event:

$('.selector').off('froalaEditor.initialized');

froalaEditor.initializationDelayed (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the initializationDelayed event:

$('.selector').on('froalaEditor.initializationDelayed', function (e, editor) {
  // Do something here.
});

Unset the initializationDelayed event:

$('.selector').off('froalaEditor.initializationDelayed');

froalaEditor.input (e, editor, inputEvent)

Triggered by the input event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • inputEvent

    The jQuery input event.

CODE EXAMPLES

Set the input event:

$('.selector').on('froalaEditor.input', function (e, editor, inputEvent) {
  // Do something here.
});

Unset the input event:

$('.selector').off('froalaEditor.input');

froalaEditor.keydown (e, editor, keydownEvent)

Triggered by the keydown event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • keydownEvent

    The jQuery keydown event.

CODE EXAMPLES

Set the keydown event:

$('.selector').on('froalaEditor.keydown', function (e, editor, keydownEvent) {
  // Do something here.
});

Unset the keydown event:

$('.selector').off('froalaEditor.keydown');

froalaEditor.keypress (e, editor, keypressEvent)

Triggered by the keypress event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • keypressEvent

    The jQuery keypress event.

CODE EXAMPLES

Set the keypress event:

$('.selector').on('froalaEditor.keypress', function (e, editor, keypressEvent) {
  // Do something here.
});

Unset the keypress event:

$('.selector').off('froalaEditor.keypress');

froalaEditor.keyup (e, editor, keyupEvent)

Triggered by the keyup event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • keyupEvent

    The jQuery keyup event.

CODE EXAMPLES

Set the keyup event:

$('.selector').on('froalaEditor.keyup', function (e, editor, keyupEvent) {
  // Do something here.
});

Unset the keyup event:

$('.selector').off('froalaEditor.keyup');

froalaEditor.mousedown (e, editor, mousedownEvent)

Triggered by the mousedown event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • mousedownEvent

    The jQuery mousedown event.

CODE EXAMPLES

Set the mousedown event:

$('.selector').on('froalaEditor.mousedown', function (e, editor, mousedownEvent) {
  // Do something here.
});

Unset the mousedown event:

$('.selector').off('froalaEditor.mousedown');

froalaEditor.mouseup (e, editor, mouseupEvent)

Triggered by the mouseup event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • mouseupEvent

    The jQuery mouseup event.

CODE EXAMPLES

Set the mouseup event:

$('.selector').on('froalaEditor.mouseup', function (e, editor, mouseupEvent) {
  // Do something here.
});

Unset the mouseup event:

$('.selector').off('froalaEditor.mouseup');

froalaEditor.touchstart (e, editor, touchstartEvent)

Triggered by the touchstart event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • touchstartEvent

    The jQuery touchstart event.

CODE EXAMPLES

Set the touchstart event:

$('.selector').on('froalaEditor.touchstart', function (e, editor, touchstartEvent) {
  // Do something here.
});

Unset the touchstart event:

$('.selector').off('froalaEditor.touchstart');

froalaEditor.touchend (e, editor, touchendEvent)

Triggered by the touchend event of the editable area.

  • e

    The callback event.

  • editor

    The editor instance.

  • touchendEvent

    The jQuery touchend event.

CODE EXAMPLES

Set the touchend event:

$('.selector').on('froalaEditor.touchend', function (e, editor, touchendEvent) {
  // Do something here.
});

Unset the touchend event:

$('.selector').off('froalaEditor.touchend');

HTML

froalaEditor.html.afterGet (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the html.afterGet event:

$('.selector').on('froalaEditor.html.afterGet', function (e, editor) {
  // Do something here.
});

Unset the html.afterGet event:

$('.selector').off('froalaEditor.html.afterGet');

froalaEditor.html.beforeGet (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the html.beforeGet event:

$('.selector').on('froalaEditor.html.beforeGet', function (e, editor) {
  // Do something here.
});

Unset the html.beforeGet event:

$('.selector').off('froalaEditor.html.beforeGet');

froalaEditor.html.get (e, editor, html)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • html

    The HTML from the editor.

CODE EXAMPLES

Set the html.get event:

$('.selector').on('froalaEditor.html.get', function (e, editor, html) {
  // Do something here.
});

Unset the html.get event:

$('.selector').off('froalaEditor.html.get');

froalaEditor.html.set (e, editor)

Triggered after the HTML was set into the editor.

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the html.set event:

$('.selector').on('froalaEditor.html.set', function (e, editor) {
  // Do something here.
});

Unset the html.set event:

$('.selector').off('froalaEditor.html.set');

Image

froalaEditor.image.beforePasteUpload (e, editor, 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.

  • e

    The callback event.

  • editor

    The editor instance.

  • img

    The DOM element representing the image to be uploaded.

CODE EXAMPLES

Set the image.beforePasteUpload event:

$('.selector').on('froalaEditor.image.beforePasteUpload', function (e, editor, img) {
  // Do something here.
});

Unset the image.beforePasteUpload event:

$('.selector').off('froalaEditor.image.beforePasteUpload');

froalaEditor.image.beforeRemove (e, editor, $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.

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    A jQuery object with the image to be removed.

CODE EXAMPLES

Set the image.beforeRemove event:

$('.selector').on('froalaEditor.image.beforeRemove', function (e, editor, $img) {
  // Do something here.
});

Unset the image.beforeRemove event:

$('.selector').off('froalaEditor.image.beforeRemove');

froalaEditor.image.beforeUpload (e, editor, images)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • images

    An array with the images to be uploaded.

CODE EXAMPLES

Set the image.beforeUpload event:

$('.selector').on('froalaEditor.image.beforeUpload', function (e, editor, images) {
  // Do something here.
});

Unset the image.beforeUpload event:

$('.selector').off('froalaEditor.image.beforeUpload');

froalaEditor.image.error (e, editor, 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.

  • e

    The callback event.

  • editor

    The editor instance.

  • error

    An object containing error code and error message.

  • response

    The original server response.

CODE EXAMPLES

Set the image.error event:

$('.selector').on('froalaEditor.image.error', function (e, editor, error, response) {
  // Do something here.
});

Unset the image.error event:

$('.selector').off('froalaEditor.image.error');

froalaEditor.image.inserted (e, editor, $img, response)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    A jQuery object containing the inserted image.

  • response

    The original server response.

CODE EXAMPLES

Set the image.inserted event:

$('.selector').on('froalaEditor.image.inserted', function (e, editor, $img, response) {
  // Do something here.
});

Unset the image.inserted event:

$('.selector').off('froalaEditor.image.inserted');

froalaEditor.image.loaded (e, editor, $img)

Triggered when an image has finished to load successfully.

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery object with the loaded image.

CODE EXAMPLES

Set the image.loaded event:

$('.selector').on('froalaEditor.image.loaded', function (e, editor, $img) {
  // Do something here.
});

Unset the image.loaded event:

$('.selector').off('froalaEditor.image.loaded');

froalaEditor.image.removed (e, editor, $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.

  • e

    The callback event.

  • editor

    The editor instance.

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

$('.selector').on('froalaEditor.image.removed', function (e, editor, $img) {
  // Do something here.
});

Unset the image.removed event:

$('.selector').off('froalaEditor.image.removed');

froalaEditor.image.replaced (e, editor, $img, response)

Triggered after image was replaced with a new one.

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    A jQuery object containing the new image.

  • response

    The original response from the server.

CODE EXAMPLES

Set the image.replaced event:

$('.selector').on('froalaEditor.image.replaced', function (e, editor, $img, response) {
  // Do something here.
});

Unset the image.replaced event:

$('.selector').off('froalaEditor.image.replaced');

froalaEditor.image.resize (e, editor, $img)

Triggered while doing image resize.

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery object containing the resized image.

CODE EXAMPLES

Set the image.resize event:

$('.selector').on('froalaEditor.image.resize', function (e, editor, $img) {
  // Do something here.
});

Unset the image.resize event:

$('.selector').off('froalaEditor.image.resize');

froalaEditor.image.resizeEnd (e, editor, $img)

Triggered when image resize has finished.

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery object containing the resized image.

CODE EXAMPLES

Set the image.resizeEnd event:

$('.selector').on('froalaEditor.image.resizeEnd', function (e, editor, $img) {
  // Do something here.
});

Unset the image.resizeEnd event:

$('.selector').off('froalaEditor.image.resizeEnd');

froalaEditor.image.uploaded (e, editor, response)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • response

    The original server response.

CODE EXAMPLES

Set the image.uploaded event:

$('.selector').on('froalaEditor.image.uploaded', function (e, editor, response) {
  // Do something here.
});

Unset the image.uploaded event:

$('.selector').off('froalaEditor.image.uploaded');

froalaEditor.image.uploadedToS3 (e, editor, link, key, response)

Triggered after image was uploaded to S3.

  • e

    The callback event.

  • editor

    The editor instance.

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

$('.selector').on('froalaEditor.image.uploadedToS3', function (e, editor, link, key, response) {
  // Do something here.
});

Unset the image.uploadedToS3 event:

$('.selector').off('froalaEditor.image.uploadedToS3');

Image Manager

froalaEditor.imageManager.beforeDeleteImage (e, editor, $img)

Triggered before deleting an image from the image manager.

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

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

CODE EXAMPLES

Set the imageManager.beforeDeleteImage event:

$('.selector').on('froalaEditor.imageManager.beforeDeleteImage', function (e, editor, $img) {
  // Do something here.
});

Unset the imageManager.beforeDeleteImage event:

$('.selector').off('froalaEditor.imageManager.beforeDeleteImage');

froalaEditor.imageManager.error (e, editor, 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.

  • e

    The callback event.

  • editor

    The editor instance.

  • error

    An object containing error code and error message.

  • response

    The original response from the server.

CODE EXAMPLES

Set the imageManager.error event:

$('.selector').on('froalaEditor.imageManager.error', function (e, editor, error, response) {
  // Do something here.
});

Unset the imageManager.error event:

$('.selector').off('froalaEditor.imageManager.error');

froalaEditor.imageManager.imageDeleted (e, editor, data)

Triggered after the image was deleted from image manager.

  • e

    The callback event.

  • editor

    The editor instance.

  • data

    An object with additional data of the image.

CODE EXAMPLES

Set the imageManager.imageDeleted event:

$('.selector').on('froalaEditor.imageManager.imageDeleted', function (e, editor, data) {
  // Do something here.
});

Unset the imageManager.imageDeleted event:

$('.selector').off('froalaEditor.imageManager.imageDeleted');

froalaEditor.imageManager.imageLoaded (e, editor, $img)

Triggered after an image was loaded in image manager.

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery object of the image loaded.

CODE EXAMPLES

Set the imageManager.imageLoaded event:

$('.selector').on('froalaEditor.imageManager.imageLoaded', function (e, editor, $img) {
  // Do something here.
});

Unset the imageManager.imageLoaded event:

$('.selector').off('froalaEditor.imageManager.imageLoaded');

froalaEditor.imageManager.imagesLoaded (e, editor, data)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • data

    The data returned from the server.

CODE EXAMPLES

Set the imageManager.imagesLoaded event:

$('.selector').on('froalaEditor.imageManager.imagesLoaded', function (e, editor, data) {
  // Do something here.
});

Unset the imageManager.imagesLoaded event:

$('.selector').off('froalaEditor.imageManager.imagesLoaded');

Paste

froalaEditor.paste.after (e, editor)

Triggered after pasting something into the Froala Rich Text Editor.

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the paste.after event:

$('.selector').on('froalaEditor.paste.after', function (e, editor) {
  // Do something here.
});

Unset the paste.after event:

$('.selector').off('froalaEditor.paste.after');

froalaEditor.paste.afterCleanup (e, editor, 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.

  • e

    The callback event.

  • editor

    The editor instance.

  • clipboard_html

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

CODE EXAMPLES

Set the paste.afterCleanup event:

$('.selector').on('froalaEditor.paste.afterCleanup', function (e, editor, clipboard_html) {
  // Do something here.
});

Unset the paste.afterCleanup event:

$('.selector').off('froalaEditor.paste.afterCleanup');

froalaEditor.paste.before (e, editor, 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.

  • e

    The callback event.

  • editor

    The editor instance.

  • original_event

    The jQuery event object for the paste event.

CODE EXAMPLES

Set the paste.before event:

$('.selector').on('froalaEditor.paste.before', function (e, editor, original_event) {
  // Do something here.
});

Unset the paste.before event:

$('.selector').off('froalaEditor.paste.before');

froalaEditor.paste.beforeCleanup (e, editor, 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.

  • e

    The callback event.

  • editor

    The editor instance.

  • clipboard_html

    The clipboard pasted HTML.

CODE EXAMPLES

Set the paste.beforeCleanup event:

$('.selector').on('froalaEditor.paste.beforeCleanup', function (e, editor, clipboard_html) {
  // Do something here.
});

Unset the paste.beforeCleanup event:

$('.selector').off('froalaEditor.paste.beforeCleanup');

Popups

froalaEditor.popups.hide.[id] (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the popups.hide.[id] event:

$('.selector').on('froalaEditor.popups.hide.[id]', function (e, editor) {
  // Do something here.
});

Unset the popups.hide.[id] event:

$('.selector').off('froalaEditor.popups.hide.[id]');

Save

froalaEditor.save.after (e, editor, data)

Triggered after the save request.

  • e

    The callback event.

  • editor

    The editor instance.

  • data

    The returned data from the save request.

CODE EXAMPLES

Set the save.after event:

$('.selector').on('froalaEditor.save.after', function (e, editor, data) {
  // Do something here.
});

Unset the save.after event:

$('.selector').off('froalaEditor.save.after');

froalaEditor.save.before (e, editor)

Triggered before doing the save request.
Note:Returning false in the handler assigned to the event will cancel the current action.

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the save.before event:

$('.selector').on('froalaEditor.save.before', function (e, editor) {
  // Do something here.
});

Unset the save.before event:

$('.selector').off('froalaEditor.save.before');

froalaEditor.save.error (e, editor, error, response)

Triggered when an error occurs during save request.

  • e

    The callback event.

  • editor

    The editor instance.

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

$('.selector').on('froalaEditor.save.error', function (e, editor, error, response) {
  // Do something here.
});

Unset the save.error event:

$('.selector').off('froalaEditor.save.error');

Snapshot

froalaEditor.snapshot.after (e, editor)

Triggered after getting a snapshot

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the snapshot.after event:

$('.selector').on('froalaEditor.snapshot.after', function (e, editor) {
  // Do something here.
});

Unset the snapshot.after event:

$('.selector').off('froalaEditor.snapshot.after');

froalaEditor.snapshot.before (e, editor)

Triggered before getting a snapshot.

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the snapshot.before event:

$('.selector').on('froalaEditor.snapshot.before', function (e, editor) {
  // Do something here.
});

Unset the snapshot.before event:

$('.selector').off('froalaEditor.snapshot.before');

Toolbar

froalaEditor.toolbar.hide (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the toolbar.hide event:

$('.selector').on('froalaEditor.toolbar.hide', function (e, editor) {
  // Do something here.
});

Unset the toolbar.hide event:

$('.selector').off('froalaEditor.toolbar.hide');

froalaEditor.toolbar.show (e, editor)

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

  • e

    The callback event.

  • editor

    The editor instance.

CODE EXAMPLES

Set the toolbar.show event:

$('.selector').on('froalaEditor.toolbar.show', function (e, editor) {
  // Do something here.
});

Unset the toolbar.show event:

$('.selector').off('froalaEditor.toolbar.show');

Video

froalaEditor.video.codeError (e, editor, code)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • code

    The original code inserted by the user.

CODE EXAMPLES

Set the video.codeError event:

$('.selector').on('froalaEditor.video.codeError', function (e, editor, code) {
  // Do something here.
});

Unset the video.codeError event:

$('.selector').off('froalaEditor.video.codeError');

froalaEditor.video.inserted (e, editor, $video)

Triggered after video was inserted.

  • e

    The callback event.

  • editor

    The editor instance.

  • $video

    The jQuery object for the inserted video.

CODE EXAMPLES

Set the video.inserted event:

$('.selector').on('froalaEditor.video.inserted', function (e, editor, $video) {
  // Do something here.
});

Unset the video.inserted event:

$('.selector').off('froalaEditor.video.inserted');

froalaEditor.video.linkError (e, editor, link)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • link

    The original link input from the user.

CODE EXAMPLES

Set the video.linkError event:

$('.selector').on('froalaEditor.video.linkError', function (e, editor, link) {
  // Do something here.
});

Unset the video.linkError event:

$('.selector').off('froalaEditor.video.linkError');

froalaEditor.video.removed (e, editor, $video)

Triggered after video was removed.

  • e

    The callback event.

  • editor

    The editor instance.

  • $video

    The jQuery object for the removed video.

CODE EXAMPLES

Set the video.removed event:

$('.selector').on('froalaEditor.video.removed', function (e, editor, $video) {
  // Do something here.
});

Unset the video.removed event:

$('.selector').off('froalaEditor.video.removed');

froalaEditor.video.beforeRemove (e, editor, $video)

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

  • e

    The callback event.

  • editor

    The editor instance.

  • $video

    The jQuery object of the video to be removed.

CODE EXAMPLES

Set the video.beforeRemove event:

$('.selector').on('froalaEditor.video.beforeRemove', function (e, editor, $video) {
  // Do something here.
});

Unset the video.beforeRemove event:

$('.selector').off('froalaEditor.video.beforeRemove');
Top