Odoo rich-text editor

The Odoo rich-text editor allows for creating and editing rich-text content in HTML fields, such as the Internal Notes and Description fields, as well as in the Knowledge articles and the Studio report editor, among others. Start typing or use the toolbar or powerbox for formatting and structuring text.

Astuce

Hover over any element in the text (header, table, clipboard, etc.) to reveal the (drag) icon. Click and hold the icon to drag and drop the element elsewhere in the text.

Text editor toolbar

To edit a word, sentence, or paragraph, select or double-click it to display the text editor toolbar and apply any of the following standard formatting options:

• Font style: Define the font style using various options, such as Header 1 to 6, Normal, Paragraph, Code, and Quote.

• Font size: Select the preferred font size.

• (Toggle bold): Put the text in bold.

• (Toggle italic): Put the text in italics.

• (Toggle underline): Underline the text.

• (Apply Font Color): Customize the font colors:

  • Solid: Select the preferred color from the predefined palette.

  • Custom: Customize the color palette using the wheel or by configuring the hex code and RGBA values.

  • Gradient: Select a predefined gradient or customize it by choosing between Linear or Radial and adjusting the wheel.

  • (Reset): Restore the original font/background color.

• (Add a link): Insert or edit a URL link to a selected text, and optionally upload an image using its file URL.

• Odoo AI: Write a prompt and get AI-generated content. Optionally, click the AI suggestions instead of writing a prompt.

Click the (Expand toolbar) icon to display additional formatting options:

• Font family: Use the Default system font or select a preferred font family for the text.

• (Toggle strikethrough): Strike through the text.

• (Apply Background Color): Customize the background colors.

• (Remove Format): Remove all formatting applied to a selected text.

• (Toggle List): Select the following list options:

  • (Bulleted list): Turn the text into a bulleted list.

  • (Numbered list): Turn the text into a numbered list.

  • (Checklist): Turn the text into a checklist.

• (Align text): Select the following text alignments:

  • (align left): Align the text on the left.

  • (align center): Align the text in the center.

  • (align right): Align the text on the right.

  • (justify): Apply straight edges to both text margins.

• Translate with AI: Translate the content in the installed languages with AI.

Astuce

• Use the following keyboard shortcuts to apply formatting:

  • Emphasis: Press CTRL/CMD + B, CTRL/CMD + I, or CTRL/CMD + U to apply the bold, italics, or underlined effect.

  • Numbered list: Type 1., 1), A., or A) to start a numbered list.

  • Bulleted list: Type * or - to start a bulleted list.

• Click a hyperlinked text and perform one of the following actions: (Copy Link), (Edit Link), or (Remove Link).

Powerbox commands

Commands enable editing and managing various types of features within the text editor, such as tables, banners, headers, and more.

To use a command, type / to open the powerbox, then enter the command’s name or select from multiple features to insert tables, images, banners, etc.

Astuce

Starting a new paragraph displays a tooltip with command shortcut icons. Click an icon to add the command, or click the (ellipsis) icon to open the powerbox for all commands.

Note

Commands specific to particular apps are excluded from this description.

StructureBannerFormatMediaNavigationWidget

Commande	Explication
Separator	Insert a horizontal rule separator.
2 columns	Convertir en 2 colonnes.
3 columns	Convertir en 3 colonnes.
4 columns	Convertir en 4 colonnes.
Table	Insérer un tableau.
Bulleted list	Créer une liste à puces.
Numbered list	Create a numbered list.
Checklist	Create a checklist.
Toggle list	Hide a group of text under a foldable toggle.

Note

To organize a table, hover over a column or row to reveal the table menu. Click the (ellipsis) icon to move, insert, or delete a column or row.

Insérer un média

To insert media, type /Media or click the (media) icon in the tooltip, then choose from the following tabs:

• Images

  • Search the Unsplash database to find a suitable image.

  • Add URL: Copy-paste the image address.

  • Upload an image: Upload an image into the library.

• Documents

  • Search for a document in the database.

  • Add URL: Copy-paste a valid URL.

  • Upload a document: Upload a document from a local drive.

• Icons: Search for and select one of the available icons.

• Videos: Paste a video URL of the following sources: YouTube, Vimeo, Dailymotion, and Youku. Alternatively, type code to embed a video.

Note

When adding a video, use the toggles to enable autoplay or looping, hide player controls or the fullscreen button, or set a start time.

Media editor toolbar

After inserting an image, click it to display the media editor toolbar, and apply any of the following formatting options:

• (Preview image): Preview the image, zoom in or out, rotate it, print it, or download it. Exit the preview by clicking the (close) icon in the top right corner.

• Description: Edit the image description and tooltip, then click Apply.

• Caption: Write a caption under 100 characters below the image.

• (Rounded): Apply a rounded shape to the corners of the image.

• (Circle): Apply a circular shape to the image.

• (Shadow): Apply a shadow effect to the image.

• (Thumbnail): Apply a border to the image.

• (Padding): Add an image padding and choose from Small, Medium, Large, or XL sizes.

• Resize: Restore the image to its default size or set its size to 25%, 50%, or 100%.

• (object): Resize and rotate the image. Click the (object) icon a second time to reset the transformation.

• (Crop image): Crop the image manually or apply the following options:

  • Choose from the Flexible, 16:9, 4:3, 1:1, or 2:3 aspect ratios.

  • Zoom in or out.

  • Rotate left or right.

  • Flip horizontally or vertically.

  • Reset the image.

• (Add a link): Add a link to the image, type the URL, then click Apply. To remove the link, click (Remove Link).

• (Replace): Replace the image by searching in the Unsplash database, adding a URL, or uploading a different one.

• (Delete): Delete the image.

Icon editor toolbar

After inserting an icon, click it to display the icon editor toolbar, and apply any of the following formatting options:

• (Select Font Color): Customize the font color.

• (Select Background Color): Customize the background color.

• Resize icon: From 1x to 5x.

• (Toggle icon spin): Activate the spin animation.

• Replace: Select a different icon.