Froala Editor v4.3 is hereLEARN MORE
It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
Migrate from Version 1
Initialization
In version 2 we have renamed the plugin from $.Editable to $.FroalaEditor to make it more suggestive and avoid any name conflict. Therefore, when initializing the editor or calling a method inside the editor, froalaEditor() method should be used instead of editable().
Plugins
In version 2 some of the core features in version 1 were made plugins. The following features have been moved to plugins:
| Feature | New Plugin Name |
|---|---|
| align | ../js/plugins/align.min.js |
| showHtml | ../js/plugins/code_view.min.js |
| image | ../js/plugins/image.min.js |
| link | ../js/plugins/link.min.js |
| formatBlock | ../js/plugins/paragraph_format.min.js |
| save | ../js/plugins/save.min.js |
Some of the existing plugins were renamed to prevent confusion and improve consistency:
| Old Plugin | New Plugin |
|---|---|
| block_styles | paragraph_style |
| file_upload | file |
| inline_styles | inline_style |
| media_manager | image_manager |
| tables | table |
| urls | url |
NEW PLUGINS
The following plugins were newly added:
emoticons,
line_breaker,
quote.
Options
In version 2, some options were renamed to make them easier to find and browse. Some of them were removed because they are no longer necessary or they were out of the editor's scope.
CHANGED OPTIONS
| Old Option | New Option |
|---|---|
| allowedAttrs | htmlAllowedAttrs |
| allowedBlankTags | htmlAllowedEmptyTags |
| allowedFileTypes | fileAllowedTypes |
| allowedImageTypes | imageAllowedTypes |
| allowedTags | htmlAllowedTags |
| allowComments | htmlAllowComments |
| allowScript | htmlRemoveTags |
| allowStyle | htmlRemoveTags |
| alwaysBlank | linkAlwaysBlank |
| alwaysVisible | toolbarVisibleWithoutSelection |
| autosave | saveInterval |
| autosaveInterval | saveInterval |
| beautifyCode | codeBeautifier |
| blockStyles | paragraphStyles should be used instead. However, it is not possible to set specific classes for a paragraph block anymore. |
| blockStylesToggle | paragraphStylesMultiple |
| blockTags | paragraphFormat |
| buttons | toolbarButtons |
| colorGroups | No longer available. |
| colors | colorsBackground/colorsText |
| convertEmailAddress | linkConvertEmailAddress |
| countCharacters | charCounterCount |
| crossDomain | requestWithCORS |
| customButtons | Replaced by $.FroalaEditor.RegisterCommand. See Custom Buttons for more details. |
| customDropdowns | Replaced by $.FroalaEditor.RegisterCommand. See Custom Dropdown for more details. |
| customImageButtons | Replaced by $.FroalaEditor.RegisterCommand. See Custom Image Button for more details. |
| customText | To change any text from the editor's interface a language file should be used. |
| defaultBlockStyle | paragraphStyles |
| defaultColorGroup | colorsDefaultTab |
| defaultImageAlignment | imageDefaultAlign |
| defaultImageDisplay | imageDefaultDisplay |
| defaultImageTitle | No longer available. |
| defaultImageWidth | imageDefaultWidth |
| defaultTag | The default tag can be customized through the enter option. |
| defaultVideoAlignment | videoDefaultAlign |
| doNotJoinTags | No longer required. |
| fontList | fontFamily |
| formatTags | No longer available. |
| headers | requestHeaders |
| iconClasses | Replaced by icons module. See Custom Icon for more details. |
| icons | Replaced by icons module. See Custom Icon for more details. |
| imageButtons | imageEditButtons |
| imageDeleteConfirmation | Deleting image is out of the editor's scope. |
| imageDeleteParams | Deleting image is out of the editor's scope. |
| imageDeleteURL | Deleting image is out of the editor's scope. |
| imageLink | $.FroalaEditor.POPUP_TEMPLATES.imageInsert should be changed. |
| imageTitle | imageAlt should be removed from imageEditButtons. |
| imageUpload | $.FroalaEditor.POPUP_TEMPLATES.imageInsert should be changed. |
| imagesLoadParams | imageManagerLoadParams |
| imagesLoadURL | imageManagerLoadURL |
| inlineMode | toolbarInline |
| linkText | No longer an option. It appears by default. |
| maxCharacters | charCounterMax |
| maxFileSize | fileMaxSize |
| maxHeight | heightMax |
| maxImageSize | imageMaxSize |
| mediaManager | $.FroalaEditor.POPUP_TEMPLATES.imageInsert should be changed. |
| minHeight | heightMin |
| noFollow | linkAlwaysNoFollow |
| paragraphy | enter |
| pasteImage | imagePaste |
| pastedImagesUploadRequestType | No longer required. Pasted images are uploaded the same way as the other images. |
| pastedImagesUploadURL | No longer required. Pasted images are uploaded the same way as the other images. |
| placeholder | placeholderText |
| plainPaste | pastePlain |
| preloaderSrc | imageManagerPreloader |
| saveRequestType | saveMethod |
| selfClosingTags | No longer required. |
| shortcuts | shortcutsEnabled |
| shortcutsAvailable | shortcutsEnabled |
| showNextToCursor | No longer available. |
| simpleAmpersand | htmlSimpleAmpersand |
| textNearImage | imageTextNear |
| textNearVideo | videoTextNear |
| toolbarFixed | toolbarSticky |
| trackScroll | No longer required. |
| unlinkButton | linkEditButtons |
| unsupportedAgents | Out of the editor's scope. |
| useFileName | fileUseSelectedText |
| useFrTag | No longer available. The fr-view class should be used instead. See Display Edited Content for more details. |
| videoAllowedAttrs | No longer available. htmlAllowedAttrs will be used to insert embedded code. |
| videoAllowedTags | No longer available.htmlAllowedTags will be used to insert embedded code. |
| videoButtons | videoEditButtons |
| withCredentials | No longer required. It's enabled by default when using the requestWithCORS option. |
NEW OPTIONS
The following options were newly added:
codeMirror
codeMirrorOptions
emoticonsSet
emoticonsStep
entities
fileUploadMethod
fileUploadToS3
fontFamilySelection
fontSize
fontSizeSelection
iframe
iframeStyle
imageAltButtons
imageInsertButtons
imageManagerDeleteMethod
imageManagerLoadMethod
imageManagerPageSize
imageManagerScrollOffset
imageMultipleStyles
imageResizeWithPercent
imageSizeButtons
imageStyles
imageUploadMethod
keepFormatOnDelete
lineBreakerOffset
lineBreakerTags
linkEditButtons
linkInsertButtons
linkMultipleStyles
paragraphFormatSelection
paragraphMultipleStyles
pasteDeniedAttrs
pasteDeniedTags
tableCellMultipleStyles
tableCellStyles
tableColors
tableColorsButtons
tableColorsStep
tableEditButtons
tableInsertButtons
tableInsertMaxSize
tableResizerOffset
tableResizingLimit
toolbarBottom
toolbarButtonsMD
toolbarButtonsSM
toolbarButtonsXS
toolbarStickyOffset
videoDefaultDisplay
videoInsertButtons
videoResize
videoSizeButtons
Methods
One of the main change from version 2 is the modular design. Old methods were moved into modules and some of them were removed because they were out of the editor's scope. If a method that you were using changed its name, we recommend that you also check the list of arguments.
CHANGED METHODS
| Old Method | New Method |
|---|---|
| checkPlaceholder | placeholder.refresh |
| clearSelection | selection.clear |
| deleteImage | Out of the editor's scope. Users's should make custom request to the server to delete image. |
| disable | edit.off |
| enable | edit.on |
| exec | Removed for more granular control. |
| focus | events.focus |
| getHTML | html.get |
| getRange | selection.ranges |
| getSelection | selection.get |
| getSelectionElement | selection.element |
| getSelectionElements | selection.blocks |
| getSelectionLink | link.get |
| getSelectionLinks | link.allSelected |
| getSelectionParent | Out of the editor's scope. selection.element returns the selected element and it can be manipulated further if the parent is needed. |
| getText | Out of the editor's scope. Text inside the editor can be accessed through the jQuery object $(selector).data('froala.editor').$el.text(). |
| hide | toolbar.hide |
| hideMediaManager | imageManager.hide |
| hidePopups | popups.hideAll |
| insertHTML | html.insert |
| isEnabled | No longer available. |
| option | No longer available. |
| option1 | No longer available. |
| option2 | No longer available. |
| option3 | No longer available. |
| placeMarker | markers.place |
| redo | commands.redo |
| refreshButtons | button.bulkRefresh |
| removeFormat | commands.clearFormatting |
| removeMarkers | markers.remove |
| repositionEditor | toolbar.showInline. |
| restoreSelection | selection.restore |
| restoreSelectionByMarkers | selection.restore |
| save | save.save |
| saveSelection | selection.save |
| saveSelectionByMarkers | selection.save |
| saveUndoStep | undo.saveStep |
| selectionInEditor | selection.inEditor |
| setDirty | save.force |
| setHTML | html.set |
| setSelection | $.FroalaEditor.START_MARKER and $.FroalaEditor.END_MARKER should be placed at the start/end of the selection and selection.restore shall be called afterwhile. |
| show | toolbar.showInline |
| showByCoordinates | No longer available. In version 1, this method was used to position both toolbar in inline mode and popups. In version 2, toolbar and popups are no longer related. |
| showInsertImage | The popup module should be used to manipulate image popup display. |
| showInsertLink | The popup module should be used to manipulate link display. |
| showInsertVideo | The popup module should be used to manipulate video display. |
| showMediaManager | imageManager.show |
| sync | +Automatically trigger on contentChanged event. |
| text | selection.text |
| triggerEvent | events.trigger |
| undo | commands.undo |
| writeImage | image.insert |
| writeLink | link.insert |
| writeVideo | video.insert |
NEW METHODS
The following methods were newly added:
align.apply
button.buildList
clean.html
codeView.toggle
colors.background
colors.text
commands.applyProperty
commands.bold
commands.indent
commands.insertHR
commands.italic
commands.outdent
commands.show
commands.strikeThrough
commands.subscript
commands.superscript
commands.underline
core.getXHR
core.injectStyle
core.isEmpty
cursor.backspace
cursor.enter
cursor.del
emoticons.insert
events.add
events.blurActive
events.chainTrigger
events.disableBlur
events.enableBlur
file.insert
file.upload
fontFamily.apply
fontSize.apply
fullscreen.toggle
fullscreen.isActive
helpers.isMobile
helpers.sanitizeURL
html.cleanEmptyTags
html.getSelected
html.unwrap
html.wrap
image.align
image.applyStyle
image.display
image.get
image.setAlt
image.setSize
image.upload
inlineStyle.apply
keys.ctrlKey
keys.isCharacter
language.translate
link.applyStyle
link.remove
lists.format
markers.insert
markers.insertAtPoint
node.blockParent
node.contents
node.deepestParent
node.isBlock
node.isElement
node.isEmpty
node.isList
node.isVoid
paragraphFormat.apply
paragraphStyle.apply
placeholder.hide
placeholder.isVisible
placeholder.show
popups.areVisible
popups.create
popups.get
popups.hide
popups.isVisible
popups.onHide
popups.onRefresh
popups.refresh
popups.setContainer
popups.show
position.getBoundingRect
position.refresh
quote.apply
selection.endElement
selection.info
selection.isCollapsed
selection.isFull
selection.setAfter
selection.setAtEnd
selection.setAtStart
selection.setBefore
size.refresh
size.syncIframe
snapshot.equal
snapshot.get
snapshot.restore
table.insert
toolbar.enable
toolbar.disable
tooltip.bind
tooltip.hide
tooltip.to
undo.canDo
undo.canRedo
undo.reset
video.align
video.display
video.get
video.remove
video.setSize
Events
In version 2, the namespace of the events was changed from editable to froalaEditor. Therefore, events should now be bind accordingly: $(selector).on('froalaEditor.event'). Most of the events from v1 are still available in v2, however most of them changed their name because of the new modular design. We recommend that you also check the list of arguments for the events you are using.
Some of the events from v1 were replaced in v2 by a generic event called commands.after. See commands.after for more details.
CHANGED EVENTS
| Old Event | New Event |
|---|---|
| afterFileUpload | file.uploaded |
| afterImageUpload | image.uploaded |
| afterPaste | paste.after |
| afterPasteCleanup | paste.afterCleanup |
| afterRemoveImage | image.removed |
| afterSave | save.after |
| afterUploadPastedImage | image.uploaded |
| align | commands.after |
| backColor | commands.after |
| badLink | link.bad |
| beforeDeleteImage | Out of the editor's scope. |
| beforeFileUpload | file.beforeUpload |
| beforeImageUpload | image.beforeUpload |
| beforePaste | paste.before |
| beforeRemoveImage | image.beforeRemove |
| beforeSave | save.before |
| beforeUploadPastedImage | image.beforePasteUpload |
| bold | commands.after |
| cellDeleted | No longer available. |
| cellHorizontalSplit | commands.after |
| cellInsertedAfter | No longer available. |
| cellInsertedBefore | No longer available. |
| cellVerticalSplit | commands.after |
| cellsMerged | commands.after |
| columnDeleted | commands.after |
| columnInsertedBefore | commands.after |
| fileError | file.error |
| fileUploaded | file.inserted |
| fontFamily | commands.after |
| fontSize | commands.after |
| foreColor | commands.after |
| formatBlock | commands.after |
| getHTML | html.get |
| htmlHide | commands.after |
| htmlShow | commands.after |
| imageAltSet | commands.after |
| imageDeleteError | Out of the editor's context. |
| imageDeleteSuccess | Out of the editor's context. |
| imageError | image.error |
| imageFloatedLeft | commands.after |
| imageFloatedNone | commands.after |
| imageFloatedRight | commands.after |
| imageInserted | image.inserted |
| imageLinkInserted | commands.after |
| imageLinkRemoved | commands.after |
| imageLoaded | image.loaded |
| imageReplaced | image.replaced |
| imageResize | image.resize |
| imageResizeEnd | image.resizeEnd |
| imagesLoaded | imageManager.imagesLoaded |
| imagesLoadError | imageManager.loadError |
| indent | commands.after |
| italic | commands.after |
| linkInserted | commands.after |
| linkRemoved | commands.after |
| maxCharNumberExceeded | charCounter.exceeded |
| onPaste | beforeCleanup |
| orderedListInserted | commands.after |
| outdent | commands.after |
| redo | commands.after |
| rowDeleted | commands.after |
| rowInsertedAbove | commands.after |
| rowInsertedBelow | commands.after |
| saveError | save.error |
| selectAll | commands.after |
| strikeThrough | commands.after |
| subscript | commands.after |
| superscript | commands.after |
| tableDeleted | commands.after |
| tableInserted | commands.after |
| underline | commands.after |
| undo | commands.after |
| unorderedListInserted | commands.after |
| videoError | video.codeError and video.linkError |
| videoFloatedLeft | commands.after |
| videoFloatedNone | commands.after |
| videoFloatedRight | commands.after |
| videoInserted | video.inserted |
| videoRemoved | video.removed |
NEW EVENTS
The following events were newly added:
buttons.refresh
charCounter.update
commands.before
destroy
file.unlink
file.UploadedToS3
html.afterGet
html.beforeGet
html.set
image.UploadedToS3
imageManager.beforeDeleteImage
imageManager.error
imageManager.imageDeleted
imageManager.imageLoaded
link.beforeRemove
popups.hide.[id]
snapshot.after
snapshot.before
toolbar.hide
toolbar.show
video.beforeRemove