- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
Events
Do you think we can improve this article? Let us know.
Buttons
buttons.refresh ()
Triggered when the buttons should be refreshed.
Note: Returning false
in the handler assigned to the event will cancel the current action.
CODE EXAMPLES
Set the buttons.refresh
event:
new FroalaEditor('.selector', {
events: {
'buttons.refresh': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Char Counter
charCounter.exceeded ()
Triggered when the maxCharNumber was exceeded.
CODE EXAMPLES
Set the charCounter.exceeded
event:
new FroalaEditor('.selector', {
events: {
'charCounter.exceeded': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
charCounter.update ()
Triggered when the charCounter should update.
CODE EXAMPLES
Set the charCounter.update
event:
new FroalaEditor('.selector', {
events: {
'charCounter.update': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Code View
codeView.update ()
Triggered when the code view is changed.
CODE EXAMPLES
Set the codeView.update
event:
new FroalaEditor('.selector', {
events: {
'codeView.update': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Commands
commands.after (cmd, param1, param2)
This event is a generic event that is triggered after every command executed in the editor. The command information are passed through the cmd
, param1
and param2
parameters.
cmd | Description | param1 | param2 |
---|---|---|---|
align | Triggered when a block is aligned. | The alignment value: left , center , right , justify | - |
backgroundColor | Triggered when background color is set. | The new color. | - |
bold | Triggered when bold command is executed. | - | - |
clearFormatting | Triggered when clearFormatting command is executed. | - | - |
fontFamily | Triggered when font family is changed. | The new value for font family. | - |
fontSize | Triggered when font size is changed. | The new value for font size. | - |
formatOL | Triggered when insertOrderedList command is executed. | - | - |
formatUL | Triggered when insertUnorderedList command is executed. | - | - |
fullscreen | Triggered when fullscreen buttons is clicked. | - | - |
html | Triggered when the code view button is hit. | - | - |
imageAlign | Triggered when the image is aligned. | The alignment value: left , justify , right or center . | - |
imageDisplay | Triggered when the image display has changed. | The display value: inline or block | - |
imageSetAlt | Triggered when setting image alt. | - | - |
imageSetSize | Triggered when setting image size. | - | - |
imageStyle | Triggered when the image style has changed. | Possible values are the ones specified by the imageStyles option. | - |
indent | Triggered when a block is indented. | - | - |
inlineStyle | Triggered when an inline style is set. | Possible values are the ones specified by the inlineStyles option. | - |
insertHR | Triggered when a horizontal line is inserted. | - | - |
italic | Triggered when italic command is executed. | - | - |
linkInsert | Triggered when a link was inserted either in the editor or on an image. | - | - |
linkList | Triggered when a predefined link is selected. | The predefined link key. | - |
linkOpen | Triggered when hitting the open link button from the link edit popup. | - | - |
linkRemove | Triggered when a link was removed either from the editor or from an image. | - | - |
linkStyle | Triggered when a link style was chosed. | Possible values are the ones specified by the linkStyles option. | - |
outdent | Triggered when a block is outdented. | - | - |
paragraphFormat | Triggered when a block is formatted. | The paragraph type. | - |
paragraphStyle | Triggered when an paragraph style is changed. | Possible values are the ones specified by the paragraphStyles option. | - |
quote | Triggered when a quote command is executed. | Possible commands: increase , decrease | - |
redo | Triggered when redo. | - | - |
selectAll | Triggered when selectAll command is executed. | - | - |
strikeThrough | Triggered when strikeThrough command is executed. | - | - |
subscript | Triggered when subscript command is executed. | - | - |
superscript | Triggered when superscript command is executed. | - | - |
tableCellBackgroundColor | Triggered when a cell background color is changed. | The new color. | - |
tableCellStyle | Triggered when a cell style is changed. | Possible values are the ones specified by the tableCellStyles option. | - |
tableCells | Triggered when a cell command is executed. | Possible actions: horizontal-split , vertical-split , merge | - |
tableColumns | Triggered when a columns command is executed. | Possible actions: delete , after , before | - |
tableHeader | Triggered when the table header button is hit. | - | - |
tableInsert | Triggered when a table is inserted. | - | The number of rows and columns: rows , cols |
tableRemove | Triggered when the table is deleted. | - | - |
tableRows | Triggered when a rows command is executed | Possible actions: delete , above , below | - |
tableCellVerticalAlign | Triggered when table cell vertical align is changed. | Possible actions: top , middle , bottom | - |
tableCellHorizontalAlign | Triggered when table cell horizontal align is changed. | Possible actions: left , right , center , justify | - |
textColor | Triggered when the text color is set. | The new color. | - |
underline | Triggered when underlin command is executed. | - | - |
undo | Triggered when undo command is executed. | - | - |
updateText | Triggered when the text is updated when the option editInPopup is used. | - | - |
videoALign | Triggered when the video is aligned. | The alignment value: left , justify , right | - |
videoDisplay | Triggered when the video display is changed. | The display value: inline , block . | - |
videoInsertEmbed | Triggered when video is inserted with embedded code. | - | - |
videoInsertByURL | Triggered when video is inserted by URL. | - | - |
videoRemove | Triggered when the current video is removed. | - | - |
videoSetSize | Triggered when setting video size. | - | - |
-
cmd
The command name.
-
param1
Possible first parameter for command.
-
param2
Possible second parameter for command.
CODE EXAMPLES
Set the commands.after
event:
new FroalaEditor('.selector', {
events: {
'commands.after': function (cmd, param1, param2) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
commands.before (cmd, param1, param2)
This event is a generic event that is triggered before every command executed in the editor. The command information are passed through the cmd
, param1
and param2
parameters. For more details, please see the table with possible values from the commands.after event.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
cmd
The command name.
-
param1
Possible first parameter for command.
-
param2
Possible second parameter for command.
CODE EXAMPLES
Set the commands.before
event:
new FroalaEditor('.selector', {
events: {
'commands.before': function (cmd, param1, param2) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
commands.mousedown (btn)
This event is a generic event that is triggered after every command clicked in the editor.
-
btn
The button reference.
CODE EXAMPLES
Set the commands.mousedown
event:
new FroalaEditor('.selector', {
events: {
'commands.mousedown': function (btn) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
commands.redo ()
This event is a generic event that is triggered after command redo.
CODE EXAMPLES
Set the commands.redo
event:
new FroalaEditor('.selector', {
events: {
'commands.redo': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
commands.undo ()
This event is a generic event that is triggered after command undo.
CODE EXAMPLES
Set the commands.undo
event:
new FroalaEditor('.selector', {
events: {
'commands.undo': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Edit
edit.on ()
Triggered after the editor is enabled for editing.
CODE EXAMPLES
Set the edit.on
event:
new FroalaEditor('.selector', {
events: {
'edit.on': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
edit.off ()
Triggered after the editor is disabled for editing.
CODE EXAMPLES
Set the edit.off
event:
new FroalaEditor('.selector', {
events: {
'edit.off': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Element
element.dropped (element)
Triggered after the any element is dropped in editor.
-
element
Reference object of dropped element.
CODE EXAMPLES
Set the element.dropped
event:
new FroalaEditor('.selector', {
events: {
'element.dropped': function (element) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Embedly
embedly.beforeRemove (embeded)
Triggered before the embedly embeded is removed from editor.
-
embeded
Current embeded object to be removed.
CODE EXAMPLES
Set the embedly.beforeRemove
event:
new FroalaEditor('.selector', {
events: {
'embedly.beforeRemove': function (embeded) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
File
file.beforeUpload (files)
Triggered before uploading a file to the server.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
files
An array with the files to be uploaded.
CODE EXAMPLES
Set the file.beforeUpload
event:
new FroalaEditor('.selector', {
events: {
'file.beforeUpload': function (files) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
file.error (error, response)
Triggered after error is occured in uploading a file to the server.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
error
An object containing error code and description.
-
response
Response object received from server.
CODE EXAMPLES
Set the file.error
event:
new FroalaEditor('.selector', {
events: {
'file.error': function (error, response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
file.inserted ($file, response)
Triggered after the request to upload a file has been completed successfully.
-
$file
A jQuery object with the inserted file.
-
response
The original response from the server.
CODE EXAMPLES
Set the file.inserted
event:
new FroalaEditor('.selector', {
events: {
'file.inserted': function ($file, response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
file.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);
}
}
});
Files Manager
filesManager.beforeUpload (files)
Triggered before uploading a file to the server.
Note: Returning false in the handler assigned to the event will cancel the current action.
-
Files
An array with the files to be uploaded.
CODE EXAMPLES
Set the filesManager.beforeUpload
event:
new FroalaEditor('.selector', {
events: {
'filesManager.beforeUpload': function (files) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
filesManager.error (error, response)
Triggered before uploading a file to the server.
Note:Returning false
in the handler assigned to the event will cancel the current action.
-
error
An object containing error code and description.
-
response
Response object received from server.
CODE EXAMPLES
Set the filesManager.error
event:
new FroalaEditor('.selector', {
events: {
'filesManager.error': function (error, response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
filesManager.uploaded (response)
Triggered after the file was uploaded.
Note:Returning false
in the handler assigned to the event will cancel the current action.
-
response
The original server response.
CODE EXAMPLES
Set the filesManager.uploaded
event:
new FroalaEditor('.selector', {
events: {
'filesManager.uploaded': function (response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
filesManager.uploadedToS3 (link, key, response)
Triggered after the file was uploaded to S3.
Note:Returning false
in the handler assigned to the event will cancel the current action.
-
link
The link to the uploaded file.
-
key
The key of the uploaded file.
-
response
The original server response.
CODE EXAMPLES
Set the filesManager.uploadedToS3
event:
new FroalaEditor('.selector', {
events: {
'filesManager.uploadedToS3': function (link, key, response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Filestack
filestack.filestackPickerClosed (response)
Triggered when Filestack Picker is closed
-
response
The original Filestack Picker response.
CODE EXAMPLES
Set the filestack.filestackPickerClosed
event:
new FroalaEditor('.selector', {
events: {
'filestack.filestackPickerClosed': function (response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
filestack.filestackPickerOpened (response)
Triggered when Filestack Picker is opened
-
response
The original Filestack Picker response.
CODE EXAMPLES
Set the filestack.filestackPickerOpened
event:
new FroalaEditor('.selector', {
events: {
'filestack.filestackPickerOpened': function (response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
filestack.uploadedToFilestack (response)
Triggered after successful file upload to the Filestack server.
-
response
The original server response.
CODE EXAMPLES
Set the filestack.uploadedToFilestack
event:
new FroalaEditor('.selector', {
events: {
'filestack.uploadedToFilestack': function (response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
filestack.uploadFailedToFilestack (response)
Triggered after the file upload to the Filestack server fails.
-
response
The original server response.
CODE EXAMPLES
Set the filestack.uploadFailedToFilestack
event:
new FroalaEditor('.selector', {
events: {
'filestack.uploadFailedToFilestack': function (response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
General
blur ()
Triggered after the Froala Rich Text Editor looses "focus".
CODE EXAMPLES
Set the blur
event:
new FroalaEditor('.selector', {
events: {
'blur': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
click (clickEvent)
Triggered by the click event of the editable area.
-
clickEvent
The jQuery click event.
CODE EXAMPLES
Set the click
event:
new FroalaEditor('.selector', {
events: {
'click': function (clickEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
contentChanged ()
Triggered when the content from the Froala Rich Text Editor has changed.
CODE EXAMPLES
Set the contentChanged
event:
new FroalaEditor('.selector', {
events: {
'contentChanged': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
destroy ()
Triggered when the destroy method was called.
CODE EXAMPLES
Set the destroy
event:
new FroalaEditor('.selector', {
events: {
'destroy': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
drop (dropEvent)
Triggered by the drop event of the editable area. Instead of assigning the event this way, it is better to assign it like described in the dropped event example.
-
dropEvent
The jQuery drop event.
CODE EXAMPLES
Set the drop
event:
new FroalaEditor('.selector', {
events: {
'drop': function (dropEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
focus ()
Triggered after the Froala Rich Text Editor gets focused.
CODE EXAMPLES
Set the focus
event:
new FroalaEditor('.selector', {
events: {
'focus': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
initialized ()
Triggered when the Froala Rich Text Editor has finished to initialize.
CODE EXAMPLES
Set the initialized
event:
new FroalaEditor('.selector', {
events: {
'initialized': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
initializationDelayed ()
Triggered when the Froala Rich Text Editor has finished to do basic initialization for initOnClick
option.
CODE EXAMPLES
Set the initializationDelayed
event:
new FroalaEditor('.selector', {
events: {
'initializationDelayed': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
input (inputEvent)
Triggered by the input event of the editable area.
-
inputEvent
The jQuery input event.
CODE EXAMPLES
Set the input
event:
new FroalaEditor('.selector', {
events: {
'input': function (inputEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
keydown (keydownEvent)
Triggered by the keydown event of the editable area.
-
keydownEvent
The jQuery keydown event.
CODE EXAMPLES
Set the keydown
event:
new FroalaEditor('.selector', {
events: {
'keydown': function (keydownEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
keypress (keypressEvent)
Triggered by the keypress event of the editable area.
-
keypressEvent
The jQuery keypress event.
CODE EXAMPLES
Set the keypress
event:
new FroalaEditor('.selector', {
events: {
'keypress': function (keypressEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
keyup (keyupEvent)
Triggered by the keyup event of the editable area.
-
keyupEvent
The jQuery keyup event.
CODE EXAMPLES
Set the keyup
event:
new FroalaEditor('.selector', {
events: {
'keyup': function (keyupEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
mousedown (mousedownEvent)
Triggered by the mousedown event of the editable area.
-
mousedownEvent
The jQuery mousedown event.
CODE EXAMPLES
Set the mousedown
event:
new FroalaEditor('.selector', {
events: {
'mousedown': function (mousedownEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
mouseup (mouseupEvent)
Triggered by the mouseup event of the editable area.
-
mouseupEvent
The jQuery mouseup event.
CODE EXAMPLES
Set the mouseup
event:
new FroalaEditor('.selector', {
events: {
'mouseup': function (mouseupEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
shortcut (e, cmd, val)
Triggered before the command is executed via shortcut.
-
e
The event object.
-
cmd
The command name
-
val
The value of registered shortcut
CODE EXAMPLES
Set the shortcut
event:
new FroalaEditor('.selector', {
events: {
'shortcut': function (e, cmd, val) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
touchstart (touchstartEvent)
Triggered by the touchstart event of the editable area.
-
touchstartEvent
The jQuery touchstart event.
CODE EXAMPLES
Set the touchstart
event:
new FroalaEditor('.selector', {
events: {
'touchstart': function (touchstartEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
touchend (touchendEvent)
Triggered by the touchend event of the editable area.
-
touchendEvent
The jQuery touchend event.
CODE EXAMPLES
Set the touchend
event:
new FroalaEditor('.selector', {
events: {
'touchend': function (touchendEvent) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
HTML
html.afterGet ()
Triggered after the HTML was served to the html.get method.
CODE EXAMPLES
Set the html.afterGet
event:
new FroalaEditor('.selector', {
events: {
'html.afterGet': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
html.beforeGet ()
Triggered before the HTML was served to the html.get method.
CODE EXAMPLES
Set the html.beforeGet
event:
new FroalaEditor('.selector', {
events: {
'html.beforeGet': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
html.processGet (el)
Triggered before the HTML is getting cleaned.
-
el
Element to be cleaned
CODE EXAMPLES
Set the html.processGet
event:
new FroalaEditor('.selector', {
events: {
'html.processGet': function (el) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
html.get (html)
Triggered when the HTML of the editor is saved or synced. If a string is returned, then the new string will be used.
-
html
The HTML from the editor.
CODE EXAMPLES
Set the html.get
event:
new FroalaEditor('.selector', {
events: {
'html.get': function (html) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
html.set ()
Triggered after the HTML was set into the editor.
CODE EXAMPLES
Set the html.set
event:
new FroalaEditor('.selector', {
events: {
'html.set': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Image
image.beforePasteUpload (img)
Triggered before uploading a pasted image from clipboard to the server.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
img
The DOM element representing the image to be uploaded.
CODE EXAMPLES
Set the image.beforePasteUpload
event:
new FroalaEditor('.selector', {
events: {
'image.beforePasteUpload': function (img) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
image.beforeRemove ($img)
Triggered after user confirms to remove the image from the Froala Rich Text Editor, but before actually removing it.
Note: The image is removed only from the editable box and no delete request is being made the server.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
$img
A jQuery object with the image to be removed.
CODE EXAMPLES
Set the image.beforeRemove
event:
new FroalaEditor('.selector', {
events: {
'image.beforeRemove': function ($img) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
image.beforeUpload (images)
Triggered before uploading an image to the server.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
images
An array with the images to be uploaded.
CODE EXAMPLES
Set the image.beforeUpload
event:
new FroalaEditor('.selector', {
events: {
'image.beforeUpload': function (images) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
image.hideResizer (images)
Triggered before uploading an image to the server.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
images
An array with the images to be uploaded.
CODE EXAMPLES
Set the image.hideResizer
event:
new FroalaEditor('.selector', {
events: {
'image.hideResizer': function (images) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
image.error (error, response)
Triggered by an error occurred while trying to load the image.
Code | Message | Description |
---|---|---|
1 | Image cannot be loaded from the passed link. | The passed link is either incorrect or the file is not an image. |
2 | No link in upload response. | Incorrect response for the HTTP request to upload image. The response did not respect the instructions from imageUploadURL option. |
3 | Error during file upload. | |
4 | Parsing response failed. | |
5 | File is too large. | |
6 | Image file type is invalid. | |
7 | Files can be uploaded only to same domain in IE 8 and IE 9. |
-
error
An object containing error
code
and errormessage
. -
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);
}
}
});
Image Manager
imageManager.beforeDeleteImage ($img)
Triggered before deleting an image from the image manager.
-
$img
The jQuery object with the thumb of the image to be removed.
CODE EXAMPLES
Set the imageManager.beforeDeleteImage
event:
new FroalaEditor('.selector', {
events: {
'imageManager.beforeDeleteImage': function ($img) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
imageManager.error (error, response)
Triggered by an error occurred while trying to load images inside the image manager.
Code | Message | Description |
---|---|---|
10 | Image cannot be loaded from the passed link. | The passed link is either incorrect or the file is not an image. |
11 | Error during load images request. | The HTTP request to load images failed. The imageManagerLoadURL option may be set incorrect, the server faild to respond or a custom error was sent by the server. |
12 | Missing imageManagerLoadURL option. | The imageManagerLoadURL option was not set. |
13 | Parsing load response failed. | The load images response does not respect the required structure: imageManagerLoadURL and cannot be parsed. |
14 | Missing image thumb. | The load images response did not contain thumb . Although this is not required, it is highly recommended to use thumb . Thumbs are used for the images displayed in the image manager, instead of displaying the full-sized image to prevent server overload. |
15 | Missing image URL. | The load images response did not contain url for an image. |
21 | Error during delete image request. | The HTTP request to delete an image faild. The imageManagerDeleteURL option may be set incorrect, the server faild to respond or a custom error was sent by the server. |
22 | Missing imageManagerDeleteURL option. | The imageManagerDeleteURL option was not set. |
-
error
An object containing error
code
and errormessage
. -
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
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
paste.after ()
Triggered after pasting something into the Froala Rich Text Editor.
CODE EXAMPLES
Set the paste.after
event:
new FroalaEditor('.selector', {
events: {
'paste.after': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
paste.afterCleanup (clipboard_html)
Triggered after the content was pasted from the clipboard into the Froala Rich Text Editor and it was cleaned up. If a string is returned, the new string will be used as the pasted content.
-
clipboard_html
A string with the pasted content after it was cleaned up.
CODE EXAMPLES
Set the paste.afterCleanup
event:
new FroalaEditor('.selector', {
events: {
'paste.afterCleanup': function (clipboard_html) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
paste.before (original_event)
Triggered before pasting something into the Froala Rich Text Editor.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
original_event
The jQuery event object for the paste event.
CODE EXAMPLES
Set the paste.before
event:
new FroalaEditor('.selector', {
events: {
'paste.before': function (original_event) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
paste.beforeCleanup (clipboard_html)
Triggered after the content is pasted from the clipboard into the Froala Rich Text Editor. If a string is returned the new string will be used as the pasted content.
-
clipboard_html
The clipboard pasted HTML.
CODE EXAMPLES
Set the paste.beforeCleanup
event:
new FroalaEditor('.selector', {
events: {
'paste.beforeCleanup': function (clipboard_html) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
paste.wordPaste (clipboard_html)
Triggered after the content is pasted from the MS Office into the Froala Rich Text Editor.
-
clipboard_html
The clipboard pasted HTML.
CODE EXAMPLES
Set the paste.wordPaste
event:
new FroalaEditor('.selector', {
events: {
'paste.wordPaste': function (clipboard_html) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Popups
popups.hide.[id] ()
Triggered when a popup is hidden. [id] should be replaced with the id of the popup.
CODE EXAMPLES
Set the popups.hide.[id]
event:
new FroalaEditor('.selector', {
events: {
'popups.hide.[id]': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
popups.show.[id] ()
Triggered when a popup is shown. [id] should be replaced with the id of the popup.
CODE EXAMPLES
Set the popups.show.[id]
event:
new FroalaEditor('.selector', {
events: {
'popups.show.[id]': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Position
position.refresh ()
Triggered before the position of toolbar is refreshed.
CODE EXAMPLES
Set the position.refresh
event:
new FroalaEditor('.selector', {
events: {
'position.refresh': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
popups.show.[id] ()
Triggered when a popup is shown. [id] should be replaced with the id of the popup.
CODE EXAMPLES
Set the popups.show.[id]
event:
new FroalaEditor('.selector', {
events: {
'popups.show.[id]': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Save
save.after (data)
Triggered after the save request.
-
data
The returned data from the save request.
CODE EXAMPLES
Set the save.after
event:
new FroalaEditor('.selector', {
events: {
'save.after': function (data) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
save.before (html)
Triggered before doing the save request. If a string is returned, the new string will be used as the saved content.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
html
The HTML to save.
CODE EXAMPLES
Set the save.before
event:
new FroalaEditor('.selector', {
events: {
'save.before': function (html) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
save.error (error, response)
Triggered when an error occurs during save request.
-
error
The description of the error that happened during the save request.
-
response
The original response from the server.
CODE EXAMPLES
Set the save.error
event:
new FroalaEditor('.selector', {
events: {
'save.error': function (error, response) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Snapshot
snapshot.after ()
Triggered after getting a snapshot
CODE EXAMPLES
Set the snapshot.after
event:
new FroalaEditor('.selector', {
events: {
'snapshot.after': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
snapshot.before ()
Triggered before getting a snapshot.
CODE EXAMPLES
Set the snapshot.before
event:
new FroalaEditor('.selector', {
events: {
'snapshot.before': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Table
table.inserted (table)
Triggered after the table was inserted.
-
table
The DOM element for the inserted table.
CODE EXAMPLES
Set the table.inserted
event:
new FroalaEditor('.selector', {
events: {
'table.inserted': function (table) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
table.resized (table)
Triggered after the table was resized.
-
table
The DOM element for the resized table.
CODE EXAMPLES
Set the table.resized
event:
new FroalaEditor('.selector', {
events: {
'table.resized': function (table) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Toolbar
toolbar.esc ()
Triggered before hiding the toolbar on pressing esc key.
Note: Returning false
in the handler assigned to the event will cancel the current action.
CODE EXAMPLES
Set the toolbar.esc
event:
new FroalaEditor('.selector', {
events: {
'toolbar.esc': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
toolbar.focusEditor ()
Triggered when doing focus on editor.
Note: Returning false
in the handler assigned to the event will cancel the current action.
CODE EXAMPLES
Set the toolbar.focusEditor
event:
new FroalaEditor('.selector', {
events: {
'toolbar.focusEditor': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
toolbar.hide ()
Triggered when hiding the editor toolbar.
Note: Returning false
in the handler assigned to the event will cancel the current action.
CODE EXAMPLES
Set the toolbar.hide
event:
new FroalaEditor('.selector', {
events: {
'toolbar.hide': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
toolbar.show ()
Triggered when showing the editor toolbar.
Note: Returning false
in the handler assigned to the event will cancel the current action.
CODE EXAMPLES
Set the toolbar.show
event:
new FroalaEditor('.selector', {
events: {
'toolbar.show': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
Video
video.codeError (code)
Triggered by an error occurred while trying to insert a video by embedded code.
-
code
The original code inserted by the user.
CODE EXAMPLES
Set the video.codeError
event:
new FroalaEditor('.selector', {
events: {
'video.codeError': function (code) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
video.inserted ($video)
Triggered after video was inserted.
-
$video
The jQuery object for the inserted video.
CODE EXAMPLES
Set the video.inserted
event:
new FroalaEditor('.selector', {
events: {
'video.inserted': function ($video) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
video.replaced ($video)
Triggered after video was replaced.
-
$video
The jQuery object for the inserted video.
CODE EXAMPLES
Set the video.replaced
event:
new FroalaEditor('.selector', {
events: {
'video.replaced': function ($video) {
// Do something here.
// this is the editor instance.
console.log(this);
})
}
});
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);
}
}
});
Quick Insert
quickInsert.commands.after (cmd)
This event is a generic event that is triggered after every command inside the Quick Insert tool is executed. The command information are passed through the cmd
parameter.
-
cmd
The command name.
CODE EXAMPLES
Set the quickInsert.commands.after
event:
new FroalaEditor('.selector', {
events: {
'quickInsert.commands.after': function (cmd) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
quickInsert.commands.before (cmd)
This event is a generic event that is triggered before every command inside the Quick Insert tool is executed. The command information are passed through the cmd
parameter.
Note: Returning false
in the handler assigned to the event will cancel the current action.
-
cmd
The command name.
CODE EXAMPLES
Set the quickInsert.commands.before
event:
new FroalaEditor('.selector', {
events: {
'quickInsert.commands.before': function (cmd) {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
URL
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
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);
}
}
});
Word Counter
wordCounter.exceeded ()
Triggered when the maxWordNumber was exceeded.
CODE EXAMPLES
Set the wordCounter.exceeded
event:
new FroalaEditor('.selector', {
events: {
'wordCounter.exceeded': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});
wordCounter.update ()
Triggered when the wordCounter should update.
CODE EXAMPLES
Set the wordCounter.update
event:
new FroalaEditor('.selector', {
events: {
'wordCounter.update': function () {
// Do something here.
// this is the editor instance.
console.log(this);
}
}
});