Skip to content

Events

editable.afterFileUpload (e, editor, response)

  • e

    The callback event.

  • editor

    The editor instance.

  • response

    The original server response.

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

CODE EXAMPLES

Set the afterFileUpload event:

$('.selector').on('editable.afterFileUpload', function (e, editor, response) {
// Do something here.
});

Unset the afterFileUpload event:

$('.selector').off('editable.afterFileUpload');

editable.afterImageUpload (e, editor, response)

  • e

    The callback event.

  • editor

    The editor instance.

  • response

    The original server response.

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

CODE EXAMPLES

Set the afterImageUpload event:

$('.selector').on('editable.afterImageUpload', function (e, editor, response) {
// Do something here.
});

Unset the afterImageUpload event:

$('.selector').off('editable.afterImageUpload');

editable.afterPaste (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after pasting something into the Froala Rich Text Editor.

CODE EXAMPLES

Set the afterPaste event:

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

Unset the afterPaste event:

$('.selector').off('editable.afterPaste');

editable.afterPasteCleanup (e, editor, html)

  • e

    The callback event.

  • editor

    The editor instance.

  • html

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

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.

CODE EXAMPLES

Set the afterPasteCleanup event:

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

Unset the afterPasteCleanup event:

$('.selector').off('editable.afterPasteCleanup');

editable.afterRemoveImage (e, editor, img)

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

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.

CODE EXAMPLES

Set the afterRemoveImage event:

$('.selector').on('editable.afterRemoveImage', function (e, editor, img) {
// Do something here.
});

Unset the afterRemoveImage event:

$('.selector').off('editable.afterRemoveImage');

editable.afterSave (e, editor, data)

  • e

    The callback event.

  • editor

    The editor instance.

  • data

    The returned data from the save request.

Triggered after the save request.

CODE EXAMPLES

Set the afterSave event:

$('.selector').on('editable.afterSave', function (e, editor, data) {
// Do something here.
});

Unset the afterSave event:

$('.selector').off('editable.afterSave');

editable.afterUploadPastedImage (e, editor, img)

  • e

    The callback event.

  • editor

    The editor instance.

  • img

    A jQuery object with the image to be uploaded.

Triggered after an image pasted from clipboard is uploaded.

CODE EXAMPLES

Set the afterUploadPastedImage event:

$('.selector').on('editable.afterUploadPastedImage', function (e, editor, img) {
// Do something here.
});

Unset the afterUploadPastedImage event:

$('.selector').off('editable.afterUploadPastedImage');

editable.align (e, editor, value)

  • e

    The callback event.

  • editor

    The editor instance.

  • value

    The alignment value.

Triggered after a block is aligned.

CODE EXAMPLES

Set the align event:

$('.selector').on('editable.align', function (e, editor, value) {
// Do something here.
});

Unset the align event:

$('.selector').off('editable.align');

editable.backColor (e, editor, newColor)

  • e

    The callback event.

  • editor

    The editor instance.

  • newColor

    The new color.

Triggered after background color is set.

CODE EXAMPLES

Set the backColor event:

$('.selector').on('editable.backColor', function (e, editor, newColor) {
// Do something here.
});

Unset the backColor event:

$('.selector').off('editable.backColor');
  • e

    The callback event.

  • editor

    The editor instance.

  • url

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

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

CODE EXAMPLES

Set the badLink event:

$('.selector').on('editable.badLink', function (e, editor, url) {
// Do something here.
});

Unset the badLink event:

$('.selector').off('editable.badLink');

editable.beforeDeleteImage (e, editor, img)

  • e

    The callback event.

  • editor

    The editor instance.

  • img

    A jQuery object with the image to be deleted.

Triggered before doing a delete request to the URL passed as imageDeleteURL. The request is being made by the deleteImage method. Returning false in the handler assigned to the event will cancel the current action.

CODE EXAMPLES

Set the beforeDeleteImage event:

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

Unset the beforeDeleteImage event:

$('.selector').off('editable.beforeDeleteImage');

editable.beforeFileUpload (e, editor, files)

  • e

    The callback event.

  • editor

    The editor instance.

  • files

    An array with the filesf to be uploaded.

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

CODE EXAMPLES

Set the beforeFileUpload event:

$('.selector').on('editable.beforeFileUpload', function (e, editor, files) {
// Do something here.
});

Unset the beforeFileUpload event:

$('.selector').off('editable.beforeFileUpload');

editable.beforeImageUpload (e, editor, images)

  • e

    The callback event.

  • editor

    The editor instance.

  • images

    An array with the images to be uploaded.

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

CODE EXAMPLES

Set the beforeImageUpload event:

$('.selector').on('editable.beforeImageUpload', function (e, editor, images) {
// Do something here.
});

Unset the beforeImageUpload event:

$('.selector').off('editable.beforeImageUpload');

editable.beforePaste (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

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

CODE EXAMPLES

Set the beforePaste event:

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

Unset the beforePaste event:

$('.selector').off('editable.beforePaste');

editable.beforeRemoveImage (e, editor, img)

  • e

    The callback event.

  • editor

    The editor instance.

  • img

    A jQuery object with the image to be removed.

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

CODE EXAMPLES

Set the beforeRemoveImage event:

$('.selector').on('editable.beforeRemoveImage', function (e, editor, img) {
// Do something here.
});

Unset the beforeRemoveImage event:

$('.selector').off('editable.beforeRemoveImage');

editable.beforeSave (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered before doing the save request. The request can be cancelled by returning false in the event assigned method.

CODE EXAMPLES

Set the beforeSave event:

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

Unset the beforeSave event:

$('.selector').off('editable.beforeSave');

editable.beforeUploadPastedImage (e, editor, img)

  • e

    The callback event.

  • editor

    The editor instance.

  • img

    The DOM element representing the image to be uploaded.

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

CODE EXAMPLES

Set the beforeUploadPastedImage event:

$('.selector').on('editable.beforeUploadPastedImage', function (e, editor, img) {
// Do something here.
});

Unset the beforeUploadPastedImage event:

$('.selector').off('editable.beforeUploadPastedImage');

editable.blur (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

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

CODE EXAMPLES

Set the blur event:

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

Unset the blur event:

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

editable.bold (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a bold command is executed.

CODE EXAMPLES

Set the bold event:

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

Unset the bold event:

$('.selector').off('editable.bold');

editable.cellDeleted (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after the selected cell or cells are deleted.

CODE EXAMPLES

Set the cellDeleted event:

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

Unset the cellDeleted event:

$('.selector').off('editable.cellDeleted');

editable.cellHorizontalSplit (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a cell is split horizontally.

CODE EXAMPLES

Set the cellHorizontalSplit event:

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

Unset the cellHorizontalSplit event:

$('.selector').off('editable.cellHorizontalSplit');

editable.cellInsertedAfter (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a cell is inserted after the selected cell.

CODE EXAMPLES

Set the cellInsertedAfter event:

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

Unset the cellInsertedAfter event:

$('.selector').off('editable.cellInsertedAfter');

editable.cellInsertedBefore (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a cell is inserted before the selected cell.

CODE EXAMPLES

Set the cellInsertedBefore event:

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

Unset the cellInsertedBefore event:

$('.selector').off('editable.cellInsertedBefore');

editable.cellVerticalSplit (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a cell is split vertically.

CODE EXAMPLES

Set the cellVerticalSplit event:

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

Unset the cellVerticalSplit event:

$('.selector').off('editable.cellVerticalSplit');

editable.cellsMerged (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after the selected cells are merged.

CODE EXAMPLES

Set the cellsMerged event:

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

Unset the cellsMerged event:

$('.selector').off('editable.cellsMerged');

editable.columnDeleted (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after the selected column or columns are deleted.

CODE EXAMPLES

Set the columnDeleted event:

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

Unset the columnDeleted event:

$('.selector').off('editable.columnDeleted');

editable.columnInsertedAfter (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a column is inserted after the current column.

CODE EXAMPLES

Set the columnInsertedAfter event:

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

Unset the columnInsertedAfter event:

$('.selector').off('editable.columnInsertedAfter');

editable.columnInsertedBefore (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a column is inserted before the current column.

CODE EXAMPLES

Set the columnInsertedBefore event:

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

Unset the columnInsertedBefore event:

$('.selector').off('editable.columnInsertedBefore');

editable.contentChanged (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

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

CODE EXAMPLES

Set the contentChanged event:

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

Unset the contentChanged event:

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

editable.fileError (e, editor, error)

  • e

    The callback event.

  • editor

    The editor instance.

  • error

    An object containing error code and error message.

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

CODE EXAMPLES

Set the fileError event:

$('.selector').on('editable.fileError', function (e, editor, error) {
// Do something here.
});

Unset the fileError event:

$('.selector').off('editable.fileError');

editable.fileUploaded (e, editor, filename, link, response)

  • e

    The callback event.

  • editor

    The editor instance.

  • filename

    The name of the uploaded file.

  • link

    The link to the uploaded file.

  • response

    The original response from the server.

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

CODE EXAMPLES

Set the fileUploaded event:

$('.selector').on('editable.fileUploaded', function (e, editor, filename, link, response) {
// Do something here.
});

Unset the fileUploaded event:

$('.selector').off('editable.fileUploaded');

editable.focus (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after the Froala Rich Text Editor gets focused.

CODE EXAMPLES

Set the focus event:

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

Unset the focus event:

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

editable.fontFamily (e, editor, newValue)

  • e

    The callback event.

  • editor

    The editor instance.

  • newValue

    The new value for font family.

Triggered after font family is changed.

CODE EXAMPLES

Set the fontFamily event:

$('.selector').on('editable.fontFamily', function (e, editor, newValue) {
// Do something here.
});

Unset the fontFamily event:

$('.selector').off('editable.fontFamily');

editable.fontSize (e, editor, newValue)

  • e

    The callback event.

  • editor

    The editor instance.

  • newValue

    The new value for font size.

Triggered after font size is changed.

CODE EXAMPLES

Set the fontSize event:

$('.selector').on('editable.fontSize', function (e, editor, newValue) {
// Do something here.
});

Unset the fontSize event:

$('.selector').off('editable.fontSize');

editable.foreColor (e, editor, newColor)

  • e

    The callback event.

  • editor

    The editor instance.

  • newColor

    The new color.

Triggered after the text color is set.

CODE EXAMPLES

Set the foreColor event:

$('.selector').on('editable.foreColor', function (e, editor, newColor) {
// Do something here.
});

Unset the foreColor event:

$('.selector').off('editable.foreColor');

editable.formatBlock (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a block is formatted.

CODE EXAMPLES

Set the formatBlock event:

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

Unset the formatBlock event:

$('.selector').off('editable.formatBlock');

editable.getHTML (e, editor, html)

  • e

    The callback event.

  • editor

    The editor instance.

  • html

    The HTML from the editor.

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

CODE EXAMPLES

Set the getHTML event:

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

Unset the getHTML event:

$('.selector').off('editable.getHTML');

editable.htmlHide (e, editor, html)

  • e

    The callback event.

  • editor

    The editor instance.

  • html

    The HTML from the editor.

Triggered after the html hide button is hit.

CODE EXAMPLES

Set the htmlHide event:

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

Unset the htmlHide event:

$('.selector').off('editable.htmlHide');

editable.htmlShow (e, editor, html)

  • e

    The callback event.

  • editor

    The editor instance.

  • html

    The HTML from the editor.

Triggered after the html show button is hit.

CODE EXAMPLES

Set the htmlShow event:

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

Unset the htmlShow event:

$('.selector').off('editable.htmlShow');

editable.imageAltSet (e, editor, $img)

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery image object.

Triggered after setting image alt.

CODE EXAMPLES

Set the imageAltSet event:

$('.selector').on('editable.imageAltSet', function (e, editor, $img) {
// Do something here.
});

Unset the imageAltSet event:

$('.selector').off('editable.imageAltSet');

editable.imageDeleteError (e, editor, message)

  • e

    The callback event.

  • editor

    The editor instance.

  • message

    A string explaining the reason of the error.

Triggered by an error is occurred when trying to delete an image from the server.

CODE EXAMPLES

Set the imageDeleteError event:

$('.selector').on('editable.imageDeleteError', function (e, editor, message) {
// Do something here.
});

Unset the imageDeleteError event:

$('.selector').off('editable.imageDeleteError');

editable.imageDeleteSuccess (e, editor, data)

  • e

    The callback event.

  • editor

    The editor instance.

  • data

    The returned data from the save request.

Triggered after the request to delete image from the server has been completed successfully.

CODE EXAMPLES

Set the imageDeleteSuccess event:

$('.selector').on('editable.imageDeleteSuccess', function (e, editor, data) {
// Do something here.
});

Unset the imageDeleteSuccess event:

$('.selector').off('editable.imageDeleteSuccess');

editable.imageError (e, editor, error)

  • e

    The callback event.

  • editor

    The editor instance.

  • error

    An object containing error code and error message.

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

CODE EXAMPLES

Set the imageError event:

$('.selector').on('editable.imageError', function (e, editor, error) {
// Do something here.
});

Unset the imageError event:

$('.selector').off('editable.imageError');

editable.imageFloatedLeft (e, editor, $img)

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery image object.

Triggered when the image is floated to the left.

CODE EXAMPLES

Set the imageFloatedLeft event:

$('.selector').on('editable.imageFloatedLeft', function (e, editor, $img) {
// Do something here.
});

Unset the imageFloatedLeft event:

$('.selector').off('editable.imageFloatedLeft');

editable.imageFloatedNone (e, editor, $img)

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery image object.

Triggered when the image is centered.

CODE EXAMPLES

Set the imageFloatedNone event:

$('.selector').on('editable.imageFloatedNone', function (e, editor, $img) {
// Do something here.
});

Unset the imageFloatedNone event:

$('.selector').off('editable.imageFloatedNone');

editable.imageFloatedRight (e, editor, $img)

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery image object.

Triggered when the image is floated to the right.

CODE EXAMPLES

Set the imageFloatedRight event:

$('.selector').on('editable.imageFloatedRight', function (e, editor, $img) {
// Do something here.
});

Unset the imageFloatedRight event:

$('.selector').off('editable.imageFloatedRight');

editable.imageInserted (e, editor, img)

  • e

    The callback event.

  • editor

    The editor instance.

  • img

    A jQuery object containing the inserted image.

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

CODE EXAMPLES

Set the imageInserted event:

$('.selector').on('editable.imageInserted', function (e, editor, img) {
// Do something here.
});

Unset the imageInserted event:

$('.selector').off('editable.imageInserted');

editable.imageLinkInserted (e, editor, URL)

  • e

    The callback event.

  • editor

    The editor instance.

  • URL

    The URL of the added link.

Triggered after a link was added to an image.

CODE EXAMPLES

Set the imageLinkInserted event:

$('.selector').on('editable.imageLinkInserted', function (e, editor, URL) {
// Do something here.
});

Unset the imageLinkInserted event:

$('.selector').off('editable.imageLinkInserted');

editable.imageLinkRemoved (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a link was removed from an image.

CODE EXAMPLES

Set the imageLinkRemoved event:

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

Unset the imageLinkRemoved event:

$('.selector').off('editable.imageLinkRemoved');

editable.imageLoaded (e, editor, URL)

  • e

    The callback event.

  • editor

    The editor instance.

  • URL

    The URL of the loaded image.

Triggered when an image has finished to load successfully.

CODE EXAMPLES

Set the imageLoaded event:

$('.selector').on('editable.imageLoaded', function (e, editor, URL) {
// Do something here.
});

Unset the imageLoaded event:

$('.selector').off('editable.imageLoaded');

editable.imageReplaced (e, editor, img)

  • e

    The callback event.

  • editor

    The editor instance.

  • img

    A jQuery object containing the new image.

Triggered after image was replaced with a new one.

CODE EXAMPLES

Set the imageReplaced event:

$('.selector').on('editable.imageReplaced', function (e, editor, img) {
// Do something here.
});

Unset the imageReplaced event:

$('.selector').off('editable.imageReplaced');

editable.imageResize (e, editor, $img)

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery object containing the resized image.

Triggered while doing image resize.

CODE EXAMPLES

Set the imageResize event:

$('.selector').on('editable.imageResize', function (e, editor, $img) {
// Do something here.
});

Unset the imageResize event:

$('.selector').off('editable.imageResize');

editable.imageResizeEnd (e, editor, $img)

  • e

    The callback event.

  • editor

    The editor instance.

  • $img

    The jQuery object containing the resized image.

Triggered when image resize has finished.

CODE EXAMPLES

Set the imageResizeEnd event:

$('.selector').on('editable.imageResizeEnd', function (e, editor, $img) {
// Do something here.
});

Unset the imageResizeEnd event:

$('.selector').off('editable.imageResizeEnd');

editable.imagesLoaded (e, editor, data)

  • e

    The callback event.

  • editor

    The editor instance.

  • data

    The data returned from the server.

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

CODE EXAMPLES

Set the imagesLoaded event:

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

Unset the imagesLoaded event:

$('.selector').off('editable.imagesLoaded');

editable.imagesLoadError (e, editor, message)

  • e

    The callback event.

  • editor

    The editor instance.

  • message

    A string explaining the reason of the error.

Triggered by an error occurred when loading the images list from the server in the media manager.

CODE EXAMPLES

Set the imagesLoadError event:

$('.selector').on('editable.imagesLoadError', function (e, editor, message) {
// Do something here.
});

Unset the imagesLoadError event:

$('.selector').off('editable.imagesLoadError');

editable.indent (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a block is indented.

CODE EXAMPLES

Set the indent event:

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

Unset the indent event:

$('.selector').off('editable.indent');

editable.initialized (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

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

CODE EXAMPLES

Set the initialized event:

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

Unset the initialized event:

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

editable.italic (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after italic command is executed.

CODE EXAMPLES

Set the italic event:

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

Unset the italic event:

$('.selector').off('editable.italic');

editable.linkInserted (e, editor, URL)

  • e

    The callback event.

  • editor

    The editor instance.

  • URL

    The URL of the inserted link.

Triggered after a link was inserted.

CODE EXAMPLES

Set the linkInserted event:

$('.selector').on('editable.linkInserted', function (e, editor, URL) {
// Do something here.
});

Unset the linkInserted event:

$('.selector').off('editable.linkInserted');

editable.linkRemoved (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a link was removed.

CODE EXAMPLES

Set the linkRemoved event:

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

Unset the linkRemoved event:

$('.selector').off('editable.linkRemoved');

editable.maxCharNumberExceeded (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered when the maxCharNumber was exceeded.

CODE EXAMPLES

Set the maxCharNumberExceeded event:

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

Unset the maxCharNumberExceeded event:

$('.selector').off('editable.maxCharNumberExceeded');

editable.onPaste (e, editor, html)

  • e

    The callback event.

  • editor

    The editor instance.

  • html

    A string with the pasted content.

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.

CODE EXAMPLES

Set the onPaste event:

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

Unset the onPaste event:

$('.selector').off('editable.onPaste');

editable.orderedListInserted (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after insertOrderedList command is executed.

CODE EXAMPLES

Set the orderedListInserted event:

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

Unset the orderedListInserted event:

$('.selector').off('editable.orderedListInserted');

editable.outdent (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a block is outdented.

CODE EXAMPLES

Set the outdent event:

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

Unset the outdent event:

$('.selector').off('editable.outdent');

editable.redo (e, editor, newHTML, oldHTML)

  • e

    The callback event.

  • editor

    The editor instance.

  • newHTML

    The HTML set after redo action.

  • oldHTML

    The HTML that was before the redo action.

Triggered after redo.

CODE EXAMPLES

Set the redo event:

$('.selector').on('editable.redo', function (e, editor, newHTML, oldHTML) {
// Do something here.
});

Unset the redo event:

$('.selector').off('editable.redo');

editable.rowDeleted (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after the selected row or rows are deleted.

CODE EXAMPLES

Set the rowDeleted event:

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

Unset the rowDeleted event:

$('.selector').off('editable.rowDeleted');

editable.rowInsertedAbove (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a row is inserted after the current row.

CODE EXAMPLES

Set the rowInsertedAbove event:

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

Unset the rowInsertedAbove event:

$('.selector').off('editable.rowInsertedAbove');

editable.rowInsertedBelow (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a row is inserted before the current row.

CODE EXAMPLES

Set the rowInsertedBelow event:

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

Unset the rowInsertedBelow event:

$('.selector').off('editable.rowInsertedBelow');

editable.saveError (e, editor, error)

  • e

    The callback event.

  • editor

    The editor instance.

  • error

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

Triggered when an error occurs during save request.

CODE EXAMPLES

Set the saveError event:

$('.selector').on('editable.saveError', function (e, editor, error) {
// Do something here.
});

Unset the saveError event:

$('.selector').off('editable.saveError');

editable.selectAll (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after selectAll command is executed.

CODE EXAMPLES

Set the selectAll event:

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

Unset the selectAll event:

$('.selector').off('editable.selectAll');

editable.strikeThrough (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after strikeThrough command is executed.

CODE EXAMPLES

Set the strikeThrough event:

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

Unset the strikeThrough event:

$('.selector').off('editable.strikeThrough');

editable.subscript (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after the subscript command is executed.

CODE EXAMPLES

Set the subscript event:

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

Unset the subscript event:

$('.selector').off('editable.subscript');

editable.superscript (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after the superscript command is executed.

CODE EXAMPLES

Set the superscript event:

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

Unset the superscript event:

$('.selector').off('editable.superscript');

editable.tableDeleted (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after the table is deleted.

CODE EXAMPLES

Set the tableDeleted event:

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

Unset the tableDeleted event:

$('.selector').off('editable.tableDeleted');

editable.tableInserted (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after a table is inserted.

CODE EXAMPLES

Set the tableInserted event:

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

Unset the tableInserted event:

$('.selector').off('editable.tableInserted');

editable.underline (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after underline command is executed.

CODE EXAMPLES

Set the underline event:

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

Unset the underline event:

$('.selector').off('editable.underline');

editable.undo (e, editor, newHTML, oldHTML)

  • e

    The callback event.

  • editor

    The editor instance.

  • newHTML

    The HTML set after undo action.

  • oldHTML

    The HTML that was before the undo action.

Triggered after undo.

CODE EXAMPLES

Set the undo event:

$('.selector').on('editable.undo', function (e, editor, newHTML, oldHTML) {
// Do something here.
});

Unset the undo event:

$('.selector').off('editable.undo');

editable.unorderedListInserted (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after insertUnorderedList command is executed.

CODE EXAMPLES

Set the unorderedListInserted event:

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

Unset the unorderedListInserted event:

$('.selector').off('editable.unorderedListInserted');

editable.videoError (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

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

CODE EXAMPLES

Set the videoError event:

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

Unset the videoError event:

$('.selector').off('editable.videoError');

editable.videoFloatedLeft (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered when the video is floated to the left.

CODE EXAMPLES

Set the videoFloatedLeft event:

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

Unset the videoFloatedLeft event:

$('.selector').off('editable.videoFloatedLeft');

editable.videoFloatedNone (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered when the video is centered.

CODE EXAMPLES

Set the videoFloatedNone event:

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

Unset the videoFloatedNone event:

$('.selector').off('editable.videoFloatedNone');

editable.videoFloatedRight (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered when the video is floated to the right.

CODE EXAMPLES

Set the videoFloatedRight event:

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

Unset the videoFloatedRight event:

$('.selector').off('editable.videoFloatedRight');

editable.videoInserted (e, editor, code)

  • e

    The callback event.

  • editor

    The editor instance.

  • code

    The code of the inserted video.

Triggered after video was inserted.

CODE EXAMPLES

Set the videoInserted event:

$('.selector').on('editable.videoInserted', function (e, editor, code) {
// Do something here.
});

Unset the videoInserted event:

$('.selector').off('editable.videoInserted');

editable.videoRemoved (e, editor)

  • e

    The callback event.

  • editor

    The editor instance.

Triggered after video was removed.

CODE EXAMPLES

Set the videoRemoved event:

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

Unset the videoRemoved event:

$('.selector').off('editable.videoRemoved');