Combine built in tools with cutome created ones

2 Answers 39 Views
Editor
Omar
Top achievements
Rank 2
Iron
Iron
Iron
Omar asked on 31 Jan 2024, 11:49 AM

Hi,

Using the editor, is it possible to combine the built-in tools and the custom ones?

I would like to use the Tools="EditorToolSets.All" as well as the @ToolCollection that I created at the same time.

Regards,

Omar

2 Answers, 1 is accepted

Sort by
0
Accepted
Omar
Top achievements
Rank 2
Iron
Iron
Iron
answered on 01 Feb 2024, 07:37 PM

Hello Dimo,

I struggled to locate instructions on incorporating a custom tool button onto the default toolbar. It's possible that I overlooked something in the documentation.

My objective is to include a custom button on the "EditorToolSets.All" toolbar, allowing users to easily insert a video link.

Fortunately, I've now managed to resolve this issue:

 

<TelerikEditor @ref="Editor" 
               Tools="@ToolCollection"
               Height="300px" @bind-Value="@Description">
</TelerikEditor>

 


protected override async void OnInitialized()
{
    ToolCollection = new List<IEditorTool>(EditorToolSets.All);
    // create a tool group
    var UndoRedoGroup = new EditorButtonGroup(
            new EditorNS.Undo(), // add individual tools to the group
            new EditorNS.Redo()
        );
    ToolCollection.Add(UndoRedoGroup);
    EditorButtonGroup Video = new EditorButtonGroup();
    ButtonTool bt = new ButtonTool();
    bt.Title = "Insert video";
    bt.OnClick = EventCallback.Factory.Create<MouseEventArgs>(this, ExecuteInsertVideo); 
    bt.Icon = SvgIcon.VideoExternal;
    Video.Tools.Add(bt);
    ToolCollection.Add(Video);
}

Could you guide me to the section in the documentation that explains how to add a custom button to the predefined editor toolbar?

 

Regards,

Omar

 

Dimo
Telerik team
commented on 02 Feb 2024, 07:48 AM

See Telerik Blazor Editor Custom Tools.

You need the CustomTool("tool-name") constructor. ButtonTool is a base class that is not meant to be used directly for custom tools.

Omar
Top achievements
Rank 2
Iron
Iron
Iron
commented on 02 Feb 2024, 07:51 AM | edited

The above code that I wrote worked very well.
0
Dimo
Telerik team
answered on 31 Jan 2024, 04:47 PM

Hi Omar,

Yes, it is possible to add Editor tools to a predefined collection, or also reoder tools in a predefined collection.

Is our documentation hard to navigate or to find the required information? Let me know if you find any difficulties while using it.

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Tags
Editor
Asked by
Omar
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Omar
Top achievements
Rank 2
Iron
Iron
Iron
Dimo
Telerik team
Share this question
or