Skip to Content

Froala Editor for HTML Field

by
Odoo

$ 68.44

v 19.0 Third Party
Availability
Odoo Online
Odoo.sh
On Premise
Odoo Apps Dependencies • Invoicing (account)
• Discuss (mail)
Lines of code 184
Technical Name sm_froala_editor
LicenseOPL-1
Websitehttps://apps.odoo.com/apps/browse?repo_maintainer_id=512936
Versions 18.0 19.0
You bought this module and need support? Click here!
Availability
Odoo Online
Odoo.sh
On Premise
Odoo Apps Dependencies • Invoicing (account)
• Discuss (mail)
Lines of code 184
Technical Name sm_froala_editor
LicenseOPL-1
Websitehttps://apps.odoo.com/apps/browse?repo_maintainer_id=512936
Versions 18.0 19.0

Froala Editor for HTML Field

Replace the default Odoo HTML editor with Froala — a powerful, beautiful WYSIWYG rich text editor

✓ Beautiful UI ✓ Full Featured ✓ Clean HTML ✓ Fast & Lightweight

Module Video Overview

Features

1 Rich text formatting

Bold, italic, underline, strikethrough, subscript, superscript, font family, font size, text color, background color — a complete formatting suite. Create professional-looking content directly inside Odoo.

2 Tables & media

Insert and edit tables, embed images via URL, insert videos from YouTube or Vimeo, and add horizontal rules. Froala’s table editor makes it easy to create data layouts within your HTML fields.

3 Code view

Toggle between the visual editor and raw HTML source code with a single click. Perfect for developers who need precise control over the HTML output.

4 Paragraph styling

Alignment (left, center, right, justify), ordered & unordered lists, paragraph formats, paragraph styles, line height, indentation, and blockquotes — everything you need for structured content.

5 Easy integration

Simply add widget="froala" to any HTML field in your XML view. The default Odoo editor stays available for all other fields — you choose exactly which fields use Froala.

6 Emoticons & special characters

Built-in emoticon picker and special character inserter. Add personality to your content with emoji and access symbols like ©, ™, €, and more with ease.

How to Use

Step 1: Install the module from the Odoo Apps Store or your addons directory.

Step 2: Add widget="froala" to any HTML field in your XML view definition:

<field name="description" widget="froala"/>

That's it! The field will now use Froala Editor instead of the default editor.

Toolbar Groups

Text Formatting

Bold, Italic, Underline, Strikethrough, Subscript, Superscript, Font Family, Font Size, Text Color, Background Color, Clear Formatting

Paragraph

Align Left/Center/Right/Justify, Ordered List, Unordered List, Paragraph Format, Paragraph Style, Line Height, Outdent, Indent, Quote

Rich Content

Insert Link, Insert Image, Insert Video, Insert Table, Emoticons, Special Characters, Horizontal Rule

Miscellaneous

Undo, Redo, Fullscreen, HTML Code View, Help, Character Counter

Support

We provide free bug fixes and updates for all our modules. If you need help, please submit a support request through the Odoo Apps support page. Our team is always ready to assist you.

Froala Editor for HTML Field — Documentation

1. Getting Started

Prerequisites

Before installing, make sure your environment meets these requirements:

Requirement Description
Odoo Version 19.0 (Community or Enterprise)
Internet Connection Required for loading Froala Editor from CDN (first load only; browser caches it afterwards)

Installation

  1. Upload the sm_froala_editor module folder to your server's custom addons directory.
  2. Restart the Odoo service to detect the new module.
  3. Navigate to Apps menu, click Update Apps List.
  4. Search for "Froala Editor for HTML Field" and click Install.

Note

After installation, the froala widget becomes available for any HTML field in Odoo backend views. No additional configuration is required.

2. Usage

Adding Froala to a Field

To replace the default Odoo HTML editor on a specific field, add widget="froala" in your XML view definition:

<field name="description" widget="froala"/>

Inheriting an existing view

You can also use xpath to add the widget to existing views:

<record id="view_order_form_froala" model="ir.ui.view">
    <field name="name">sale.order.form.froala</field>
    <field name="model">sale.order</field>
    <field name="inherit_id" ref="sale.view_order_form"/>
    <field name="arch" type="xml">
        <xpath expr="//field[@name='note']" position="attributes">
            <attribute name="widget">froala</attribute>
        </xpath>
    </field>
</record>

Tip

This module already applies widget="froala" to the Sale Order's Terms and Conditions (note) field out of the box.

3. Features

Rich Text Formatting

