[SOLVED] Odoo: how to replace standard discuss textarea by froala editor?


This Content is from Stack Overflow. Question asked by Wald Sin

i want to extend message field to do from this to this

enter image description hereenter image description here

in file addonsmailstaticsrccomponentscomposer_text_inputcomposer_text_input.xml there is a template with current textarea:

<t t-name="mail.ComposerTextInput" owl="1">
    <div class="o_ComposerTextInput">
        <t t-if="composerView">
            <t t-if="composerView.hasSuggestions">
            <textarea class="o_ComposerTextInput_textarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composerView.composer.textInputContent" t-att-placeholder="textareaPlaceholder" t-on-click="_onClickTextarea" t-on-focusin="_onFocusinTextarea" t-on-focusout="_onFocusoutTextarea" t-on-keydown="_onKeydownTextarea" t-on-keyup="_onKeyupTextarea" t-on-input="_onInputTextarea" t-ref="textarea"/>
                 This is an invisible textarea used to compute the composer
                 height based on the text content. We need it to downsize
                 the textarea properly without flicker.
            <textarea class="o_ComposerTextInput_mirroredTextarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composerView.composer.textInputContent" t-ref="mirroredTextarea" disabled="1"/>

here is example how it work in pure html file (2 files are placed in the same directory as a *.html file):

        <link href="froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
        <textarea id="example"></textarea>
        <script type="text/javascript" src="froala_editor.pkgd.min.js"></script>
        <script type="text/javascript" >
            var editor = new FroalaEditor('#example');

problem is that when i insert that code, piece like that:

<link href="froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="froala_editor.pkgd.min.js"></script>

odoo cant find it, line with styles also dont work.
i tried also to paste code from froala_editor.pkgd.min.js in tag. IN pure html it works, in odoo .xml not.

What i`m doing wrong?


You can patch the mail.ComposerTextInput template, set the textarea id attribute, and append the script initializing the froala editor after it.


<?xml version="1.0" encoding="UTF-8" ?>
    <t t-inherit="mail.ComposerTextInput" t-inherit-mode="extension">
        <xpath expr="//textarea[1]" position="attributes">
            <attribute name="id">example</attribute>
        <xpath expr="//textarea[1]" position="after">
            <script type="text/javascript">
                var editor = new FroalaEditor('#example');

You will need to load the froala script and style and the template file using assets in the manifest file

'assets': {
        'web.assets_backend': [
        'web.assets_qweb': [

You will need to change the buttons’ disposition and handle the vent listeners (enable the send button when you enter text in the froala editor). Odoo implemented the composer to work with a text area, probably you will need to make big changes

To test it, try to add an emoji so the button will be activated. You will notice that Odoo escaped the HTML content and it shows as text is in the message list.

To avoid that use the following JS script:

/** @odoo-module **/

import { registerInstancePatchModel} from '@mail/model/model_core';

registerInstancePatchModel('mail.composer_view', 'Froala Composer View', {
    _getMessageData() {
        let postData = this._super(...arguments);
        postData.body = postData.body.replace(/&lt;/g, "<").replace(/&gt;/, ">");
        return postData

Add it after the froala script in the manifest file.

This Question was asked in StackOverflow by Wald Sin and Answered by Kenly It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?