It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.

Events

blur buttons.refresh charCounter.exceeded charCounter.update click commands.after commands.before contentChanged destroy drop file.beforeUpload file.inserted file.unlink file.uploaded file.uploadedToS3 focus html.afterGet html.beforeGet html.get html.set image.beforePasteUpload image.beforeRemove image.beforeUpload image.error 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 mousedown mouseup paste.after paste.afterCleanup paste.before paste.beforeCleanup popups.hide.[id] popups.show.[id] quickInsert.commands.after quickInsert.commands.before save.after save.before save.error snapshot.after snapshot.before table.inserted table.resized toolbar.hide toolbar.show touchend touchstart url.linked video.beforeRemove video.codeError video.inserted video.linkError video.removed

Buttons

buttons.refresh

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

charCounter.exceeded charCounter.update

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

commands.after commands.before

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

file.beforeUpload file.inserted file.unlink file.uploaded file.uploadedToS3

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.unlink (e, editor, link)

Triggered after removing a file link.
Note: Returning false in the handler assigned to the event will cancel the current action.

e

The callback event.
editor

The editor instance.
link

A DOM Object with the link removed.

CODE EXAMPLES

Set the file.unlink event:

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

Unset the file.unlink event:

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

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

blur click contentChanged destroy drop focus initialized initializationDelayed input keydown keypress keyup mousedown mouseup touchstart touchend

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

html.afterGet html.beforeGet html.get html.set

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

image.beforePasteUpload image.beforeRemove image.beforeUpload image.error image.inserted image.loaded image.removed image.replaced image.resize image.resizeEnd image.uploaded image.uploadedToS3

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

imageManager.beforeDeleteImage imageManager.error imageManager.imageDeleted imageManager.imageLoaded imageManager.imagesLoaded

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');

Link

link.bad

froalaEditor.link.bad (e, editor, original_href)

Triggered when a bad link is typed for insertion into the Froala Rich Text Editor.

e

The callback event.
editor

The editor instance.
original_href

The URL introduced by the user and rejected as bad link.

CODE EXAMPLES

Set the link.bad event:

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

Unset the link.bad event:

$('.selector').off('froalaEditor.link.bad');

Link

link.beforeInsert

froalaEditor.link.beforeInsert (e, editor, link, text, attrs)

Triggered before inserting a link inside the editor
Note: Returning false in the handler assigned to the event will cancel the current action.

e

The callback event.
editor

The editor instance.
link

The URL to be inserted.
text

The text to be used for the link.
attrs

An object with the attrs to be added to the list.

CODE EXAMPLES

Set the link.beforeInsert event:

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

Unset the link.beforeInsert event:

$('.selector').off('froalaEditor.link.beforeInsert');

Paste

paste.after paste.afterCleanup paste.before paste.beforeCleanup

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

popups.hide.[id] popups.show.[id]

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]');

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

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

e

The callback event.
editor

The editor instance.

CODE EXAMPLES

Set the popups.show.[id] event:

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

Unset the popups.show.[id] event:

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

Save

save.after save.before save.error

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, 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.

e

The callback event.
editor

The editor instance.
html

The HTML to save.

CODE EXAMPLES

Set the save.before event:

$('.selector').on('froalaEditor.save.before', function (e, editor, html) {
// 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

snapshot.after snapshot.before

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');

Table

table.inserted table.resized

froalaEditor.table.inserted (e, editor, table)

Triggered after the table was inserted.

e

The callback event.
editor

The editor instance.
table

The DOM element for the inserted table.

CODE EXAMPLES

Set the table.inserted event:

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

Unset the table.inserted event:

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

froalaEditor.table.resized (e, editor, table)

Triggered after the table was resized.

e

The callback event.
editor

The editor instance.
table

The DOM element for the resized table.

CODE EXAMPLES

Set the table.resized event:

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

Unset the table.resized event:

$('.selector').off('froalaEditor.table.resized');

Video

video.codeError video.inserted video.linkError video.removed video.beforeRemove

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');

Quick Insert

quickInsert.commands.after quickInsert.commands.before

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

e

The callback event.
editor

The editor instance.
cmd

The command name.

CODE EXAMPLES

Set the quickInsert.commands.after event:

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

Unset the quickInsert.commands.after event:

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

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

e

The callback event.
editor

The editor instance.
cmd

The command name.

CODE EXAMPLES

Set the quickInsert.commands.before event:

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

Unset the quickInsert.commands.before event:

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

URL

url.linked

froalaEditor.url.linked (e, editor, link)

Triggered after auto-linking an url while typing.

e

The callback event.
editor

The editor instance.
link

The inserted link.

CODE EXAMPLES

Set the url.linked event:

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

Unset the url.linked event:

$('.selector').off('froalaEditor.url.linked');