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. Image for the cookie policy date

How do i insert a dropdown-button into the toolbar?

I found a pretty "non straight forward" example for asp.net, but nothing for javascript. Isn't it possible to create an item in customTools which simply contains a list of texts and actions?

I came from trumbowyg, where this can be done pretty easy by something like:
code: {

    dropdown: ['code1', 'code2', 'code3', 'code4', 'code5', 'code6', 'code7', 'code8', 'code9', 'code10'],
ico: 'preformatted',
text: 'Insert Special Placeholders'
code1: {
fn: function () {
text: 'Migration-Button',
hasIcon: false
code2: {
fn: function () {
param: 'TextToInsert',
text: 'Device-Serial',
hasIcon: false

Unfortunately, i found nothing similar in this RichTextEditor

3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team August 26, 2019 05:16 AM

Hi Jerry,  
Good day to you. 
Based on your update, we suspect that your requirement is to add DropDownList as one of the custom tools of EJ1 RTE. We suggest you create input element with required id and append this to the div created through custom tool of RTE. Please refer to the following code 
<script type="text/javascript" class="jsScript"> 
    var items = [{ value: "1", text: "Migration-Button" }, { value: "2", text: "Device-Serial" }, { value: "3", text: "Insert" }, { value: "4", text: "Test" }] 
    var rteObj; 
    $(function () { 
            width: "100%", 
            minWidth: "150px", 
            cssClass: "custom", 
            isResponsive: true, 
            toolsList: ["formatStyle", "font", "customTools", "style"], 
            tools: { 
                formatStyle: ["format"], 
                font: ["fontName", "fontSize"], 
                style: ["bold", "italic"], 
                customTools: [{ 
                    name: "InsertImage", 
                    tooltip: "InsertImage ", 
                    css: "InsertImage", 
        var input = document.createElement("input"); //create input 
        input.setAttribute("id", "dropdown"); //set id for input 
        $("div.InsertImage")[0].append(input);         // append this input to custom tool 
        $("#dropdown").ejDropDownList({ dataSource: items }); // render this input as DropDownList. 
In the same way, you can render any type of controls as custom tool of RTE based on your scenario. Please check the above sample and get back to us, if you need any further assistance on this. 
Ashokkumar B. 

JA Jerry Amadon August 26, 2019 09:42 AM

Thanks for the example. This works somehow, but not exactly how i want it to have (see attached gif).

I could live with the different look, but not without adding an action to each items click. I tryed it with an additional option "action", which did not work in this context.

Attachment: editor_examle.gif_6972edfb.zip

AB Ashokkumar Balasubramanian Syncfusion Team August 27, 2019 04:43 AM

Hi Jerry,  
Based on the GIF image, we prepared a sample by including splitbutton with DropDown mode as custom tool in RTE. Since the custom tool is a separate control, we suggest you trigger events of corresponding control to perform required action. Please refer to the following code.  
            size: "normal", 
            showRoundedCorner: true, 
            contentType: "imageonly", 
            prefixIcon: "e-icon e-handup", 
            buttonMode: ej.ButtonMode.Dropdown, 
            targetID: "menu", 
                  var rteObj = $("#rteSample").data("ejRTE"); 
                  rteObj.setHtml("<a rel='nofollow' href='https://google.com'>Link</a>"); //set Html based on the selection of split button. 
        }); // render this custom tool as splitbutton dropdown. 
Also, GIF seems to contain EJ2 RTE containing EJ2 dropdown button but the previously provided solution relates with EJ1 RTE (based on the platform chosen with this forum). So kindly confirm your platform to proceed further on this.  
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon