奥多编辑器¶

Odoo Editor 是 Odoo 自己的富文本编辑器。其来源可在 odoo-editor directory 中找到。

电源箱¶

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

修改电源盒¶

此时只应实例化一个 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 class 中，您会发现它是 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 option。
通过给定的 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`（可选）	`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 中时很有用）