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

超、凢脫俗 2023-10-03 22:34 133阅读 0赞

#### 文章目录 ####

*  一、前言
 *  二、渲染原理
 *  三、修改方法

--------------------

## 一、前言 ##

在odoo中，当我们在页面上使用Html类型或者html的小组件的时候，页面渲染成如下格式，供用户编辑⬇

![在这里插入图片描述][6e16619a458c4f6c96bd04bf8937939e.png_pic_center]

上方有一些工具栏如背景颜色，字体颜色，字体大小，插入表格，上传附件等等供我们选择使用。

但有时，**用户不需要用到这么多的工具栏，只想要保留字体颜色，字体大小等几个工具栏，其余的工具栏去除**，那么该如何解决这个问题啦？

本期我们就一起来浅谈一下如何修改富文本（HTML）编辑工具栏。

--------------------

## 二、渲染原理 ##

首先，我们先来简单看一下富文本编辑框的渲染原理，知道了原理，就知道该如何下手了。

当我们使用富文本编辑的时候，首先会执行 ***addons/web\_editor/static/src/js/backend/field\_html.js***

文件中的\_renderEdit方法，从方法名很容易看出，是渲染编辑的时候使用的。  
![在这里插入图片描述][9ac5617e979f43dfb113d1bc470c1bf2.png_pic_center]  
该方法将将文本转换为 html，最后调用\_createWysiwygIntance，通过\_getWysiwygOptions方法生成工具栏选项。

--------------------

## 三、修改方法 ##

了解了渲染原理，我们来看看修改的方法。从下面几个方法中，我们可以看到已经获取到了工具栏⬇

![在这里插入图片描述][0365d9d22c8e47ae9db5c27d6d442dad.png_pic_center]  
![在这里插入图片描述][4db11836d8cc4515998bb15a62999341.png_pic_center]  
![在这里插入图片描述][f2952fda2dcc463b9617cb8fef000474.png_pic_center]  
那么接下来就该渲染到页面上了（***addons/web\_editor/static/lib/summernote/src/js/Renderer.js***）

它有两种渲染方式（air mode 和 normal mode）,如无特殊说明，一般使用normal mode 渲染方式，通过调用this.createLayoutByFrame方法来实现该渲染。

在该方法中，我们可以看到，它通过循环遍历刚刚上面获取的toolbar列表（key），获取tplButtonInfo的值（value），添加每一个工具栏所代表的功能，然后再在页面展现。

![在这里插入图片描述][f8ce7719242b4311aabb0f4353a17ddb.png_pic_center]  
![在这里插入图片描述][976bd822a1224be687d5ada204129a70.png_pic_center]  
通过上面的分析，我们可以知道，如若需要修改工具栏，只需要修改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
            }
        })
    });

重启之后，升级可以看到工具栏已经变化了⬇

![在这里插入图片描述][537a5e6d01b4407aaf299224a761b911.png_pic_center]

修改实现的方法是不是很简单~

本期跟大家分享的只是修改富文本编辑框的一小部分内容，大家也可以根据自己的需要，添加其他的工具栏。

**具体有哪些工具栏可使用**，可在***addons/web\_editor/static/lib/summernote/src/js/defaults.j***s文件中查看，其中已经囊括了大部分所需要的工具，当然有能力的小伙伴也可以自行添加。

[6e16619a458c4f6c96bd04bf8937939e.png_pic_center]: https://img-blog.csdnimg.cn/6e16619a458c4f6c96bd04bf8937939e.png#pic_center
[9ac5617e979f43dfb113d1bc470c1bf2.png_pic_center]: https://img-blog.csdnimg.cn/9ac5617e979f43dfb113d1bc470c1bf2.png#pic_center
[0365d9d22c8e47ae9db5c27d6d442dad.png_pic_center]: https://img-blog.csdnimg.cn/0365d9d22c8e47ae9db5c27d6d442dad.png#pic_center
[4db11836d8cc4515998bb15a62999341.png_pic_center]: https://img-blog.csdnimg.cn/4db11836d8cc4515998bb15a62999341.png#pic_center
[f2952fda2dcc463b9617cb8fef000474.png_pic_center]: https://img-blog.csdnimg.cn/f2952fda2dcc463b9617cb8fef000474.png#pic_center
[f8ce7719242b4311aabb0f4353a17ddb.png_pic_center]: https://img-blog.csdnimg.cn/f8ce7719242b4311aabb0f4353a17ddb.png#pic_center
[976bd822a1224be687d5ada204129a70.png_pic_center]: https://img-blog.csdnimg.cn/976bd822a1224be687d5ada204129a70.png#pic_center
[537a5e6d01b4407aaf299224a761b911.png_pic_center]: https://img-blog.csdnimg.cn/537a5e6d01b4407aaf299224a761b911.png#pic_center