Odoo 编辑器¶

Odoo 编辑器是 Odoo 自己的富文本编辑器。其源代码可以在 odoo-editor 目录中找到。

功能框¶

功能框是一个用户界面组件，包含按类别组织的命令。当在编辑器中输入 / 时，功能框会显示出来。用户输入文本时可以过滤命令，并使用方向键导航。

修改功能框¶

任何时候只能实例化一个功能框，这项工作由编辑器本身完成。其功能框实例可以在 powerbox 实例变量中找到。要更改功能框的内容和选项，请在编辑器实例化之前更改传递给它的选项。

重要

切勿自行实例化功能框。始终使用当前编辑器自己的实例。

Example

假设我们要为 mass_mailing 模块向 Powerbox 添加一个新命令 Document。我们希望将其添加到一个名为 Documentation 的新类别中，并且希望它位于 Powerbox 的顶部。

mass_mailing 扩展了 https://github.com/odoo/odoo/blob/18.0/addons/mass_mailing/static/src/js/wysiwyg.js web_editor 的 Wysiwyg 类，该类在 start 方法中实例化编辑器。在此之前，它会调用自己的 _getPowerboxOptions 方法，该方法可以方便地被重写以添加我们的新命令。

由于 mass_mailing 已经重写了 _getPowerboxOptions，我们只需将新命令添加到其中即可：

_getPowerboxOptions: function () {
    const options = this._super();
    // (existing code before the return statement)
    options.categories.push({
        name: _t('Documentation'),
        priority: 300,
    });
    options.commands.push({
        name: _t('Document'),
        category: _t('Documentation'),
        description: _t("Add this text to your mailing's documentation"),
        fontawesome: 'fa-book',
        priority: 1, // This is the only command in its category anyway.
    });
    return options;
}

重要

为了使您的命令和类别的名称和描述能够被翻译，请确保将它们包装在 _t 函数中。

小技巧

为了避免失控的优先级冲突，请勿使用随机数字作为优先级：查看已有的其他优先级并相应选择您的值（就像处理 z-index 一样）。

打开自定义功能框¶

可以使用一组自定义的类别和命令打开功能框，绕过所有预定义的内容。为此，调用功能框的 open 方法，并传入您的自定义命令和类别。

Example

我们需要当前 Powerbox 的实例，它可以在当前编辑器中找到。在 Wysiwyg 类中，您可以通过 this.odooEditor.powerbox 找到它。

现在，通过我们的自定义“文档”命令打开它，并将其归入自定义“文档”类别：

this.odooEditor.powerbox.open(
    [{
        name: _t('Document'),
        category: _t('Documentation'),
        description: _t("Add this text to your mailing's documentation"),
        fontawesome: 'fa-book',
        priority: 1, // This is the only command in its category anyway.
    }],
    [{
        name: _t('Documentation'),
        priority: 300,
    }]
);

过滤命令¶

有三种方式可以过滤命令：

通过 powerboxFilters 功能框选项。
通过某个命令的 isDisabled 条目。
用户可以通过在打开功能框后简单地输入文本来过滤命令。它将对该文本与类别和命令的名称进行模糊匹配。

参考¶

类别¶

名称	类型	描述
`name`	`字符串`	类别的名称
`优先级`	`数字`	用于对类别排序：优先级较高的类别会显示在功能框的更高位置（优先级相同的类别按字母顺序排列）。

注解

如果存在多个同名类别，它们将被合并为一个类别。其优先级将是最后声明的类别版本中定义的优先级。

命令¶

名称	类型	描述
`name`	`字符串`	命令的名称
`类别`	`字符串`	命令所属类别的名称
`描述`	`字符串`	用于描述命令的简短文本
`Font Awesome`	`字符串`	将用作命令图标的 Font Awesome 名称
`优先级`	`数字`	用于对命令排序：优先级较高的命令会显示在功能框的更高位置（优先级相同的命令按字母顺序排列）
`回调`	`函数` (`() => void`)	当选择命令时执行的函数（可以是异步的）
`isDisabled` （可选）	`函数` (`() => void`)	在某些条件下用于禁用命令的函数（当返回 `true` 时，命令将被禁用）

注解

如果命令指向一个尚不存在的类别，则该类别将被创建并附加到功能框的末尾。

选项¶

以下选项可以传递给 OdooEditor，然后传递给功能框的实例：

名称	类型	描述
`命令`	`命令数组`	要添加到编辑器定义的默认命令中的命令
`类别`	`类别数组`	要添加到编辑器定义的默认类别中的类别
`功能框过滤器`	`函数数组` (`commands => commands`)	用于过滤功能框中显示的命令的函数
`从父矩形获取上下文`	`函数` (`() => DOMRect`)	返回编辑器祖先元素的 `DOMRect` 的函数（当编辑器位于 iframe 中时可能有用）

Edit on GitHub