Adding simple tool to control

[Alain]

Hi,

I am trying to add some simple tools to the control.

1) A button that inserts some predefined code (snippet) at the current position

2) Another button that inserts some predefines code matching the selection from a dropdownlist (which should be inserted too and initialized in codebehind when page loads)

I cannot figure how to do this simply.

I have found the following code in forums (but it is for ASP classic) on it doesn't seem to work (the Namedsnippet property does not exists).

rteDetail.Tools.Namedsnippet.Add("ConfirmationForm","Dear ____________________,Thank you for inquiring about ____________. Your request will be processed in 48 hours and shipped at the address you have provided.Please, contact us if you have any problems. ");

If someone have any hint I take it.

Thanks

[Kasithangam C]

Hi Alain,

Thanks for contacting Syncfusion Support.

As you mentioned the ASP.NET Classic code, you can able to add the content (snippet) into RTE. We have achieved your requirement on “while clicking the button, adding code snippets into RTE” in ASP.NET platform and based on that we prepared the sample. Please refer to the following sample:

Sample Location: Sample

In the above sample, we have added “Insert Code” custom button.On clicking that button in the RTE toolbar, the dialog box will get opened. You can add desire code example into RTE. We have showcased this functionality of RTE in the following UG documentation link:
http://docs.syncfusion.com/aspnet/richtexteditor/customized-tools-option

If we have misunderstood you requirement, please provide more details on your requirement along with the platform that you work on.Information provided by you will be more helpful for us to analyze further and provide solution. Please let us know if you have any query.

Regards,
Kasithangam

[Alain]

Hi Kasithangam,

Thanks for your reply.

I should have said that I also seen that sample in the online doc.

However, my need is a little bit different :

I still need all the existing tollbars items, I just need to add one or more.

Can I add (or even better insert at some choosen place) some custom buttons or other controls (like dropdownlists) ?

Alain

[Kasithangam C]

Hi Alain,

Thanks for your update.

Query: I still need all the existing tollbars items, I just need to add one or more.
Can I add (or even better insert at some choosen place) some custom buttons or other controls (like dropdownlists)?

Yes, you can add no of custom tool (ex: custom buttons, dropdownlist) in the RTE toolbar by using the custom tool option. Also you can add the custom too at the desire place in RTE toolbar by specifying the tools in the ToolsList property as shown below code:

<code>
<ej:RTE ID="rteSample" runat="server" ToolsList="customTool,font,style,alignment,lists,doAction,links,images,tables,scripts,casing,paragraph">
</ej:RTE>
</code>

We have showcased the list of toolbar items that are define in the RTE toolbar in the below documentation link:

http://docs.syncfusion.com/aspnet/richtexteditor/toolbar-support

Also, we have prepared the sample based on your requirement and please refer to the following sample:

Sample: Sample

In the above sample, we have added the custom tool in RTE as shown the below code:
 
<code>

<Tools>

                <CustomTool>

                    <ej:CustomTool Name="Button" />

                    <ej:CustomTool Name="DDL" />

                    <ej:CustomTool Action="showDialog" Css="codeInsert" Name="codeInsert" Tooltip="Insert code snippets" />

                </CustomTool>
            </Tools>
</code>


We have rendered the button and dropdownlist controls in the RTE by using the “ClientSideOnPreRender” event of RTE and please refer to the following code example:

<code>

<ej:RTE ID="rteSample" runat="server" ClientSideOnPreRender="OnCreate">

</ej:RTE>

   

<button id="rteButton">RTEButton</button>

<input type="text" id="selectCar" />

<div id="carsList">

     <ul>

        <li>Audi A4</li>

        <li>Audi A5</li>

        <li>Audi A6</li>

        <li>Audi A7</li>

        <li>Audi A8</li>

     </ul>
  </div>

function OnCreate()

        {

            var btn, btntarget, dll, ddltarget;

            //Add button control

            btn = $("#Button");

            $("#Button").find("div").remove();

            btntarget = $("#rteButton");

            btn.append(btntarget);

            //Add DDL control

            ddl = $("#DDL");

            $("#DDL").find("div").remove();

            ddltarget = $('#selectCar')

            ddl.append(ddltarget);

            //Initialize button control

            $("#rteButton").ejButton({ type: ej.ButtonType.Button });

            //Initialize dropdownlist control

            $('#selectCar').ejDropDownList({

                targetID: "carsList",

                width: "200px"

            });
        }
</code>

Similarly, you can add desire controls in RTE toolbar. Please let us know if you need any further assistance.

Regards,

Kasithangam

[Alain]

Hi,

And first of all : thank you : with your example I managed to do something satisfying for my actual needs.

Anyway I still have some questions concerning the RTE control :

