Support forums » Products » Rich Text Editor for .NET and ... » Re: Custom toolbar buttons

Custom toolbar buttons

Last post 04-04-2013, 12:23 PM by Kenneth. 1 replies.
Sort Posts: Previous Next

  •  04-04-2013, 9:41 AM 77151

    Custom toolbar buttons

    Reply Quote

    Is it possible to add custom buttons to the toolbar that trigger an external javascript function?

     

     

  •  04-04-2013, 12:23 PM 77155 in reply to 77151

    Re: Custom toolbar buttons

    Reply Quote

    Hi DanJohnson,

     

    Yes, please refer to example http://www.richtexteditor.com/demo/custom_buttons.aspx. You can find the source code in the download package.

     

    Also, below is the code of this example page.

     

    1. <%@ Page Language="c#" %>  
    2.   
    3. <%@ Register TagPrefix="RTE" Namespace="RTE" Assembly="RichTextEditor" %>  
    4.   
    5. <script runat="server">  
    6.     protected override void OnInit(EventArgs e)  
    7.     {  
    8.         base.OnInit(e);  
    9.   
    10.         Editor1.ToolbarItems = "{bold,italic,underlinemenu}{forecolor,backcolor,fontname,fontsize}{justifyleft,justifycenter,justifyright,justifyfull}{insertorderedlist,insertunorderedlist,outdent,indent}{insertlink,insertimage,insertblockquote,syntaxhighlighter}{unlink,removeformat}//{mybutton1}";  
    11.     }  
    12.   
    13. </script>  
    14.   
    15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    16. <html xmlns="http://www.w3.org/1999/xhtml">  
    17. <head>  
    18.     <title>RichTextEditor - Custom buttons</title>  
    19.     <link rel="stylesheet" href="../example.css" type="text/css" />  
    20. </head>  
    21. <body>  
    22.     <form id="Form1" method="post" runat="server">  
    23.   
    24.   
    25.         <script type="text/javascript">  
    26.         var loader;  
    27.         var editor;  
    28.   
    29.         function RichTextEditor_OnCoreLoad(rteloader) {  
    30.             loader = rteloader;  
    31.   
    32.             var config = loader._config;  
    33.             var toolbar = config._toolbartemplate || config.toolbar;  
    34.             //mybutton1 is added in Editor1.ToolbarItems  
    35.             var btnname = "item_" + toolbar + "_" + config.skin + "_" + config.color + "_mybutton1";  
    36.             var basetype = "image_" + config.skin + "_" + config.color;  
    37.   
    38.             var define = jsml.class_define(btnname, basetype);  
    39.             define.constructor(function () {  
    40.                 this[basetype + "_constructor"]();  
    41.                 this.set_imagename("openfolder");  
    42.                 this.set_tooltip("My custom button!");  
    43.             });  
    44.             define.attach("click", function () {  
    45.                 if (!editor) return;  
    46.                   
    47.                 alert("You clicked a custom button");  
    48.                   
    49.                 editor.AppendHTML("<hr /> You clicked a custom button");  
    50.             });  
    51.         }  
    52.   
    53.         function RichTextEditor_OnLoad(rteeditor) {  
    54.             editor = rteeditor;  
    55.         }  
    56.         </script>  
    57.   
    58.         <h1>  
    59.             Add custom buttons</h1>  
    60.         <p>  
    61.             The Rich Text Editor allows you extend the functions of the editor. You can create  
    62.             new custom buttons and add them to the editor's toolbar list.  
    63.         </p>  
    64.         <p>  
    65.             <RTE:Editor runat="server" ID="Editor1" />  
    66.         </p>  
    67.           
    68.     </form>  
    69. </body>  
    70. </html>  
     

    Regards,

     

    Ken 
View as RSS news feed in XML