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

本文档详细介绍了如何在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 + '>';
        };

最后行高控件实际效果:
控件效果
文字段落效果:
3.0行高:
3.0行高效果
2.0行高:
2.0行高效果

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值