文章目录
- 一、前言
- 二、渲染原理
- 三、修改方法
一、前言
在odoo中,当我们在页面上使用Html类型或者html的小组件的时候,页面渲染成如下格式,供用户编辑⬇
上方有一些工具栏如背景颜色,字体颜色,字体大小,插入表格,上传附件等等供我们选择使用。
但有时,用户不需要用到这么多的工具栏,只想要保留字体颜色,字体大小等几个工具栏,其余的工具栏去除,那么该如何解决这个问题啦?
本期我们就一起来浅谈一下如何修改富文本(HTML)编辑工具栏。
二、渲染原理
首先,我们先来简单看一下富文本编辑框的渲染原理,知道了原理,就知道该如何下手了。
当我们使用富文本编辑的时候,首先会执行 addons/web_editor/static/src/js/backend/field_html.js
文件中的_renderEdit方法,从方法名很容易看出,是渲染编辑的时候使用的。
该方法将将文本转换为 html,最后调用_createWysiwygIntance,通过_getWysiwygOptions方法生成工具栏选项。
三、修改方法
了解了渲染原理,我们来看看修改的方法。从下面几个方法中,我们可以看到已经获取到了工具栏⬇
那么接下来就该渲染到页面上了(addons/web_editor/static/lib/summernote/src/js/Renderer.js)
它有两种渲染方式(air mode 和 normal mode),如无特殊说明,一般使用normal mode 渲染方式,通过调用this.createLayoutByFrame方法来实现该渲染。
在该方法中,我们可以看到,它通过循环遍历刚刚上面获取的toolbar列表(key),获取tplButtonInfo的值(value),添加每一个工具栏所代表的功能,然后再在页面展现。
通过上面的分析,我们可以知道,如若需要修改工具栏,只需要修改options.toolbar即可。
在addons/web_editor/static/src/js/wysiwyg/wysiwyg.js中,我们知道options是通过调用_editorOptions方法来赋值的,因此我们只需要修改该方法即可。
odoo.define('weekly_field_html', function (require) {
'use strict';
var wysiwyg = require('web_editor.wysiwyg');
wysiwyg.include({
_editorOptions: function (){debugger;
var options = this._super.apply(this, arguments);
if(options.recordInfo.res_model && options.recordInfo.res_model == 'dc.weekly.year.task'){
options.airPopover = options.toolbar = [
['font', ['bold']],
['fontsize', ['fontsize']],
];
}
return options
}
})
});
重启之后,升级可以看到工具栏已经变化了⬇
修改实现的方法是不是很简单~
本期跟大家分享的只是修改富文本编辑框的一小部分内容,大家也可以根据自己的需要,添加其他的工具栏。
具体有哪些工具栏可使用,可在addons/web_editor/static/lib/summernote/src/js/defaults.js文件中查看,其中已经囊括了大部分所需要的工具,当然有能力的小伙伴也可以自行添加。