Xml 如何在门户网站odoo13上添加所见即所得

我想使用以下方法将WYSIWYG HTML添加到Odoo 13网站门户，但我尝试过的WYSIWYG显示只显示加载屏幕，因此无法使用文本输入。少了什么吗

XML代码：

<template id="portal_my_details_sl_elrn" inherit_id="portal.portal_my_details">
    <xpath expr="//form/div/div/div/div[3]" position="before">
        <div t-attf-class="form-group #{error.get('about_me') and 'o_has_error' or ''} col-xs-12">
            <!-- <label class="col-form-label" for="about_me">About Me</label> -->
            <label class="col-form-label" for="about_me">About Me</label>
            <textarea name="about_me" id="about_me" class="form-control o_wysiwyg_loader">
                <!-- <t t-esc="about_me"/> -->
                <input name="about_me" t-attf-class="form-control #{error.get('about_me') and 'is-invalid' or ''}"
                       t-att-value="about_me or partner.about_me"/>
            </textarea>
        </div>
    </xpath>
</template>

关于我

除了您发布的代码之外，您还可以将

网站档案

添加到您的模块

依赖

，并将

o wprofile\u编辑器表单

类添加到

表单

<xpath expr="//form" position="attributes">
    <attribute name="class">o_wprofile_editor_form</attribute>
</xpath>

<template id="assets_frontend" inherit_id="website.assets_frontend">
    <xpath expr="script[last()]" position="after">
        <script type="text/javascript" src="/module_name/static/src/js/custom_editor.js"></script>
    </xpath>
</template>

在静态文件夹中可以找到以下代码

var publicWidget = require('web.public.widget');
var wysiwygLoader = require('web_editor.loader');


publicWidget.registry.websiteProfileEditor = publicWidget.Widget.extend({
    selector: '.o_wprofile_editor_form',
    read_events: {
        'click .o_forum_profile_pic_edit': '_onEditProfilePicClick',
        'change .o_forum_file_upload': '_onFileUploadChange',
        'click .o_forum_profile_pic_clear': '_onProfilePicClearClick',
        'click .o_wprofile_submit_btn': '_onSubmitClick',
    },

    /**
     * @override
     */
    start: function () {
        var def = this._super.apply(this, arguments);
        if (this.editableMode) {
            return def;
        }

        var $textarea = this.$('textarea.o_wysiwyg_loader');
        var loadProm = wysiwygLoader.load(this, $textarea[0], {
            recordInfo: {
                context: this._getContext(),
                res_model: 'res.users',
                res_id: parseInt(this.$('input[name=user_id]').val()),
            },
        }).then(wysiwyg => {
            this._wysiwyg = wysiwyg;
        });

        return Promise.all([def, loadProm]);
    },

    //--------------------------------------------------------------------------
    // Handlers
    //--------------------------------------------------------------------------

    /**
     * @private
     * @param {Event} ev
     */
    _onEditProfilePicClick: function (ev) {
        ev.preventDefault();
        $(ev.currentTarget).closest('form').find('.o_forum_file_upload').trigger('click');
    },
    /**
     * @private
     * @param {Event} ev
     */
    _onFileUploadChange: function (ev) {
        if (!ev.currentTarget.files.length) {
            return;
        }
        var $form = $(ev.currentTarget).closest('form');
        var reader = new window.FileReader();
        reader.readAsDataURL(ev.currentTarget.files[0]);
        reader.onload = function (ev) {
            $form.find('.o_forum_avatar_img').attr('src', ev.target.result);
        };
        $form.find('#forum_clear_image').remove();
    },
    /**
     * @private
     * @param {Event} ev
     */
    _onProfilePicClearClick: function (ev) {
        var $form = $(ev.currentTarget).closest('form');
        $form.find('.o_forum_avatar_img').attr('src', '/web/static/src/img/placeholder.png');
        $form.append($('<input/>', {
            name: 'clear_image',
            id: 'forum_clear_image',
            type: 'hidden',
        }));
    },
    /**
     * @private
     */
    _onSubmitClick: function () {
        if (this._wysiwyg) {
            this._wysiwyg.save();
        }
    },
});

编辑：未知字段“文件”

