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

Odoo神州数码云基地: 富文本编辑工具栏的修改方法

在Odoo中，用户可能希望自定义富文本编辑框的工具栏，以便只保留所需的选项。本文介绍了如何修改富文本（HTML）编辑工具栏，让用户根据需要自定义工具栏项。

渲染原理

Odoo富文本编辑器的工作原理是首先通过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下，通过createLayoutByFrame方法实现渲染，该方法遍历工具栏列表并添加相应功能。

由于工具栏配置存在于options.toolbar中，因此修改options.toolbar即可实现工具栏的自定义。这一配置是在addons/web_editor/static/src/js/wysiwyg/wysiwyg.js文件的_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文件中找到。有任何疑问或更好的方法，欢迎加入社群讨论。

本期作者：喻炎