r.a.d.editor version |
6.x |
.NET version |
1.x |
Visual Studio version |
2003 |
programming language |
VB#, JavaScript |
browser support |
all browsers supported by r.a.d.editor |
Hello people,
Are you trying to add some controls to your RadEditor? No success? So, I glad to help you.
3 easy steps to do it:
- Create your controls set and set them into a table.
- Attach javascript to your code behind
- Modify your "ToolsFile.xml"
A sample project is also attached illustrating the differents steps, and it's ready to run.
Have fun trying this.
And without forgetting a kind thanks to Petya from Telerik team.
Regards, Amine Kassir.
--------------------------------------------------------------
1. Let us create some controls and put them into a table.
<TABLE id="tblHolder" cellSpacing="0" cellPadding="2" border="0" runat="server">
<TR>
<TD><asp:label id="lbl_myLable" runat="server"></asp:label></TD>
<TD><asp:TextBox id="tBox_myTextBox" runat="server" CssClass="textbox" Columns="60"></asp:TextBox></TD>
<TD width="10"></TD>
<TD><asp:CheckBox id="cBox_myCheckBox" runat="server"></asp:CheckBox></TD>
<TD width="60"></TD>
</TR>
</TABLE>
One more this about this TABLE tag: IT MUST BE PLACED BEFORE YOUR EDITOR TAG.
It gives something like this:
<TABLE...></TABLE>
<radE:RadEditor id="RadEditor1" Runat="server"></radE:RadEditor>
-------------------------------------------------------------------
2. Add javascript functions to add toolbar items. The javascript block must be in header or in top of the body tag in HTML-code, or add your JS using the "Page.RegisterClientScriptBlock" method in code behind.
<script language='javascript'>
if ('undefined' == typeof(RadEditorToolInitializer)){
var RadEditorToolInitializer = {};
}
RadEditorToolInitializer['myTools'] = function (toolArgs){
function CustomRenderedTool(toolArgs){
this.Controller = toolArgs.Controller;
this.Name = toolArgs.Name;
}
CustomRenderedTool.prototype.Create = function(){
var aHolder = document.getElementById('" & tblHolder.UniqueID & "');
return aHolder;
};
return new CustomRenderedTool (toolArgs);
};
</script>
---------------------------------------------------------
3. Let's step add a toolbar instance in the ToolsFile.XML document, which can be found at this path:
~/RadControls/Editor/ToolsFile.xml
<tools name="myToolBar" dockable="false">
<tool name="myTools" type="Custom"/>
</tools>
----------------------------------------------------- end of statement
Enjoy it, chears,
Amine Kassir.