<template id="portal_my_details_sl_elrn" inherit_id="portal.portal_my_details">
    <xpath expr="//form/div/div/div/div[3]" position="before">
        <div t-attf-class="form-group #{error.get('about_me') and 'o_has_error' or ''} col-xs-12">
            <!-- <label class="col-form-label" for="about_me">About Me</label> -->
            <label class="col-form-label" for="about_me">About Me</label>
            <textarea name="about_me" id="about_me" class="form-control o_wysiwyg_loader">
                <!-- <t t-esc="about_me"/> -->
                <input name="about_me" t-attf-class="form-control #{error.get('about_me') and 'is-invalid' or ''}"
                       t-att-value="about_me or partner.about_me"/>
            </textarea>
        </div>
    </xpath>
</template>

该小部件添加一个输入名称

文件

，并将其传递给控制器，当您单击

确认

按钮时，将调用

详细信息\u表单\u验证

方法，以检查

数据

（post）中的键是否也位于

强制计费字段

或

可选计费字段

中

<xpath expr="//form" position="attributes">
    <attribute name="class">o_wprofile_editor_form</attribute>
</xpath>

<template id="assets_frontend" inherit_id="website.assets_frontend">
    <xpath expr="script[last()]" position="after">
        <script type="text/javascript" src="/module_name/static/src/js/custom_editor.js"></script>
    </xpath>
</template>

我假设您没有使用

文件

字段（未在

账单字段

中声明），以避免警告，请尝试绕过验证：

from odoo.addons.portal.controllers.portal import CustomerPortal

class CustomerPortalNew(CustomerPortal):

    def details_form_validate(self, data):
        files = data.pop('files', None)
        res = super(CustomerPortalNew, self).details_form_validate(data)
        data['files'] = files
        return res

修复代码：
res\u partner.py

from odoo import api, models, fields, _

class ResPartner(models.Model):
    _inherit = 'res.partner'

    about_me = fields.Html('About Me')

from odoo.http import Controller
from odoo.addons.portal.controllers.portal import CustomerPortal

CustomerPortal.OPTIONAL_BILLING_FIELDS.append('about_me')

class CustomerPortalNew(CustomerPortal):

    def details_form_validate(self, data):
        files = data.pop('files', None)
        res = super(CustomerPortalNew, self).details_form_validate(data)
        data['files'] = files
        return res

portal.py

from odoo import api, models, fields, _

class ResPartner(models.Model):
    _inherit = 'res.partner'

    about_me = fields.Html('About Me')

from odoo.http import Controller
from odoo.addons.portal.controllers.portal import CustomerPortal

CustomerPortal.OPTIONAL_BILLING_FIELDS.append('about_me')

class CustomerPortalNew(CustomerPortal):

    def details_form_validate(self, data):
        files = data.pop('files', None)
        res = super(CustomerPortalNew, self).details_form_validate(data)
        data['files'] = files
        return res

portal_templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets_frontend" inherit_id="website.assets_frontend">
        <xpath expr="script[last()]" position="after">
            <script type="text/javascript" src="/sl_elrn/static/src/js/website_profile.js"></script>
        </xpath>
    </template>
    <template id="portal_my_details_sl_elrn" inherit_id="portal.portal_my_details">
        <xpath expr="//form" position="attributes">
            <attribute name="class">o_wprofile_editor_form</attribute>
        </xpath>
        <xpath expr="//form/div/div/div/div[3]" position="before">
            <div t-attf-class="form-group #{error.get('about_me') and 'o_has_error' or ''} col-xl-12">
                <label class="col-form-label" for="about_me">About Me</label>
                <textarea name="about_me" id="about_me" style="min-height: 120px" class="form-control o_wysiwyg_loader">
                    <t t-esc="about_me or partner.about_me"/>
                </textarea>
            </div>
        </xpath>
        <xpath expr="//button[@type='submit']" position="attributes">
            <attribute name="class">btn btn-primary o_wprofile_submit_btn</attribute>
        </xpath>
    </template>
</odoo>

o_wprofile_editor_表单
关于我
btn btn主要o_wprofile_submit_btn

谢谢@Kenly的回答。我已经试过了，wysiwyg出现了，但是当点击确认按钮时，出现了一个错误未知字段“文件”。在安装

website\u profile

模块并将class

o\u wprofile\u editor\u form

添加到表单时，是否会出现此错误？是的，当我对o\u wprofile\u editor\u form进行注释时，未知字段“文件”错误不会发生，但wysiwyg显示返回到初始问题（循环加载显示），反之，您需要向“提交”按钮添加一个类来处理保存数据，检查我的编辑。我刚刚复制了相同的示例，我发现portal controller中有一个验证方法，当它检查

文件

输入是否是账单字段时，会引发验证错误。检查我的编辑。