How to Create Powerbox Editors in Odoo 18: Complete Step by Step Guide
By Braincuber Team
Published on March 17, 2026
Powerbox Editors in Odoo 18 introduce a revolutionary way to handle dynamic text input. These smart interface components integrate free-text input with interactive widgets, similar to modern UX patterns found in Slack, Notion, or Discord. This complete tutorial will guide you through creating custom Powerbox Editors with slash commands and dynamic references.
What You'll Learn:
- Understand Powerbox concept and functionality in Odoo 18
- Create custom editor plugins with slash command integration
- Implement user commands and powerbox items
- Build XML templates for custom content insertion
- Register plugins in the Knowledge editor
- Add undo/redo functionality with history tracking
Understanding Powerbox in Odoo 18
A Powerbox is a smart interface component built into rich text editors. Users can activate it by typing a / (slash) while editing text. This action opens a contextual menu that lists available commands or tools, grouped by category, helping users quickly insert elements or perform editor-specific actions directly from the typing area.
Create the Plugin File
Create a new JavaScript file for your custom Powerbox plugin. The editor automatically creates a single Powerbox instance and stores it in its powerbox variable.
Creating the Custom Editor Plugin
/** @odoo-module **/
import { Plugin } from "@html_editor/plugin";
import { _t } from "@web/core/l10n/translation";
import { renderToElement } from "@web/core/utils/render";
import { KNOWLEDGE_PLUGINS } from "@knowledge/editor/plugin_sets";
export class ArticleDocumentPlugin extends Plugin {
static id = "articleDocument";
static dependencies = ["history", "dom"];
resources = {
user_commands: [
{
id: "insertArticleDocument",
title: _t("Document"),
description: _t("Insert Documents"),
icon: "fa-list",
run: this.insertArticleDocument.bind(this),
},
],
powerbox_items: [
{
categoryId: "knowledge",
commandId: "insertArticleDocument",
}
],
};
insertArticleDocument() {
const articleDocumentBlueprint = renderToElement("module_name.ArticleDocumentBlueprint");
this.dependencies.dom.insert(articleDocumentBlueprint);
this.dependencies.history.addStep();
}
}
// Register the plugin in the Knowledge editor
KNOWLEDGE_PLUGINS.push(ArticleDocumentPlugin);
Understand the Plugin Structure
The plugin extends the base Plugin class and defines resources including user_commands and powerbox_items. The command appears when users type /document in the editor.
Create the XML Template
Create an XML template file to define the content structure that will be inserted when the command is executed.
Creating the XML Template
Template Configuration
The XML template defines ArticleDocumentBlueprint with a div element marked as embeddable content. The data-embedded="DocumentContent" attribute marks it as an embeddable component, and contenteditable="true" allows direct editing.
| Plugin Component | Purpose |
|---|---|
| user_commands | Defines commands available in the Powerbox menu |
| powerbox_items | Links commands to specific categories in the Powerbox |
| insertArticleDocument() | Function that executes when the command is selected |
| renderToElement() | Renders the XML template into a DOM element |
| history.addStep() | Adds the action to undo/redo history |
Plugin Registration and Usage
Register the Plugin
The final line KNOWLEDGE_PLUGINS.push(ArticleDocumentPlugin) registers your custom plugin in the Knowledge editor, making it available to all editor instances.
Test the Powerbox Command
Open any Knowledge article in Odoo 18, type /document in the editor, and select the "Document" command from the Powerbox menu to insert your custom content.
Dynamic Content Insertion
Powerbox editors allow users to insert custom content blocks with a simple slash command.
Modern UX Patterns
Implement familiar slash command interfaces like those in Slack, Notion, or Discord.
Undo/Redo Support
Built-in history tracking allows users to undo and redo Powerbox actions seamlessly.
Template-Based Content
Use XML templates to define reusable content structures for your Powerbox commands.
Important Note
The editor automatically creates a single Powerbox instance. Never create another Powerbox instance yourself. Always supply custom options when initializing the editor before it starts up.
Frequently Asked Questions
How do I activate the Powerbox in Odoo 18 editor?
Type a forward slash (/) while editing text in any Odoo 18 rich text editor to activate the Powerbox menu.
Can I create multiple Powerbox instances?
No, the editor automatically creates a single Powerbox instance. You should never create another one yourself.
How do I add undo/redo functionality to my Powerbox commands?
Use the history dependency and call this.dependencies.history.addStep() after inserting content to track the action.
What is the purpose of the powerbox_items resource?
Powerbox_items link your commands to specific categories in the Powerbox menu, organizing them logically for users.
Can I use Powerbox editors outside of the Knowledge module?
Yes, Powerbox editors are available in any Odoo 18 rich text editor. You just need to register your plugin with the appropriate plugin set.
Need Help with Odoo Development?
Our experts can help you implement custom Powerbox editors and advanced Odoo 18 features for your business needs.