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

Toolbar Buttons

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:

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:

Top