Editor Custom Tools
The Blazor Editor component lets you add custom tools to its toolbar. In those tools, you can use both the built-in tools and commands the editor provides, and also your own custom logic.
In this article:
Basics
To create a custom tool:
-
Make sure your Editor has the
<EditorCustomTools>tag. -
Under it, add an
<EditorCustomTool>tag and set itsNameparameter to something you can use to distinguish this tool. You can add more than one custom tool in the Editor. -
Inside that tag, add your custom content (e.g., buttons, dropdowns, etc.) with their desired rendering, data, logic, event handlers.
-
Add the custom tool to the Editor toolbar via the
Toolscollection. You can add the custom tools in the desired order and position, regardless of their order in the markup. Custom tools can be added as standalone tools only, not inside anEditorButtonGroup. -
Manipulate the editor content as desired from the custom content events (like clicks) - either through the editor commands, or with your own code that manipulates its
Valuefield contents.
Examples
When choosing which Editor tools to render, it is possible to create a tools collection from scratch or append additional tools to a preset collection.
In this section you can find the following examples:
Change the Value
Custom tool that manipulates the Value to add a signature at the end
Use Editor Commands
Custom Tool that uses the editor commands to alter the selected content
Save Command
You can call application code from the editor tools to, for example, save the current content.