Editor Inline Toolbar

Setup The Blazor Application

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup the Blazor Smart.Editor

Follow the Get Started with Smart.Editor guide to set up the component.

Toolbar

Check the Smart.Editor Toolbar guide to read about the basics of the editor's toolbar.

Inline Toolbar

The Editor's Inline Toolbar is available only when EditMode property is set to "html" like this:
<Editor EditMode="EditMode.Markdown" ToolbarItems="toolbarItems" />
It appears only when a specific content nodes are selected, such as text, image, table, hyperlink. The Inline toolbar contains quick actions which are easier to reach.

Here are the different individual inline toolbar items:

• Table Inline Toolbar

  The Inline toolbar appears when a Table cell has been selected. It offers the following quick actions:

  • Table - advanced editing of the selected Table via a Dialog Window.
  • TableHeader - allows to create/remove the header of the currently selected table.
  • TableRows - allows to delete the currently selected row or insert a new row before of after the current.
  • TableColumns - allows to delete the currently selected column or insert a new column before of after the current.
  • BackgroundColor - allows to change the background color of the currently selected cell.
  • Delete - deletes the Table.
  • Alignment - allows to change the cell horizontal alignment.
  • TableVAlign - allows to change the cell vertical alignment.
  • TableStyle - allows to add/remove additional Table styles, such as 'alternation' or 'dashed borders'.
  
  
• Image Inline Toolbar

  The Inline toolbar appears when a Image has been selected. It offers the following quick actions:

  • Image - advanced editing of the selected Image via a Dialog Window.
  • Alignment - allows to change the alignment of the Image.
  • CreateLink - allows to add a hyperlink to the image. When clicked a Dialog Window is opened allowing to create the hyperlink.
  • Delete - deletes the Image.
  • Caption - allows to add/remove the caption for the Image.
  
  
• Text Inline Toolbar

  The Inline toolbar appears when a Text node is selected. It offers the following quick actions:

  • Cut - allows to cut the selected text to the Clipboard.
  • Copy - allows to copy the selected text to the Clipboard.
  • Paste - allows to paste the Clipboard contents by replacing the current selection.
  
  
• Hyperlink Inline Toolbar

  The Inline toolbar appears when a Text node is selected. It offers the following quick actions:

  • OpenLink - allows to cut the selected text to the Clipboard.
  • EditLink - allows to copy the selected text to the Clipboard.
  • RemoveLink - allows to remove the hyperlink from the currently selected text.