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

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

Reply | Reply with quote

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

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.

Reply | Reply with quote

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

Reply | Reply with quote

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.

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
146920	Aug 23,2019 06:06 AM UTC	Aug 27,2019 09:43 AM UTC	jQuery	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US