Froala provides a comprehensive formatting toolbar:

  • Text: Bold, Italic, Underline, Strikethrough
  • Script: Subscript, Superscript
  • Font: Font Family, Font Size
  • Colors: Text Color, Background Color
  • Clear Formatting: Remove all formatting in one click

Paragraph Styling

Full paragraph control:

  • Alignment: Left, Center, Right, Justify
  • Lists: Ordered (numbered) and Unordered (bullet)
  • Paragraph Format and Paragraph Style
  • Line Height control
  • Indent / Outdent
  • Blockquote

Tables & Media

  • Insert and edit tables
  • Insert images via URL
  • Embed video from YouTube, Vimeo, and other sources
  • Insert horizontal rules

Code View

Toggle between the visual WYSIWYG editor and raw HTML source code with a single click. Useful for developers who need precise HTML control.

Emoticons & Special Characters

  • Built-in emoticon picker
  • Special character inserter (©, ™, €, and more)

Other Features

  • Fullscreen: Expand the editor to full browser window
  • Character Counter: Live character count in the status bar
  • Undo/Redo: Multi-level undo and redo
  • Clean HTML: Froala outputs clean, semantic HTML markup

4. Toolbar Reference

The toolbar is organized into four groups:

Text Formatting (moreText)

Button Description
bold Toggle bold text
italic Toggle italic text
underline Toggle underline
strikeThrough Toggle strikethrough
subscript Toggle subscript
superscript Toggle superscript
fontFamily Change font family
fontSize Change font size
textColor Change text color
backgroundColor Change background color
clearFormatting Remove all formatting

Paragraph (moreParagraph)

Rich Content (moreRich)

Button Description
insertLink Insert or edit hyperlink
insertImage Insert image via URL
insertVideo Embed video
insertTable Insert table
emoticons Open emoticon picker
specialCharacters Insert special character
insertHR Insert horizontal rule

Miscellaneous (moreMisc)

Button Description
undo Undo last action
redo Redo last action
fullscreen Toggle fullscreen mode
html Toggle HTML code view
help Open help dialog

5. Technical Details

How It Works

  1. The module registers a custom Odoo field widget named froala.
  2. When a form view renders a field with widget="froala", the component loads the Froala Editor library (CSS + JS) from the jsDelivr CDN.
  3. Froala is initialized on a <div> element inside the field container.
  4. Content changes in Froala are synced back to the Odoo record via record.update().
  5. In readonly mode, the field renders the HTML content directly (no editor loaded).

CDN Loading

Froala Editor v4.3.0 is loaded from:

CSS: https://cdn.jsdelivr.net/npm/froala-editor@4.3.0/css/froala_editor.pkgd.min.css
JS:  https://cdn.jsdelivr.net/npm/froala-editor@4.3.0/js/froala_editor.pkgd.min.js

The resources are loaded once and cached by the browser. The library is NOT bundled with the module to keep the module size small.

6. FAQ

Does this replace the default Odoo editor globally?
No. Only fields with widget="froala" use Froala. All other HTML fields continue using Odoo's default editor.
Does this module include a Froala license?
No. Froala Editor requires a separate commercial license for production use. Without a license, the editor functions normally but displays a watermark. Visit froala.com for licensing.
Does it work offline?
The Froala library must be loaded from CDN at least once. After that, the browser caches it. You need an internet connection for the initial load.
Is it compatible with Odoo Enterprise?
Yes. Works with both Community and Enterprise editions.
Can I use it on any HTML field?
Yes. Any field of type Html can use widget="froala".

7. Support

We provide free bug fixes and updates for all our modules. If you need help, please submit a support request through the Odoo Apps support page.

Odoo Proprietary License v1.0

This software and associated files (the "Software") may only be used (executed,
modified, executed after modifications) if you have purchased a valid license
from the authors, typically via Odoo Apps, or if you have received a written
agreement from the authors of the Software (see the COPYRIGHT file).

You may develop Odoo modules that use the Software as a library (typically
by depending on it, importing it and using its resources), but without copying
any source code or material from the Software. You may distribute those
modules under the license of your choice, provided that this license is
compatible with the terms of the Odoo Proprietary License (For example:
LGPL, MIT, or proprietary licenses similar to this one).

It is forbidden to publish, distribute, sublicense, or sell copies of the Software
or modified copies of the Software.

The above copyright notice and this permission notice must be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.

Please log in to comment on this module

  • The author can leave a single reply to each comment.
  • This section is meant to ask simple questions or leave a rating. Every report of a problem experienced while using the module should be addressed to the author directly (refer to the following point).
  • If you want to start a discussion with the author or have a question related to your purchase, please use the support page.