Unable add custom component to toolbar

[Szabi]

I am not able to add a custom component which fires a function.

based on the documentation I have implemented the following:

  public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "|", new ToolsCollection
        { TooltipText = "Add quick text", Template = "<button @onclick="@onInsertQuickText" class='e-tbar-btn e-btn icon-quicktext' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text' style='font-weight: 500;'>Quick text</div></button>" }

        , "SourceCode", "FullScreen"
    };

    public class ToolsCollection
    {
        public string TooltipText { get; set; }
        public string Template { get; set; }
}

  private void onInsertQuickText()
    {
        this.RteObj.ExecuteCommand(CommandName.InsertText, "This is a predefined quick text element");
    }

Any help would highlly appercipiated.
Thank you very much

[Pandiyaraj Muniyandi]

Hi Szabi, 

 

Greetings from Syncfusion support. 

 

We have validated reported issue with shared code blocks and able to reproduce the issue from our end. The defined custom toolbar item class property names are must start with a camel case, otherwise it not render properly in RTE. So, we suggest you change the ToolsCollection properties names as follows 

 

 

public object[] Tools = new object[] { 

 "Bold", "Italic", "Underline", "|", 

  new ToolsCollection { 

    tooltipText = "Add quick text", 

    template = "<button @onclick='@onInsertQuickText' class='e-tbar-btn e-btn icon-quicktext' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text' style='font-weight: 500;'>Quick text</div></button>" 

  }, "SourceCode", "FullScreen" 

}; 

 

public class ToolsCollection 

{ 

  public string tooltipText { get; set; } 

  public string template { get; set; } 

} 

 

 

In the shared code, we noticed you’re tried to bind onclick event for the custom toolbar button, it won’t work. Because it supports string type so event binding never bind to that element. Currently, we don’t have event binding custom toolbar item, but it can be achievable using OnToolbarClick event with identifying toolbar click action with tooltipText as follows 

 

 

<EjsRichTextEditor @ref="@RteObj"> 

    <RichTextEditorEvents OnToolbarClick="@ToolbarClick"></RichTextEditorEvents> 

</EjsRichTextEditor> 

 

private void ToolbarClick(RichTextEditorToolbarClickEvent args) 

{ 

   if(args.Item.TooltipText) 

   { 

      this.RteObj.ExecuteCommand(CommandName.InsertText, "This is a predefined quick text element"); 

   } 

} 

 

 

Currently above solution won’t work with latest NuGet package, because ToolbarClick Event callback argument is object type and cannot access the child properties. Already we have logged internal bug for this issue, we will fix and include in our main release which scheduled on end of September. 

 

You can track the current status of the issue through below feedback link  

https://www.syncfusion.com/feedback/8938/ 

 

Regards, 

Pandiyaraj M 

[Szabi]

Thank you so much :)

[Pandiyaraj Muniyandi]

Hi Szabi, 

 

Good day to you. 

 

As promised, we will provide interface option to `OnToolbarClick` event arguments in our 2019 Vol 3 main release. We will share the sample project by achieved your desired requirement once release will be rolled-out. 

 

Regards, 

Pandiyaraj M 

[Alexander]

Hi!

First of all: I'm quite new to web development and blazor :)

However, with the information in this thread, I finally got the custom button in the RichTextEditor toolbar working, but still no luck in creating a dropdown button and display a menu like e.g. the font or paragraph dropdown menu.

Could you please tell me how to get that working?

best regards

Alex

[Pandiyaraj Muniyandi]

Hi Alex, 

 

Good day to you. 

 

Currently, EJ2 input components integration into RichTextEditor using custom toolbar feature not feasible. We have considered providing template support for toolbar items and we have no immediate plan to implement this feature. You can track the status of the requested feature in the below feedback link https://www.syncfusion.com/feedback/9324/ 

 

So we suggest to use default HTML select dropdown to achieve your requirement. 

 

Regards, 

Pandiyaraj M 

[Alexander]

Thanks for the suggestion.

As mentioned, I'm quite new to this, so please forgive me if this is a stupid question :)

It wasn't a problem to get the select into the toolbar, but that's not quite what I needed.

The feature I'd like to implement to insert the selected text from the dropdown at the cursor position.

The nicest way would be like the dropdown menu from the paragraph or the font dropdown.

If that's not possible, the only option that I can think of is a popup dialog like "insert Hyperlink" button.

Another problem with the HTML select control is that the binding doesn't work, so it doesn't even help :)

Regards,

Alex

[Pandiyaraj Muniyandi]

Hi Alex, 

 

Good day to you. 

 

Query 1: Another problem with the HTML select control is that the binding doesn't work, so it doesn't even help 

                

               The feature I'd like to implement to insert the selected text from the dropdown at the cursor position. 

 

               The nicest way would be like the dropdown menu from the paragraph or the font dropdown. 

 

As we already stated in this forum, the binding event for the custom toolbar elements, it won’t work. Because it supports string type so event binding never binds to that element. Using select HTML element with event binding to do action not feasible with our RichTextEditor component. Once we provided template support can achieve this mentioned requirement. 

 

Query 2: If that's not possible, the only option that I can think of is a popup dialog like "insert Hyperlink" button. 

 

Once we have fixed and included the “Provide interface for "OnToolbarClick" event arguments” issue, you can able to open the dialog from custom toolbar button action. Then you can insert the HTML or text from dialog with RichTextEditor ExecuteCommand() method. The fix will be available in upcoming patch release which is expected on before 10^th October and we will share the sample project by achieved your desired requirement once release will be rolled out. 

 

Regards, 

Pandiyaraj M 

[Pandiyaraj Muniyandi]

Hi Szabi / Alex, 

 

Thanks for the patience. 

 

We have provided “Interface for `OnToolbarClick` event arguments” and included in the release version 17.3.17-beta. Kindly refer this below release notes section 

https://ej2.syncfusion.com/blazor/documentation/release-notes/17.3.17/#richtexteditor  

 

As we promised, sample prepared to meet your desired requirement, and download it from below link 

 

Insert text on click the custom toolbar button: 

https://www.syncfusion.com/downloads/support/forum/147557/ze/RTE1308548851 

 

Open dialog on click the custom toolbar button and insert text from dialog button click: 

https://www.syncfusion.com/downloads/support/forum/147557/ze/RTE21139236366 

 

We suggest you upgrade to the latest package to resolve this issue. 

 

Regards, 

Pandiyaraj M 

[Pandiyaraj Muniyandi]

Hi Szabi / Alex, 

 

We ensured the feasibility to render template in custom toolbar. Now, you can render EJ2 input components or native HTML elements in custom toolbar, refer to the below documentation section.  

 
https://ej2.syncfusion.com/blazor/documentation/rich-text-editor/toolbar/?no-cache=1#custom-tool   

 

Regards, 

Pandiyaraj