一、前言

在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丨如何在Odoo中修改HTML编辑工具栏？相关推荐

如何在Ubuntu中修改默认程序
简介: 这个新手指南会向你展示如何在 Ubuntu Linux 中修改默认程序对于我来说,安装 VLC 多媒体播放器是安装完 Ubuntu 16.04 该做的事中最先做的几件事之一.为了能够使我双击一 ...
如何在Windows中修改您的名字和公司名？
如何在Windows中修改您的名字和公司名? 安装Windows时,安装程序会提示输入注册用户的名字,所在公司等信息.安装完毕后,这些信息可以通过在打开我的电脑的" 属性"对话框中 ...
Illustrator 教程：如何在 Illustrator 中修改形状？
欢迎观看illustrator教程,小编带大家学习 illustrator 的基本工具和使用技巧,了解如何在 illustrator 中修改形状. illustrator 提供了很多工具和编辑方法帮助 ...
如何在MySQL中修改'max_questions'资源值？
通常,会发生以下错误. 这是由于MySQL资源监控器功能," max_questions"表示"用户在一小时内可以执行的查询数". MySQL错误–超出了&qu ...
如何在Maya中修改已经绑定后的模型的法线
前言:最近想把尼尔机械纪元的2B导入到UE中看看效果,可不知道是不是我解包的过程有问题,2B模型的裙子部分的发现有问题,而且裙子的模型还被拆分为了3个部分,直接软边是不管用的,而且已经绑定的模型就算修 ...
linux中编辑pdf文件,如何在Ubuntu中创建和编辑PDF文件
在打印,共享和通过电子邮件发送文档(尤其是大型文档)时,PDF或可移植文档格式通常是我们的首选.对于Windows和MacOS,您可能非常熟悉,也依赖于广泛使用的Acrobat产品来进行pdf创建,查 ...
如何在 Xcode 中修改应用的名字
找到 TARGETS 中的 Build Setting ,下拉找到 Packaging ,修改 Product Name 即可.
如何在eclipse中修改jsp默认编码
在使用eclipse编程的时候,很多默认的编码都是iso-8859-1我们经常使用的,在eclipse中怎么修改jsp页面的默认编码呢. 第一步:打开eclipse,找到windows-->pr ...
如何在 .NETCore 中修改 QueryString ?
咨询区 vcsjones: 我有一个绝对路径的 url 包含了 querystring,现在我想对 querystring 进行修改和添加,我不想生硬的用字符串提取,或者是正则表达式,而且还有恶心的 ...

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

文章目录

一、前言

二、渲染原理

三、修改方法

Odoo丨如何在Odoo中修改HTML编辑工具栏？相关推荐

最新文章

热门文章