Odoo网页编辑器行高设置功能

最新推荐文章于 2024-12-23 20:21:46 发布

寒芜

最新推荐文章于 2024-12-23 20:21:46 发布

阅读量469

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Odoo

本文链接：https://blog.youkuaiyun.com/Vr_net/article/details/115325313

Odoo 专栏收录该内容

3 篇文章

订阅专栏

本文档详细介绍了如何在Odoo14的新版web_editor中启用隐藏的行高调整功能。通过修改`editor.js`文件的`_getDefaultConfig`方法添加`height`配置项，以及更新`Renderer.js`中的`tplDropdown`函数来实现行高控件的显示。最终实现了网页段落行高可自由调节的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有这么一个需求：可以随意更改网页上文字段落的行高。行高控件
通过深入了解新版Odoo14源码：该功能已经存在只是没有放出来。
修改web_editor模块：
①、web_editor/static/src/js/editor/editor.js 中 _getDefaultConfig 方法

_getDefaultConfig: function ($editable) {
        return {
            'airMode' : true,
            'focus': false,
            'airPopover': [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontsize', ['fontsize']],
                ['height', ['height']],  //注意：增加此行代码，其余不变
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture']],
                ['history', ['undo', 'redo']],
            ],
            'styleWithSpan': false,
            'inlinemedia' : ['p'],
            'lang': 'odoo',
            'onChange': function (html, $editable) {
                $editable.trigger('content_changed');
            },
            'colors': summernoteCustomColors,
        };
    },

② 、web_editor/static/lib/summernote/src/js/Renderer.js 有一个tplDropdown定义

/**
         * bootstrap dropdown template
         *
         * @param {String|String[]} contents
         * @param {String} [className='']
         * @param {String} [nodeName='']
         */
        var tplDropdown = function (contents, className, nodeName) {
            var classes = 'dropdown-menu' + (className ? ' ' + className : '');
            nodeName = nodeName || 'ul';
            if (contents instanceof Array) {
                contents = contents.join('');
            }
            // 此处"if"是新增用于处理行高按钮展示效果，原有的效果控件选项看不清
            if (classes == 'dropdown-menu note-check') {
                return '<' + nodeName + ' class="' + classes + '" style="background-color:white;color:black;padding-right:10px;text-align:center;">' + contents + '</' + nodeName + '>';
            }
            return '<' + nodeName + ' class="' + classes + '">' + contents + '</' + nodeName + '>';
        };