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
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

146920 Aug 23,2019 06:06 AM UTC Aug 27,2019 09:43 AM UTC jQuery 3
loading
Tags: ejRTE
Jerry Amadon
Asked On August 23, 2019 06:06 AM UTC

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 [Syncfusion]
Replied On August 26, 2019 10:16 AM UTC

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> 
 
 
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
Replied On August 26, 2019 02:42 PM UTC

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 [Syncfusion]
Replied On August 27, 2019 09:43 AM UTC

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. 
 
 
 
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. 


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