buttons.refresh ()

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

CODE EXAMPLES

Set the buttons.refresh event:

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

charCounter.exceeded ()

Triggered when the maxCharNumber was exceeded.

CODE EXAMPLES

Set the charCounter.exceeded event:

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

charCounter.update ()

Triggered when the charCounter should update.

CODE EXAMPLES

Set the charCounter.update event:

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

codeView.update ()

Triggered when the code view is changed.

CODE EXAMPLES

Set the codeView.update event:

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

commands.after (cmd, param1, param2)

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

• cmd

  The command name.

• param1

  Possible first parameter for command.

• param2

  Possible second parameter for command.

CODE EXAMPLES

Set the commands.after event:

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

commands.before (cmd, param1, param2)

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

• cmd

  The command name.

• param1

  Possible first parameter for command.

• param2

  Possible second parameter for command.

CODE EXAMPLES

Set the commands.before event:

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

commands.mousedown (btn)

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

• btn

  The button reference.

CODE EXAMPLES

Set the commands.mousedown event:

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

commands.redo ()

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

CODE EXAMPLES

Set the commands.redo event:

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

commands.undo ()

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

CODE EXAMPLES

Set the commands.undo event:

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

edit.on ()

Triggered after the editor is enabled for editing.

CODE EXAMPLES

Set the edit.on event:

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

edit.off ()

Triggered after the editor is disabled for editing.

CODE EXAMPLES

Set the edit.off event:

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

element.dropped (element)

Triggered after the any element is dropped in editor.

• element

  Reference object of dropped element.

CODE EXAMPLES

Set the element.dropped event:

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

embedly.beforeRemove (embeded)

Triggered before the embedly embeded is removed from editor.

• embeded

  Current embeded object to be removed.

CODE EXAMPLES

Set the embedly.beforeRemove event:

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

file.beforeUpload (files)

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

• files

  An array with the files to be uploaded.

CODE EXAMPLES

Set the file.beforeUpload event:

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

file.error (error, response)

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

• error

  An object containing error code and description.

• response

  Response object received from server.

CODE EXAMPLES

Set the file.error event:

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

file.inserted ($file, response)

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

• $file

  A jQuery object with the inserted file.

• response

  The original response from the server.

CODE EXAMPLES

Set the file.inserted event:

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

file.unlink (link)

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

• link

  A DOM Object with the link removed.

CODE EXAMPLES

Set the file.unlink event:

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

file.uploaded (response)

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

• response

  The original server response.

CODE EXAMPLES

Set the file.uploaded event:

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

file.uploadedToS3 (link, key, response)

Triggered after the file was uploaded to S3.

• link

  The link to the uploaded file.

• key

  The key of the uploaded file.

• response

  The original server response.

CODE EXAMPLES

Set the file.uploadedToS3 event:

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

blur ()

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

CODE EXAMPLES

Set the blur event:

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

click (clickEvent)

Triggered by the click event of the editable area.

• clickEvent

  The jQuery click event.

CODE EXAMPLES

Set the click event:

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

contentChanged ()

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

CODE EXAMPLES

Set the contentChanged event:

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

destroy ()

Triggered when the destroy method was called.

CODE EXAMPLES

Set the destroy event:

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

drop (dropEvent)

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

• dropEvent

  The jQuery drop event.

CODE EXAMPLES

Set the drop event:

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

focus ()

Triggered after the Froala Rich Text Editor gets focused.

CODE EXAMPLES

Set the focus event:

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

initialized ()

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

CODE EXAMPLES

Set the initialized event:

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

initializationDelayed ()

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

CODE EXAMPLES

Set the initializationDelayed event:

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

input (inputEvent)

Triggered by the input event of the editable area.

• inputEvent

  The jQuery input event.

CODE EXAMPLES

Set the input event:

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

keydown (keydownEvent)

Triggered by the keydown event of the editable area.

• keydownEvent

  The jQuery keydown event.

CODE EXAMPLES

Set the keydown event:

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

keypress (keypressEvent)

Triggered by the keypress event of the editable area.

• keypressEvent

  The jQuery keypress event.

CODE EXAMPLES

Set the keypress event:

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

keyup (keyupEvent)

Triggered by the keyup event of the editable area.

• keyupEvent

  The jQuery keyup event.

CODE EXAMPLES

Set the keyup event:

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

mousedown (mousedownEvent)

Triggered by the mousedown event of the editable area.

• mousedownEvent

  The jQuery mousedown event.

CODE EXAMPLES

Set the mousedown event:

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

mouseup (mouseupEvent)

Triggered by the mouseup event of the editable area.

• mouseupEvent

  The jQuery mouseup event.

CODE EXAMPLES

