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

news2025/1/18 4:44:52

文章目录

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


一、前言

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/117023.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux04-进程概念下】不愧是操作系统,优美的设计!

前言 上期的分享让我们知道进程大概的模样,本期一样重要,能学到操作系统设计的优美,体会到前辈们的智慧。 #环境变量 是什么 OS提供,往往有特殊功能的全局变量(/etc/profile.d是设置环境变量的目录) [b…

React 入门:实战案例 Github搜索_axios发送请求

文章目录快速搭建 API 服务器在 Search 组件中实现 Axios 发送请求在 App 组件中管理 List 组件的用户列表状态在 List 组件中更新渲染用户列表数据优化完善完整源码最终效果:快速搭建 API 服务器 根据下面步骤来操作,就可以快速搭建一个符合本案例使用…

明年跨境电商外贸的新增量在哪里?来自专家的2个判断

明年跨境电商外贸的新增量在哪里?来自专家的2个判断2022年,外贸大环境不容易,外贸人也不容易。自2021年9月以来,海运费飙涨,库容一降再降。大批的货品滞留库存,部分卖家只好硬着头皮扛下来了高额的仓储费&a…

最佳实践 | 帮助您的游戏在斋月期间大放异彩

作者 / Google Play 游戏业务发展经理 Nimrod Levy世界各地的开发者都发现,在斋月期间,许多庆祝这个神圣月份的国家/地区的用户都会比平时更活跃。这是一个吸引穆斯林玩家的宝贵机会。斋月是伊斯兰历的第 9 个月。世界各地的穆斯林都会在这个月进行斋戒、…

RV1126笔记二十二:pt->onnx->rknn模型转换

若该文为原创文章,转载请注明原文出处。 一、介绍 实现的目标是,把RK提供的yolov5s.pt转成onnx,在把onnx转成rknn,部署到RV1126上面。 这里不训练模型,所以只要搭建好环境后,就可以直接运行测试。 这里只是提供一种转换的方法,有其他的方式,可以自行测试。 由于不…

立根铸魂 崛起数智时代 操作系统产业峰会2022即将启幕!

如今,数字经济成为全球经济增长的主引擎。基础软件是数字经济发展的基础,是制造强国、网络强国、数字中国建设的关键支撑。而基础软件中的操作系统,作为数字基础设施的底座,已经成为推动产业数字化、智能化发展的核心力量。 2022…

Codeforces Round #840 (Div. 2)

A. Absolute Maximization 题目链接:Problem - A - Codeforces 样例输入: 4 3 1 0 1 4 5 5 5 5 5 1 2 3 4 5 7 20 85 100 41 76 49 36样例输入: 1 0 7 125题意:给定一个长度为n的数组a[],我们可以对这个数组中的数进…

VueJs中setup的使用(上)

前言在写组合式API代码时,首先接触到的是setup这个函数,在一些项目代码里,你会看到有的直接在script标签上添加setup标识,有的在选项式API方式里,以setup()函数,配置选项的方式出现在单文件组件里什么时候用setup()函数方式,什么时候不用,对于有些新手同学,有些困惑,以及它的一…

聚观早报 | 特斯拉上海工厂被曝停产;富士相机X-Pro 3已停产

今日要闻:特斯拉上海工厂被曝停产;富士相机X-Pro 3已停产;字节复活红果小说App;网易云音乐首份乐评报告发布;辛巴年货节单场带货超1400万单特斯拉上海工厂被曝停产 12 月 26 日消息,根据一份内部通知和两位…

十八、Docker可视化管理工具Portainer

1、概述 Portainer分两个版本 开源版本:Portainer Community Edition (CE) 和商业版本:Portainer 商业版 (BE)。 CE 拥有超过 50 万的普通用户,是一个功能强大的开源工具集,可让您轻松地在 Docker、Docker Swarm、Kubernetes 和…

SpingBoot常见注解区分

1、Mapper注解: 作用:在接口类上添加了Mapper,在编译之后会生成相应的接口实现类 添加位置:接口类上面 Mapper public interface UserMapper{/*** param username 用户名* param password 密码* param memberLevelId 会员级别* p…

【Pygame实战】俄罗斯方块 | 太好玩了~停不下来,这种版本(Turtle彩版)你肯定没玩过……(经典怀旧:无人不知的俄罗斯方块)

导语 警报警报!听说CSDN游戏专区火了火了~竟然是因为各种形状的方块。 对!各种游戏都快烂大街了,俄罗斯方块咋滴就不能火一把了? Python版俄罗斯方块 等你来战! 所有文章完整的素材源码都在👇👇…

分库分表必知

概述 为啥要进行分库分表? 单表数据量太大,比如超过5000w行,查询时扫描的行太多,SQL效率低,CPU出现瓶颈 数据的切分就是通过某种特定的条件,将存放在同一个数据库或同一个表的数据分散存放到多个数据库&a…

干货 | 数字经济创新创业——网络安全

下文整理自清华大学大数据能力提升项目能力提升模块课程“Innovation & Entrepreneurship for Digital Economy”(数字经济创新创业课程)的精彩内容。主讲嘉宾:Kris Singh: CEO at SRII, Palo Alto, CaliforniaVisiting Professor of Tsinghua Unive…

在 ArcGIS 中使用函数块给字段赋随机值 (指定范围内随机编号)

在 ArcMap 或 ArcGIS Pro 中通过使用字段计算器,给字段赋随机值。 通过字段计算器内置的 VB、Python 方法可以构建函数块表达式实现各种各样的赋值操作,下面我们来看看通过使用内置的 Python 函数块来实现随机赋值。 (也可以制作成工具箱哦,更加方便) ArcMap 生成随机值…

智能开关继电器-选型篇2

继电器在智能开关中承担着开通、关断的功能,是开关产品最根本的一项功能。这样一个关键的器件我们将分为两个篇章进行撰写:选型篇1、选型篇2、评估篇。其中选型篇1简述继电器的定义、分类,可参考《智能开关继电器-选型篇1》。选型篇2会在基于…

【TypeScript】类型声明文件的讲解与使用

目录 简介 文件类型 类型声明文件使用 简介 我们发现今天所有的JS应用都会引入许多第三方库来完成任务需求。这些第三方库无论是否是TS编写的最终都会编译成JS代码给开发者使用。我们知道TS提供了类型才有了代码提示和类型保护机制,但我们引入的第三方库都会有相…

搞懂 Spark 系列之 Spark Shuffle 的前世今生

注:本文已首发于PowerData公众号! 1 Spark Shuffle 是什么? Shuffle 中文意思是“洗牌,混洗”,而在 Hadoop 的 MapReduce 框架中,Shuffle 是 Map 和 Reduce 中间必不可少的连接桥梁。数据在从Map 阶段结束…

优化器核心技术—Join Reorder

Join Reorder 的简介 Join Reorder 是开务数据库 SQL 优化器中的核心优化算法,开务数据库优化器包括 RBO 和 CBO 两部分,负责计划优化,提升 SQL 执行性能。Join Reorder 能够保证在复杂查询执行的场景下,枚举合法的执行路径&…

分布式系统稳定性建设指南

来源: 中国信息通信研究院 系统稳定性能建设是一个系统化工程,需要硬件软件,需要从企业工程建设的全环节进行设计和实施,充分利用以混沌工程、全链路压测为代表的分布式稳定性保障技术,建设保障能力,改造运…