Odoo编辑器¶

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

电源盒¶

Powerbox 是一个包含 commands 的用户界面模块，这些命令被组织成 categories。在编辑器中键入 / 时会出现。用户可以通过输入文本来过滤命令，并使用箭头键进行导航。

修改 Powerbox¶

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

重要

不要自己实例化Powerbox。始终使用当前编辑器自己的实例。

Example

假设我们想要为 mass_mailing 模块添加一个名为 Document 的新命令到 Powerbox 中。我们想要将其添加到一个名为 Documentation 的新类别中，并将其放置在 Powerbox 的顶部。

mass_mailing 扩展了 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 做的那样）。

打开自定义 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 选项。
通过给定的 command 的 isDisabled 条目。
用户可以在打开Powerbox后通过简单输入文本来过滤命令。它将使用模糊匹配算法将该文本与类别和命令名称进行匹配。

参考¶

类别¶

名称	类型	描述
`name`	`string`	分类名称
`priority`	`number`	用于对类别进行排序：优先级较高的类别会在 Powerbox 中显示得更高（具有相同优先级的类别按字母顺序排序）

注解

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

命令¶

名称	类型	描述
`name`	`string`	命令的名称
`category`	`string`	命令所属类别的名称
`description`	`string`	描述该命令的简短文本
`fontawesome`	`string`	作为命令图标的 Font Awesome 的名称
`priority`	`number`	用于排序命令：具有更高优先级的命令在Powerbox中显示得更高（具有相同优先级的命令按字母顺序排序）
`callback`	`function` (`() => void`)	当命令被选中时要执行的函数（可以是异步的）
`isDisabled` (optional)	`function` (`() => void`)	用于在某些条件下禁用命令的函数（当它返回 `true` 时，命令将被禁用）

注解

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

选项¶

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

名称	类型	描述
`commands`	`命令数组`	添加到编辑器默认定义的命令
`categories`	`分类数组`	添加到编辑器默认定义的类别
`powerboxFilters`	`array of functions` (`commands => commands`)	用于过滤在 Powerbox 中显示的命令的函数
`getContextFromParentRect`	`function` (`() => DOMRect`)	一个函数，返回编辑器祖先元素的 `DOMRect` （当编辑器在 iframe 中时很有用）

Edit on GitHub