Set the mouseup event:

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

shortcut (e, cmd, val)

Triggered before the command is executed via shortcut.

• e

  The event object.

• cmd

  The command name

• val

  The value of registered shortcut

CODE EXAMPLES

Set the shortcut event:

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

touchstart (touchstartEvent)

Triggered by the touchstart event of the editable area.

• touchstartEvent

  The jQuery touchstart event.

CODE EXAMPLES

Set the touchstart event:

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

touchend (touchendEvent)

Triggered by the touchend event of the editable area.

• touchendEvent

  The jQuery touchend event.

CODE EXAMPLES

Set the touchend event:

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

html.afterGet ()

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

CODE EXAMPLES

Set the html.afterGet event:

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

html.beforeGet ()

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

CODE EXAMPLES

Set the html.beforeGet event:

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

html.processGet (el)

Triggered before the HTML is getting cleaned.

• el

  Element to be cleaned

CODE EXAMPLES

Set the html.processGet event:

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

html.get (html)

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

• html

  The HTML from the editor.

CODE EXAMPLES

Set the html.get event:

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

html.set ()

Triggered after the HTML was set into the editor.

CODE EXAMPLES

Set the html.set event:

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

image.beforePasteUpload (img)

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

• img

  The DOM element representing the image to be uploaded.

CODE EXAMPLES

Set the image.beforePasteUpload event:

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

image.beforeRemove ($img)

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

• $img

  A jQuery object with the image to be removed.

CODE EXAMPLES

Set the image.beforeRemove event:

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

image.beforeUpload (images)

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

• images

  An array with the images to be uploaded.

CODE EXAMPLES

Set the image.beforeUpload event:

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

image.hideResizer (images)

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

• images

  An array with the images to be uploaded.

CODE EXAMPLES

Set the image.hideResizer event:

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

image.error (error, response)

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

• error

  An object containing error code and error message.

• response

  The original server response.

CODE EXAMPLES

Set the image.error event:

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

image.inserted ($img, response)

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

• $img

  A jQuery object containing the inserted image.

• response

  The original server response.

CODE EXAMPLES

Set the image.inserted event:

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

image.loaded ($img)

Triggered when an image has finished to load successfully.

• $img

  The jQuery object with the loaded image.

CODE EXAMPLES

Set the image.loaded event:

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

image.removed ($img)

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

• $img

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

CODE EXAMPLES

Set the image.removed event:

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

image.replaced ($img, response)

Triggered after image was replaced with a new one.

• $img

  A jQuery object containing the new image.

• response

  The original response from the server.

CODE EXAMPLES

Set the image.replaced event:

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

image.resize ($img)

Triggered while doing image resize.

• $img

  The jQuery object containing the resized image.

CODE EXAMPLES

Set the image.resize event:

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

image.resizeEnd ($img)

Triggered when image resize has finished.

• $img

  The jQuery object containing the resized image.

CODE EXAMPLES

Set the image.resizeEnd event:

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

image.uploaded (response)

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

• response

  The original server response.

CODE EXAMPLES

Set the image.uploaded event:

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

image.uploadedToS3 (link, key, response)

Triggered after image was uploaded to S3.

• link

  The link to the image.

• key

  The S3 key for the image.

• response

  The original server response.

CODE EXAMPLES

Set the image.uploadedToS3 event:

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

imageManager.beforeDeleteImage ($img)

Triggered before deleting an image from the image manager.

• $img

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

CODE EXAMPLES

Set the imageManager.beforeDeleteImage event:

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

imageManager.error (error, response)

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

• error

  An object containing error code and error message.

• response

  The original response from the server.

CODE EXAMPLES

Set the imageManager.error event:

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

imageManager.imageDeleted (data)

Triggered after the image was deleted from image manager.

• data

  An object with additional data of the image.

CODE EXAMPLES

Set the imageManager.imageDeleted event:

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

imageManager.imageLoaded ($img)

Triggered after an image was loaded in image manager.

• $img

  The jQuery object of the image loaded.

CODE EXAMPLES

Set the imageManager.imageLoaded event:

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

imageManager.imagesLoaded (data)

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

• data

  The data returned from the server.

CODE EXAMPLES

Set the imageManager.imagesLoaded event:

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

link.bad (original_href)

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

• original_href

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

CODE EXAMPLES

Set the link.bad event:

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

