CODEWITHSUNDEEP
javascriptxmlodooodoo-15
Wald Sin
Wald Sin

Reputation: 208

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

I want to extend the message field to do from this to this

enter image description hereenter image description here

in file addons\mail\static\src\components\composer_text_input\composer_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">
                <ComposerSuggestionList
                    composerViewLocalId="props.composerViewLocalId"
                    isBelow="props.hasMentionSuggestionsBelowPosition"
                />
            </t>
            <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"/>
        </t>
    </div>
</t>

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

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

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 can't find it, line with styles also doesn't 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?

(UPDATE) error while adding froala_editor.pkgd.min.js file in manifest enter image description here

Upvotes: 0

Views: 431

Answers (1)

Kenly
Kenly

Reputation: 26678

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

Example:

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

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


'assets': {
        'web.assets_backend': [
            'MODULE_NAME/static/src/js/froala_editor.pkgd.min.js',
            'MODULE_NAME/static/src/css/froala_editor.pkgd.min.css',
        ],
        'web.assets_qweb': [
            "MODULE_NAME/static/src/xml/composer.xml",
        ],
    },

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.

Upvotes: 1

Related Questions