Toolbar configuration in Markdown Editor Control
18 Nov 20181 minute to read
Default toolbar items
By default, the Markdown Editor displays the following toolbar items:
Bold,Italic,|,Formats,Blockquote,OrderedList,UnorderedList,|,CreateLink,Image,|,SourceCode,Undo,Redo
These default items cover essential text editing features, such as text formatting, lists, and linking.
Type of toolbar
The Syncfusion Markdown Editor allows you to configure different type of toolbars using the Type field in the ToolbarSettings property.
The available toolbar types are:
- Expand
- MultiRow
- Scrollable
Expanding the Toolbar
The default toolbar mode is Expand, which is configured using ToolbarSettings with type: Expand.
In this mode, any overflowing toolbar items are hidden in the next row. Users can reveal them by clicking the expand arrow.
Configuring a Multi-row Toolbar
By setting type: MultiRow in ToolbarSettings, the toolbar items are arranged across multiple rows. This ensures that all configured toolbar items are always visible.
Implementing a Scrollable Toolbar
Use Type: 'Scrollable' in ToolbarSettings to create a single-line toolbar with horizontal scrolling capability for overflow items.
Creating a Sticky Toolbar
By default, the toolbar remains fixed at the top of the Markdown editor when scrolling.
You can customize its position by setting FloatingToolbarOffset to adjust the offset from the top of the document.
Additionally, you can enable or disable the floating toolbar using the EnableFloating property.
Custom Toolbar Items
The Markdown Editor allows you to add custom commands to the toolbar using the ToolbarSettings property. These custom commands can be displayed as plain text, icons, or HTML templates. You can define their order and grouping, ensuring a structured and intuitive toolbar layout. Additionally, actions can be bound to these commands by retrieving their instances and handling events accordingly.
In this example, a custom toolbar item (Ω) is added to insert special characters into the editor. When users click the Ω button, a list of special characters appears, allowing them to select and insert a character into the content. This feature enhances the Markdown Editor by providing quick access to special symbols without manually entering character codes.
The following code snippet demonstrates how to configure a custom toolbar item with a tooltip. The item is added to the Items field of the ToolbarSettings property, ensuring seamless integration within the toolbar.