Odoo：如何用 froala 编辑器替换标准讨论文本区域？答案

【问题标题】：Odoo: how to replace standard discuss textarea by froala editor?Odoo：如何用 froala 编辑器替换标准讨论文本区域？
【发布时间】：2022-09-27 20:49:40
【问题描述】：

我想将消息字段从这个扩展到这个

在文件addons\\mail\\static\\src\\components\\composer_text_input\\composer_text_input.xml 中有一个带有当前文本区域的模板：

<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>

这是一个在纯 HTML 文件中如何工作的示例（2 个文件与 *.html 文件放在同一目录中）：

<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>

问题是当我插入该代码时，就像这样：

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

odoo 找不到，line with styles 也不行。我还尝试将来自 froala_editor.pkgd.min.js 的代码粘贴到标签中。在纯 HTML 中它可以工作，而在 odoo .xml 中则不行。

我做错了什么？

在清单中添加 froala_editor.pkgd.min.js 文件时出现（更新）错误

标签： javascript xml odoo odoo-15

【解决方案1】：

您可以修补 mail.ComposerTextInput 模板，设置 textarea id 属性，并在其后附加初始化 froala 编辑器的脚本。

例子：

<?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>

您需要在清单文件中使用 assets 加载 froala 脚本和样式以及模板文件


'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",
        ],
    },

您将需要更改按钮的配置并处理发泄侦听器（在 froala 编辑器中输入文本时启用发送按钮）。 Odoo 实现了作曲家以使用文本区域，可能您需要进行重大更改

要对其进行测试，请尝试添加一个表情符号，以便激活按钮。您会注意到 Odoo 对 HTML 内容进行了转义，并在消息列表中显示为文本。

为避免这种情况，请使用以下 JS 脚本：

/** @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
    },
});

在清单文件中的 froala 脚本之后添加它。

【讨论】：

我收到一个问题。当我尝试添加“froala_editor.pkgd.min.js”时显现.py，在 Windows 中的 odoo 中，一切正常，但是当我尝试在我的工作服务器（ubuntu + docker）上执行此操作时，odoo 显示白屏，没有其他内容（我在登录时只收到 1 个错误，我设法采取错误的屏幕截图，在它消失之前，我在帖子中添加了错误）。你以前有过这个问题吗？