Support forums » Products » Rich Text Editor for .NET and ... » Re: Custom dialog button with multiple RichTextEditors on the same page

Re: Custom dialog button with multiple RichTextEditors on the same page

  •  03-12-2014, 9:23 AM

    Re: Custom dialog button with multiple RichTextEditors on the same page

    Reply Quote

    Hi fulles,

     

    I have correct the example page to support multiple editors, please try it.

     

    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}//{mydialog1}";  
    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.   
    21.     <link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.8.22/themes/ui-lightness/jquery-ui.css"  
    22.         rel="stylesheet" />  
    23.   
    24.     <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8.22/jquery-1.7.2.js"></script>  
    25.   
    26.     <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8.22/ui/jquery-ui.js"></script>  
    27.   
    28.     <script type="text/javascript">  
    29.         var editor;  
    30.         function RichTextEditor_OnLoad(rteeditor) {  
    31.             editor = rteeditor;  
    32.         }  
    33.         $(function () {  
    34.             $('#dialog').dialog({  
    35.                 autoOpen: false,  
    36.                 width: 350,  
    37.                 buttons: {  
    38.                     "Ok": function () {  
    39.                         if (editor) {  
    40.                             editor.AppendHTML(document.getElementById("txt_input").value);  
    41.                             document.getElementById("txt_input").value = "";  
    42.                         }  
    43.                         $(this).dialog("close");  
    44.                     },  
    45.                     "Cancel": function () {  
    46.                         $(this).dialog("close");  
    47.                     }  
    48.                 }  
    49.             });  
    50.         });  
    51.     </script>  
    52.   
    53.     <script type="text/javascript">  
    54.         var loader;  
    55.    
    56.         function RichTextEditor_OnCoreLoad(rteloader) {  
    57.             loader = rteloader;  
    58.   
    59.             var config = loader._config;  
    60.             if (config.uniqueid == "Editor1") {  
    61.                 var toolbar = config._toolbartemplate || config.toolbar;  
    62.   
    63.                 var basetype = "image_" + config.skin + "_" + config.color;  
    64.   
    65.                 var dialog1 = "item_" + toolbar + "_" + config.skin + "_" + config.color + "_mydialog1";  
    66.                 var define = jsml.class_define(dialog1, basetype);  
    67.                 define.constructor(function () {  
    68.                     this[basetype + "_constructor"]();  
    69.                     this.set_imagename("openfolder");  
    70.                     this.set_tooltip("My custom dialog!");  
    71.                 });  
    72.                 define.attach("click", function () {  
    73.                     $('#dialog').dialog('open');  
    74.                     return false;  
    75.                 });  
    76.             }  
    77.   
    78.   
    79.         }  
    80.   
    81.     </script>  
    82.   
    83. </head>  
    84. <body>  
    85.     <form id="Form1" method="post" runat="server">  
    86.         <h1>Adding custom buttons (dialog)</h1>  
    87.         <p>  
    88.             The Rich Text Editor allows you extend the functions of the editor. You can create  
    89.             new custom buttons and add them to the editor's toolbar list.  
    90.         </p>  
    91.         <p>  
    92.             <RTE:Editor runat="server" ID="Editor1" />  
    93.             <RTE:Editor runat="server" ID="Editor2" />  
    94.         </p>  
    95.         <div id="dialog" title="RichTextEditor Custom Dialog" style="display: none;">  
    96.             <textarea id="txt_input" rows="4" style="width: 300px; height: 200px;"></textarea>  
    97.         </div>  
    98.     </form>  
    99. </body>  
    100. </html>  
     

    Regards,

     

    Ken 
View Complete Thread