Toolbar in JavaScript Rich Text Editor control

18 Nov 20181 minute to read

The JavaScript Rich Text Editor provides a powerful toolbar that enables users to format, style, and edit content efficiently. The toolbar includes essential editing tools such as bold, italic, underline, alignment, and lists, along with customization options to suit different use cases.

To create Rich Text Editor with Toolbar feature, inject the Toolbar module to the Rich Text Editor using the RichTextEditor.Inject(Toolbar) method.

The Rich Text Editor allows you to configure different types of toolbar using type field in toolbarSettings property. The types of toolbar are:

  1. Expand
  2. MultiRow
  3. Scrollable
  4. Popup

Expanding the toolbar

The default mode of the toolbar is Expand, configured through toolbarSettings with type: 'Expand'. This mode hides any overflowing toolbar items in the next row, which can viewed by clicking the expand arrow.

Configuring a multi-row toolbar

Setting the type as MultiRow in toolbarSettings will arrange the toolbar items across multiple rows, displaying all configured toolbar items.

Implementing a scrollable toolbar

Setting the type to Scrollable in toolbarSettings will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar.

Configuring a popup toolbar

Setting the type to Popup in toolbarSettings will display overflowing toolbar items into a popup container, optimizing the toolbar layout for limited space and smaller screens.

Creating a sticky toolbar

By default, the toolbar remains fixed at the top of the Rich Text Editor when scrolling. You can customize the position of this sticky toolbar by setting the floatingToolbarOffset to adjust its offset from the top of the document.

Additionally, you can enable or disable the floating toolbar using the enableFloating property.

See also