New to Telerik UI for Blazor? Download free 30-day trial

Editor Custom Tool

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:

  1. Make sure your editor has the <EditorCustomTools> tag.

  2. Under it, add an <EditorCustomTool> tag and set its Name parameter to something you can use to distinguish this tool. You can add more than one custom tool in an editor.

  3. Inside that tag, add your custom content (e.g., buttons, dropdowns, etc.) with their desired rendering, data, logic, event handlers.

  4. Add the custom tool to the toolbar (see how to control toolbars). 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 an EditorButtonGroup.

  5. 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 Value field contents.

Examples

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

@using Telerik.Blazor.Components.Editor

<TelerikEditor Tools="@Tools" @bind-Value="@TheEditorContent">
    <EditorCustomTools>
        <EditorCustomTool Name="AddSignature">
            <TelerikButton OnClick="@AddSignature">Add Signature</TelerikButton>
        </EditorCustomTool>
    </EditorCustomTools>
</TelerikEditor>

@code {
    string TheEditorContent { get; set; } = "<h1>Lorem ipsum</h1><p>Dolor sit amet.</p>";
    List<IEditorTool> Tools { get; set; }

    protected override Task OnInitializedAsync()
    {
        Tools = new List<IEditorTool>();

        // register the custom tool for the toolbar - it uses the Name parameter from the markup
        Tools.Add(new CustomTool("AddSignature"));

        return base.OnInitializedAsync();
    }

    async Task AddSignature()
    {
        string signature = "<div style=\"margin-top: 30px;border: 2px solid black;\">Regards,<br />John Smith,<br />ACME Corp.</div>";

        // alter the Value of the editor
        TheEditorContent += signature;
    }
}

Use Editor Commands

Custom Tool that uses the editor commands to alter the selected content

@using Telerik.Blazor.Components.Editor

<TelerikEditor @ref="@EditorRef" Tools="@Tools" @bind-Value="@TheEditorContent">
    <EditorCustomTools>
        <EditorCustomTool Name="ImportantFragment">
            <TelerikButton OnClick="@MarkImportant" Icon="@IconName.Star"></TelerikButton>
        </EditorCustomTool>
    </EditorCustomTools>
</TelerikEditor>

@code {
    string TheEditorContent { get; set; } = "<p>Lorem ipsum</p><p>Dolor sit amet.</p>";
    TelerikEditor EditorRef { get; set; }
    List<IEditorTool> Tools { get; set; }

    protected override Task OnInitializedAsync()
    {
        Tools = new List<IEditorTool>();

        // register the custom tool for the toolbar - it uses the Name parameter from the markup
        Tools.Add(new CustomTool("ImportantFragment"));

        return base.OnInitializedAsync();
    }

    async Task MarkImportant()
    {
        // you can use one or more commands from the editor
        // this example makes the selected block element an <h1>  with yellow text on red background
        await EditorRef.ExecuteAsync(new FormatCommandArgs("backColor", "red"));
        await EditorRef.ExecuteAsync(new FormatCommandArgs("foreColor", "yellow"));
        await EditorRef.ExecuteAsync(new FormatCommandArgs("format", "h1"));
    }
}

See Also

In this article
Not finding the help you need? Improve this article