Migrating from Froala V4 to V5 is a straightforward process with no breaking changes, ensuring a seamless transition. Users can quickly and easily upgrade, enjoying the same editor they love while benefiting from more powerful features, an enhanced user experience, and improved stability and reliability. This upgrade promises to maintain the familiar interface while delivering significant enhancements.
To find information on the different options for installing Froala Editor, refer to the Getting Started guide
new FroalaEditor('.editor', {
// Pass options.
optionName: 'Option Value',
anotherOption: 'Froala Option',
yetAnotherOne: 100,
// Bind events
events: {
eventName: function (param1, param2) {
// Get editor instance.
let editor = this;
// Callback code here
// Use editor methods.
editor.method();
}
}
})
The following plugins are available when you migrate to version 5:
Sample code:
new FroalaEditor('#froala-editor', {
pluginsEnabled: ['image', 'link', 'exportToWord', 'codeSnippet'],
}); Learn more about how Froala plugins works.
In addition to the new plugins’ configurations, the following API options have been added:
V5.5.0
| headless | Runs the editor without its own toolbar, popups, or styling, so you can build your own UI and drive the editor through the API. |
| preserveListMarkerStyle | Controls whether bold or italic on a whole list item is stored on the <li> (styling the marker too) or as <strong> and <em> tags inside it. |
| collabConfig.panel.defaultState | Sets whether the collaborative side panel starts expanded, collapsed, or hidden. |
| aiChatModels (updated) | Each model’s webSearch and reasoning flags now control the matching AI Chat toggles. An explicit false disables the toggle for that model. |
| aiChatWebSearchEnabled (updated) | Now a request. The toggle stays off when the selected model declares webSearch: false. |
| aiChatReasoningEnabled (updated) | Now a request. The toggle stays off when the selected model declares reasoning: false. |
| aiAssistRequest (updated) | The handler receives regenerate: true when the user clicks Try again, so a caching backend can return a fresh answer. |
V5.4.0
| aiChatWebSearchEnabled | Sets whether the web-search toggle in the AI Chat panel starts on or off. |
| aiChatModels | Defines the list of selectable AI models shown in the chat panel’s model dropdown. |
| aiChatDefaultModel | Sets which model from aiChatModels is preselected when the panel opens. |
| aiChatReasoningEnabled | Sets whether the reasoning toggle in the AI Chat panel starts on or off. |
| aiChatStreamResponse | Determines whether AI Chat answers stream in gradually or appear all at once. |
| aiChatSupportedFileTypes | Lists the file extensions users can attach as AI Chat context. |
| aiChatMaxFileSizeMB | Sets the maximum size, in MB, allowed for a single attached file. |
| aiChatMaxFiles | Caps how many files can be attached to one AI Chat conversation. |
| aiChatRequestTimeoutMs | Sets how long, in milliseconds, to wait for an AI Chat response before timing out. |
| aiChatIncludeReferenceUrlsInContext | Controls whether “Reference URL” context sources are also folded into the outgoing prompt text. |
| aiChatPanelWidth | Sets the initial width, in pixels, of the AI Chat panel. |
| aiChatPanelMaxWidth | Sets the maximum width, in pixels, the AI Chat panel can be resized to. |
| aiChatWelcomeMessage | Overrides the intro text shown in the AI Chat panel’s empty-state welcome message. |
| aiImproveWritingPrompt | The instruction sent to the AI backend whenever Improve Writing runs. |
| selectionActionButtons | Lists the command buttons shown in the popup that appears when text is selected. |
| inlineSuggestions | Enables Gmail-style inline “ghost text” continuation suggestions while typing. |
| inlineSuggestionsDelay | Sets the debounce delay, in milliseconds, before an inline suggestion is requested. |
| inlineSuggestionsPromptTemplate | The prompt template sent to the AI model to generate an inline continuation suggestion. |
| aiSpeechToText | Shows a microphone button letting users dictate their AI prompt instead of typing it. |
| aiSpeechToTextWaveform | Shows an animated “Listening…” waveform in place of the prompt input while recording. |
| aiSpeechToTextListeningText | The label shown next to the recording waveform. |
| aiSpeechToTextMaxDuration | Sets the maximum recording duration, in seconds, before transcription is triggered automatically. |
| aiAssistRequest | Custom function to handle AI requests, now able to stream via a third onChunk argument and report webSearchUsed on return. |
| fontSizeCustomMin | Defines the minimum font size that can be entered in the Custom Font Size dialog |
| fontSizeCustomMax | Defines the maximum font size that can be entered in the Custom Font Size dialog. |
| importFromWordMammoth | Specifies the Mammoth library instance used to import and convert Microsoft Word (.docx) documents into HTML content. |
| preserveListLineOnBackspace | Prevents Backspace from merging or removing a list item when the cursor is at its start. |
| toolbarButtonsEnabledOnEditorOff | Specify which toolbar buttons should remain active even when the Froala editor is disabled. |
| tableHorizontalResizer | Control table horizontal resizing. |
| tableVerticalResizer | Control table vertical resizing. |
| retainLineBreaksInCellsOnWrap | Control how line breaks within a cell are handled when the cell’s content wraps to multiple lines. |
In addition to the new plugins’ methods, the following API methods have been added:
V5.5.0
V5.4.0
aiChatAssistant.togglePanel
aiChatAssistant.isPanelOpen
aiChatAssistant.sendMessage
aiChatAssistant.addContextSource
aiChatAssistant.removeContextSource
aiChatAssistant.hasActiveConversation
aiChatAssistant.applyToEditor
aiChatAssistant.getChatHistory
aiImproveWriting.applyExternalRewriteDirect
aiAssist.requestAnswerStream
aiImproveWriting.start
aiImproveWriting.hasActiveSession
aiImproveWriting.isInFlight
aiImproveWriting.hasActiveCollabReview
aiImproveWriting.acceptAllSession
aiImproveWriting.rejectAllSession
collaborative.isPanelOpen
collaborative.hidePanelForCoexistence
dockPanel.registerCoexistence
dockPanel.unregisterCoexistence
markdown.getMarkdown
markdown.setMarkdown
aiAssist.requestAnswer
selection.element
In addition to the new plugins’ configurations, the following API events have been added:
V5.5.0
| image.resizeStart | Fires when the user grabs an image resize handle, before the size changes. |
| video.resizeStart | Fires when the user grabs a video resize handle, before the size changes. |
| video.resizeEnd | Fires when the user releases the video resize handle and the new size is applied. |
| collab.panelStateChanged | Fires after the collaborative side panel changes state, passing the new state, the previous state, and what caused it. |
| image.replaced (updated) | Now passes the previous image’s src as a third argument, old_src. |
| video.replaced (updated) | Now passes the upload response and the previous video’s src (old_src) for both upload and URL replacements. |
V5.4.0
| markdown.beforeGet | Fires before getMarkdown() reads the content; returning false cancels the read. |
| markdown.afterGet | Fires after getMarkdown() has retrieved the content. |
| markdown.beforeSet | Fires before setMarkdown() applies new content; returning false cancels the set. |
| markdown.set | Fires after setMarkdown() has successfully applied the content. |
| aiAssist.chatPanelResized | Fires after the user finishes drag-resizing the AI Chat panel. |
| aiAssist.chatBeforeApply | Fires before a chat response is inserted into the document; returning false cancels the insert. |
| aiAssist.chatAfterApply | Fires after a chat response has been inserted into the document. |
| aiAssist.improveWritingStarted | Fires when an Improve Writing request is sent to the AI backend. |
| aiAssist.improveWritingResponse | Fires when the AI response for an Improve Writing request is received. |
| aiAssist.reviewStarted | Fires when a standalone review session opens for AI-suggested changes. |
| aiAssist.hunkResolved | Fires whenever a single change in the active review session is accepted or rejected. |
| aiAssist.reviewEnded | Fires when a review session ends because every change has been resolved. |
| aiAssist.beforeHunkInsert | Fires once per AI-proposed change during a collaborative Suggesting-mode review. |
| dockPanel.opening | Fires when a registered dock panel is about to become visible. |
V5.1.0
| drop.afterCleanup | This event is triggered just after the clean process during a drop operation. |
| drop.beforeCleanup | This event is triggered just before the clean process during a drop operation. |
Version 5 offers increased stability and reliability, ensuring a smoother editing experience with fewer disruptions. It also includes a range of new features and bug fixes that enhance functionality and address issues present in previous versions. By upgrading, users can take advantage of these improvements while continuing to enjoy the seamless operation of their favorite editor.
Key improvements: