We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Unable add custom component to toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

147557 Sep 16,2019 12:21 PM UTC Nov 14,2019 11:45 AM UTC Blazor 9
loading
Tags: Rich Text Editor
Szabi
Asked On September 16, 2019 12:21 PM UTC

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 [Syncfusion]
Replied On September 17, 2019 06:09 PM UTC

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  
 
Regards, 
Pandiyaraj M 


Szabi
Replied On September 17, 2019 06:17 PM UTC

Thank you so much :)

Pandiyaraj Muniyandi [Syncfusion]
Replied On September 18, 2019 11:01 AM UTC

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
Replied On October 5, 2019 09:38 PM UTC

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 [Syncfusion]
Replied On October 7, 2019 12:54 PM UTC

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
Replied On October 7, 2019 07:10 PM UTC

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 [Syncfusion]
Replied On October 8, 2019 12:53 PM UTC

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 10th October and we will share the sample project by achieved your desired requirement once release will be rolled out. 
 
Regards, 
Pandiyaraj M 


Pandiyaraj Muniyandi [Syncfusion]
Replied On October 11, 2019 09:26 AM UTC

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 
 
As we promised, sample prepared to meet your desired requirement, and download it from below link 
 
Insert text on click the custom toolbar button: 
 
Open dialog on click the custom toolbar button and insert text from dialog button click: 
 
We suggest you upgrade to the latest package to resolve this issue. 
 
Regards, 
Pandiyaraj M 


Pandiyaraj Muniyandi [Syncfusion]
Replied On November 14, 2019 11:45 AM UTC

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.  
 
Regards, 
Pandiyaraj 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon