Adding customer controls to RadEditor toolbars

Thread is closed for posting
2 posts, 0 answers
  1. 50A3FD19-4C79-40CC-B3BA-ED3F47C8AF2E
    50A3FD19-4C79-40CC-B3BA-ED3F47C8AF2E avatar
    35 posts
    Member since:
    Apr 2004

    Posted 10 May 2006 Link to this post

     

    Requirements

    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:
    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">
     <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.


Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.