有这么一个需求:可以随意更改网页上文字段落的行高。
通过深入了解新版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行高:
2.0行高: