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
• Examples
  • Change the Value
  • Use Editor Commands
  • Save Command

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 the 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 Editor toolbar via the Tools collection. 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

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
• Use Editor Commands
• Save Command

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="@SvgIcon.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"));
    }
}

Save Command

You can call application code from the editor tools to, for example, save the current content.

@using Telerik.Blazor.Components.Editor

<TelerikEditor Tools="@Tools" @bind-Value="@TheEditorContent">
    <EditorCustomTools>
        <EditorCustomTool Name="Save">
            <TelerikButton OnClick="@Save" Icon="@SvgIcon.Save" />
        </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("Save"));

        return base.OnInitializedAsync();
    }

    async Task Save()
    {
        // call the necessary logic here, such as saving the content
        Console.WriteLine("Saving content: " + TheEditorContent);
    }
}

See Also

• Editor Overview
• Built-in Tools
• Toolbar