• Can we have color pickers (for color and background color) like the one proposed for border color in the insert image dialog ? The default ones are too simple..
• Can we add separators (like vertical bars and/or new line) in the tool list ?
• Can we have different custom tools groups, which could be inserted at different places in the tool list ?
• I would like, when I click on a custom button added to the toollist, to open a new aspx page (like having a <a> tag in the result action), how could I do that ?
• Is it possible to add new custom controls and their action from codebehind ?

I also miss many documentation concerning the control :

• like all the possible attributes and their function in RTE control 
• the possible functions applying to rteObj (like the ExecuteCommand in rteObj.executeCommand("inserthtml", "xxx"))
  
• the possible parameters applying to the ExecuteCommand (like insertHTML in rteObj.executeCommand("inserthtml", "xxx"))
  

Is there somewhere a complete reference documentation for the controls ?

Cheers.

Alain

[Kasithangam C]

Hi Alain,

Thanks for your update.

Query 1: Can we have color pickers (for color and background color) like the one proposed for border color in the insert image dialog? The default ones are too simple.	As per our previous update, you can add the color picker control by using the custom tool option.
Query 2: Can we add separators (like vertical bars and/or new line) in the tool list?	Yes, we can add separator in the RTE toolbar list.We have a property “enableSeparator” in the toolbar control.So we need to set this property as true by creating the object of toolbar in the ClientSideOnPreRender event of RTE as shown below code: <code> function OnCreate() {                      var obj = $("#<%=rteSample.ClientID%>_toolbar").data("ejToolbar");             obj.option("enableSeparator", true);         } </code>
Query 3: Can we have different custom tools groups, which could be inserted at different places in the tool list?	Currently we are analyzing on this query.So we need two business days (16th September) to validate more on this and update the details.
Query 4: I would like, when I click on a custom button added to the toollist, to open a new aspx page (like having a <a> tag in the result action), how could I do that?	While clicking custom button to open new aspx page, you need to use below code: <code> function On_Click()         {             window.open('About.aspx', AboutPage);         } </code>
Query 5: Is it possible to add new custom controls and their action from codebehind ?	Yes, you can add the custom tool and their action from code behind as shown below code: </code> protected void Page_Load(object sender, EventArgs e)         {            CustomTool obj = new CustomTool();            obj.Name = "CodeButton";            obj.Tooltip = "codebutton";            rteSample.Tools.CustomTool.Add(obj);         } </code>
Query 6: the possible functions applying to rteObj	We have a documentation link to know about the methods of our RTE Component, please go through the following API link,                                  http://help.syncfusion.com/js/api/ejrte#methods
Query 7: the possible parameters applying to the ExecuteCommand	We have used common method execCommand in our Public method ExecuteCommand. You can use all the parameters in ExecuteCommand which is used execCommand. Please find the below link to what are the parameters which is used in execCommand. https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand https://www.developphp.com/page.php?id=879
Query 8: Is there somewhere a complete reference documentation for the controls ?	We have showcased the documentation for getting started and overview of our RTE component and please find the link for the same: http://help.syncfusion.com/aspnet/richtexteditor/overview To know more details about properties, methods and events of our RTE Component, please go through the following API link, http://help.syncfusion.com/js/api/ejrte Similarly, you can find the desire control documentation in the above links.

Also, we have included the above changes in the sample and please refer to the following sample:

Sample: Sample

Please let us know if you have further query.                                

Regards,
Kasithangam

[Kasithangam C]

Hi Alain,

Thanks for your patience.

Query: Can we have different custom tools groups, which could be inserted at different places in the tool list?

We can’t able to create different custom tool groups and inserted at different places in the toollist.Instead of using different custom tool groups,you can add the custom tool in the desired place by using tools property.you can create the div in the RTE toolbar in the desired place as shown below code:

<code>

  <ej:RTE ID="rteSample" runat="server" ToolsList="customTool,alignment,lists,doAction,links,images,tables,scripts,casing,paragraph" ClientSideOnPreRender="OnCreate">

            <RTEContent>

            </RTEContent>

          <Tools Tables="createTable,newtool,newtool1,newtool2">

                <CustomTool>

                    <ej:CustomTool Name="Button" />

                    <ej:CustomTool Name="DDL" />

                    <ej:CustomTool Action="showDialog" Css="codeInsert" Name="codeInsert" Tooltip="Insert code snippets" />

                </CustomTool>

            </Tools>
        </ej:RTE>
</code>

In the above code, it will create a div in the RTE toolbar in the desired place.By using the id of the element which is created in RTE toolbar, you can add the custom tool.We have prepared the sample based on this and please refer to the following sample:

Sample: Sample

Please let us know if you have further query.                                

Regards,

Kasithangam