Odoo编辑器¶

Odoo Editor is Odoo’s own rich text editor. Its sources can be found in the odoo-editor directory.

电源盒¶

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

修改 Powerbox¶

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

重要

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

Example

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

mass_mailing extends web_editor’s Wysiwyg class, which instantiates the editor in its start method. Before doing so, it calls its own _getPowerboxOptions method, which can conveniently be overridden to add our new commands.

由于 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

We need the current instance of the Powerbox, which can be found in the current editor. In the Wysiwyg class, you will find it as 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`	`array of commands`	添加到编辑器默认定义的命令
`categories`	`array of categories`	添加到编辑器默认定义的类别
`powerboxFilters`	`array of functions` (`commands => commands`)	用于过滤在 Powerbox 中显示的命令的函数
`getContextFromParentRect`	`function` (`() => DOMRect`)	一个函数，返回编辑器祖先元素的 `DOMRect` （当编辑器在 iframe 中时很有用）

Edit on GitHub