link.beforeInsert (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.

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

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

link.beforeRemove (link, text, attrs)

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

• 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.beforeRemove event:

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

paste.after ()

Triggered after pasting something into the Froala Rich Text Editor.

CODE EXAMPLES

Set the paste.after event:

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

paste.afterCleanup (clipboard_html)

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

• clipboard_html

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

CODE EXAMPLES

Set the paste.afterCleanup event:

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

paste.before (original_event)

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

• original_event

  The jQuery event object for the paste event.

CODE EXAMPLES

Set the paste.before event:

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

paste.beforeCleanup (clipboard_html)

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

• clipboard_html

  The clipboard pasted HTML.

CODE EXAMPLES

Set the paste.beforeCleanup event:

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

paste.wordPaste (clipboard_html)

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

• clipboard_html

  The clipboard pasted HTML.

CODE EXAMPLES

Set the paste.wordPaste event:

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

popups.hide.[id] ()

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

CODE EXAMPLES

Set the popups.hide.[id] event:

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

popups.show.[id] ()

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

CODE EXAMPLES

Set the popups.show.[id] event:

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

position.refresh ()

Triggered before the position of toolbar is refreshed.

CODE EXAMPLES

Set the position.refresh event:

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

popups.show.[id] ()

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

CODE EXAMPLES

Set the popups.show.[id] event:

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

save.after (data)

Triggered after the save request.

• data

  The returned data from the save request.

CODE EXAMPLES

Set the save.after event:

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

save.before (html)

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

• html

  The HTML to save.

CODE EXAMPLES

Set the save.before event:

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

save.error (error, response)

Triggered when an error occurs during save request.

• error

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

• response

  The original response from the server.

CODE EXAMPLES

Set the save.error event:

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

snapshot.after ()

Triggered after getting a snapshot

CODE EXAMPLES

Set the snapshot.after event:

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

snapshot.before ()

Triggered before getting a snapshot.

CODE EXAMPLES

Set the snapshot.before event:

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

table.inserted (table)

Triggered after the table was inserted.

• table

  The DOM element for the inserted table.

CODE EXAMPLES

Set the table.inserted event:

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

table.resized (table)

Triggered after the table was resized.

• table

  The DOM element for the resized table.

CODE EXAMPLES

Set the table.resized event:

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

toolbar.esc ()

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

CODE EXAMPLES

Set the toolbar.esc event:

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

toolbar.focusEditor ()

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

CODE EXAMPLES

Set the toolbar.focusEditor event:

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

toolbar.hide ()

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

CODE EXAMPLES

Set the toolbar.hide event:

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

toolbar.show ()

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

CODE EXAMPLES

Set the toolbar.show event:

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

video.codeError (code)

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

• code

  The original code inserted by the user.

CODE EXAMPLES

Set the video.codeError event:

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

video.inserted ($video)

Triggered after video was inserted.

• $video

  The jQuery object for the inserted video.

CODE EXAMPLES

Set the video.inserted event:

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

video.replaced ($video)

Triggered after video was replaced.

• $video

  The jQuery object for the inserted video.

CODE EXAMPLES

Set the video.replaced event:

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

video.linkError (link)

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

• link

  The original link input from the user.

CODE EXAMPLES

Set the video.linkError event:

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

video.removed ($video)

Triggered after video was removed.

• $video

  The jQuery object for the removed video.

CODE EXAMPLES

Set the video.removed event:

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

video.loaded ($video)

Triggered after video was loaded.

• $video

  The jQuery object for the removed video.

CODE EXAMPLES

Set the video.loaded event:

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

video.uploaded (response)

Triggered after video was uploaded.

• response

  The response from server.

CODE EXAMPLES

Set the video.uploaded event:

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

video.uploadedToS3 (link, key, response)

Triggered after video was uploaded to S3.

• link

  The link of the uploaded video.

• key

  The key of the uploaded vide.

• response

  The response from server.

CODE EXAMPLES

Set the video.uploadedToS3 event:

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

video.beforeUpload ($video)

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

• $video

  The jQuery object of the video to be uploaded.

CODE EXAMPLES

Set the video.beforeUpload event:

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

video.beforeRemove ($video)

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

• $video

  The jQuery object of the video to be removed.

CODE EXAMPLES

Set the video.beforeRemove event:

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

video.hideResizer ()

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

CODE EXAMPLES

Set the video.hideResizer event:

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

quickInsert.commands.after (cmd)

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

• cmd

  The command name.

CODE EXAMPLES

Set the quickInsert.commands.after event:

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

quickInsert.commands.before (cmd)

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

• cmd

  The command name.

CODE EXAMPLES

Set the quickInsert.commands.before event:

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

url.linked (link)

Triggered after auto-linking an url while typing.

• link

  The inserted link.

CODE EXAMPLES

Set the url.linked event:

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

window.cut ()

Triggered after cut command is executed.

CODE EXAMPLES

Set the window.cut event:

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

window.copy ()

Triggered after copy command is executed.

CODE EXAMPLES

Set the window.copy event:

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