Toolbar Types in TypeScript Rich Text Editor
The Rich Text Editor toolbar provides formatting, styling, and editing tools. Use the type field in the toolbarSettings property to change the toolbar layout.
To create Rich Text Editor with Toolbar feature, inject the toolbar module to the Rich Text Editor using the
RichTextEditor.Inject(Toolbar)method.
Toolbar types
The accepted values for type are Expand (default), MultiRow, Scrollable, and Popup. Use the value that matches the layout you need.
Expanding the toolbar
Setting the type to Expand in toolbarSettings groups the toolbar items so that they fit on a single row. Items that do not fit are collapsed into an expand menu.
Configuring a multi-row toolbar
Setting the type to MultiRow in toolbarSettings arranges the toolbar items across multiple rows, displaying every configured toolbar item without collapsing.
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 the page is scrolled. You can enable or disable this behavior using the enableFloating property of toolbarSettings. The default value is true.
To control the vertical distance (in pixels) between the sticky toolbar and the top of the viewport, set floatingToolbarOffset to a numeric value. The default is 0.
Additionally, you can enable or disable the floating toolbar using the enableFloating property.