Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Editor > Adding customer controls to RadEditor toolbars

• Amine Kassir

  Posted on May 10, 2006 (permalink)

   

  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.
  
  
  

  Attached files

  • sRadEditorToolbarAddControls.zip

  Reply

• Alireza

  Posted on May 15, 2008 (permalink)

  Dear Amine Kassir
  
  Thank you very much for the code.
  
  1.
  
  I used your code but I think maybe it's better instead of this line of code:
  
  var aHolder = document.getElementById('" & tblHolder.UniqueID & "');
  
  it's better to use this:
  var aHolder = document.getElementById("tblHolder");
  
  The first line of code gave me an error
  
  2.
  This article was just about adding a toolbar with some controls, but how can we control them? For example, how can I create a button on the toolbar that pressing it leads to change the editor background to a random color? (Of course using client side coding)
  
  Best regards
  
  
  

  Reply

Back to Top

Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Editor > Adding customer controls to RadEditor toolbars