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

[Jerry Amadon]

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 () {
        trumbowyg.append('{link}');
    },
    text: 'Migration-Button',
    hasIcon: false
},
code2: {
    fn: function () {
        trumbowyg.append('{serial}');
    },
    param: 'TextToInsert',
    text: 'Device-Serial',
    hasIcon: false
},

Unfortunately, i found nothing similar in this RichTextEditor

[Ashokkumar Balasubramanian]

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 () { 

        $("#rteSample").ejRTE({ 

            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. 

    }); 

</script> 

 

Sample: https://jsplayground.syncfusion.com/wbvz3loj 

 

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. 

 

Regards, 

Ashokkumar B. 

[Jerry Amadon]

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

[Ashokkumar Balasubramanian]

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.  

 

$("#dropdown").ejSplitButton({ 

            size: "normal", 

            showRoundedCorner: true, 

            contentType: "imageonly", 

            prefixIcon: "e-icon e-handup", 

            buttonMode: ej.ButtonMode.Dropdown, 

            targetID: "menu", 

            itemSelected:function(args) 

             { 

                if(args.text=="Migration-Button") 

                { 

                  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. 

 

 

Sample: https://jsplayground.syncfusion.com/vh55wtaf  

 

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.  

 

Regards, 

Ashokkumar B.