Odoo編輯器?

Odoo Editor 是 Odoo 自己的富文本編輯器。其源代碼可以在 odoo-editor 目錄中找到。

電源盒?

Powerbox是一個用戶界面組件，包含按命令分類組織的類別。在編輯器中輸入“/”時出現。用戶可以通過輸入文本進行命令過濾，并使用箭頭鍵進行導航。

修改 Powerbox?

一次只能實例化一個Powerbox，而這個任務由編輯器本身完成。它的Powerbox實例可以在其 powerbox 實例變量中找到。要更改Powerbox的內容和選項，請在編輯器實例化之前更改傳遞給它的選項。

重要

不要自己實例化Powerbox。始終使用當前編輯器自己的實例。

Example

假設我們想要為 mass_mailing 模塊添加一個名為 Document 的新命令到 Powerbox 中。我們想要將其添加到一個名為 Documentation 的新類別中，并將其放置在 Powerbox 的頂部。

mass_mailing 擴展了 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 類 <https://github.com/odoo/odoo/blob/16.0/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js>`_中，您可以找到它作為 `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后通過簡單輸入文本來過濾命令。它將使用模糊匹配算法將該文本與類別和命令名稱進行匹配。

參考?

分類?

名稱	類型	描述
`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`	`命令數組`	添加到編輯器默認定義的命令
`categories`	`array of categories`	添加到編輯器默認定義的類別
`powerboxFilters`	`函數數組` ( `命令 => 命令` )	用于過濾在 Powerbox 中顯示的命令的函數
`getContextFromParentRect`	`function` ( `() => DOMRect` )	一個函數，返回編輯器祖先元素的 `DOMRect` （當編輯器在 iframe 中時很有用）

Edit on GitHub