Adding customer controls to RadEditor toolbars

2 posts, 0 answers
  1. Amine Kassir
    Amine Kassir avatar
    35 posts
    Member since:
    Apr 2004

    Posted 10 May 2006 Link to this post



    r.a.d.editor version


    .NET version


    Visual Studio version


    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:
    1. Create your controls set and set them into a table.
    2. Attach javascript to your code behind
    3. 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">
      <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>

    One more this about this TABLE tag: IT MUST BE PLACED BEFORE YOUR EDITOR TAG.
    It gives something like this:
    <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);


    3. Let's step add a toolbar instance in the ToolsFile.XML document, which can be found at this path:

    <tools name="myToolBar" dockable="false">               
     <tool name="myTools" type="Custom"/>

    ----------------------------------------------------- end of statement
    Enjoy it, chears,
    Amine Kassir.

Back to Top