Odoo 编辑器¶

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

电源箱¶

Powerbox 是一个用户界面组件，其中包含按类别组织的命令。在编辑器中输入 / 时会显示 Powerbox。当用户输入文本时，可以对命令进行过滤，并使用箭头键进行导航。

修改 Powerbox¶

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

重要

永远不要自行实例化 Powerbox。请始终使用当前编辑器自身的实例。

Example

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

mass_mailing extends web_editor 的 Wysiwyg class，该类在其 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 所做的那样）。

打开自定义 Powerbox¶

可以使用一组自定义的分类和命令打开 Powerbox，从而绕过所有预设的分类和命令。要做到这一点，请调用 Powerbox 的 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 Powerbox 选项。
通过给定的命令的 isDisabled 引用。
用户可以在打开 Powerbox 后，通过输入文本来筛选命令。系统会将该文本与分类和命令的名称进行模糊匹配。

引用¶

类别¶

名称	类型	描述
`名称`	`字符串`	类别的名称
`优先级`	`编号`	用于对类别进行排序：优先级较高的类别在 Powerbox 中显示得更靠上（优先级相同的类别按字母顺序排列）

注解

如果存在多个名称相同的类别，它们将被合并为一个。其优先级将以最后声明的该类别的定义为准。

命令¶

名称	类型	描述
`名称`	`字符串`	命令的名称
`类别`	`字符串`	该命令所属的类别名称
`描述`	`字符串`	一个用于描述命令的简短文本
`字体 awesome`	`字符串`	命令的图标所使用的 Font Awesome 图标名称
`优先级`	`编号`	用于对命令进行排序：优先级较高的命令在 Powerbox 中显示得更靠上（优先级相同的命令按字母顺序排列）
`回调`	`函数` (`() => void`)	执行命令时要调用的函数（可以是异步的）
`isDisabled`（可选）	`函数` (`() => void`)	一个在特定条件下用于禁用命令的函数（当其返回 `true` 时，该命令将被禁用）

注解

如果该命令指向的类别尚不存在，该类别将被创建，并添加到 Powerbox 的末尾。

选项¶

以下选项可以传递给 OdooEditor，然后将这些选项传递给 Powerbox 的实例：

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

Edit on GitHub