Odoo丨如何在Odoo中修改HTML编辑工具栏？

229 2023-09-21

工具栏方法修改渲染文本

Odoo

神州数码云基地

在 Odoo 上的尝试、调研与分享

本期内容

如何修改富文本编辑工具栏

在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文件中查看，其中已经囊括了大部分所需要的工具，当然有能力的小伙伴也可以自行添加。

关于在Odoo中修改

富文本编辑框工具栏的一点思路

如果你有更好的办法或疑问

欢迎加入社群一起讨论哦⬇

本期作者

原文链接： http://mp.weixin.qq.com/s?__biz=Mzg5MzUyOTgwMQ==&mid=2247516704&idx=1&sn=cb0cce5c4441b07d5a301f3b9b035e00&chksm=c02fb986f7583090dd7846bf38f6a611da11322b5da8d01ebe1ba36c0461f23fda91f913fffa#rd