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 Toolbar Buttons Options Methods Events Plugins

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().

In V2, some of the WYSIWYG HTML editor's toolbar button names have changed. The main purpose for this change is to make them sound better and to make them easier to remember.

Old Button	New Button
blockStyle	paragraphStyle
createLink	insertLink
formatBlock	paragraphFormat
insertHorizontalRule	insertHR
insertOrderedList	formatOL
insertUnorderedList	formatUL
removeFormat	clearFormatting
sep	\|
table	insertTable
uploadFile	insertFile

NEW BUTTONS

The following buttons were newly added: -, emoticons, quote.

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