BoldDeskWe are launching BoldDesk on Product Hunt soon. Learn more & follow us.
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. ");
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
<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
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);
|
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); |
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, |
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. |
Please let us know if you have further query.
Regards,
Kasithangam
<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