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

Custom dialog button with multiple RichTextEditors on the same page

Last post 03-17-2014, 6:54 AM by fulles. 6 replies.
Sort Posts: Previous Next

  •  03-12-2014, 5:29 AM 80061

    Custom dialog button with multiple RichTextEditors on the same page

    Reply Quote

     I've implemented a custom button on RichTextEditor similar to the example on the page http://richtexteditor.com/demo/custom_buttons2.aspx.

     

    However, I'm having problems getting this to work when there are multiple editors on the same page.  Has anyone been able to do this and if so could you provide an example?

     

    Thanks,

    Steve

  •  03-12-2014, 9:23 AM 80066 in reply to 80061

    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 

  •  03-12-2014, 10:58 AM 80072 in reply to 80066

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

    Reply Quote
     

    Thanks Ken but I'm not sure this gives me what I want.

     

    I need all Rich Text Editors on the page to have the custom button.

     

    Thanks,

    Steve

  •  03-13-2014, 9:27 AM 80076 in reply to 80072

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

    Reply Quote

    hi fulles,

     

    this is the custom button example 2. and I used multiple editors in this example page, the first one has the custom button.

     

    Regards,

     

    Ken 

  •  03-13-2014, 11:01 AM 80079 in reply to 80076

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

    Reply Quote

    Thanks Ken.

     

    Yes I understand that.  What I require though is to have 2 editors on the page and both of them to have the custom button.

     

    Thanks,

    Steve 

  •  03-14-2014, 8:01 AM 80086 in reply to 80079

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

    Reply Quote

    hi fulles,

     

    Please try the new one below. Two editors has its own custom button.

     

    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 = "{unlink,removeformat}//{mybutton1}";  
    11.         Editor2.ToolbarItems = "{unlink,removeformat}//{mybutton2}";  
    12.     }  
    13.   
    14. </script>  
    15.   
    16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    17. <html xmlns="http://www.w3.org/1999/xhtml">  
    18. <head>  
    19.     <title>RichTextEditor - Custom buttons</title>  
    20.     <link rel="stylesheet" href="../example.css" type="text/css" />  
    21. </head>  
    22. <body>  
    23.     <form id="Form1" method="post" runat="server">  
    24.         <p>  
    25.             <RTE:Editor runat="server" ID="Editor1" />  
    26.             <br /><br />  
    27.             <RTE:Editor runat="server" ID="Editor2" />  
    28.         </p>  
    29.           
    30.     </form>  
    31. </body>  
    32. </html>  
    33.   <script type="text/javascript">  
    34.       var editor1;  
    35.       var editor2;  
    36.       function RichTextEditor_OnLoad(editor) {  
    37.           if (editor._config.uniqueid == "Editor1") {  
    38.               editor1 = editor;  
    39.           }  
    40.           if (editor._config.uniqueid == "Editor2") {  
    41.               editor2 = editor;  
    42.           }  
    43.           
    44.       }  
    45.       function RichTextEditor_OnCoreLoad(rteloader) {  
    46.           var config = rteloader._config;  
    47.           if (config.uniqueid == "Editor1") {  
    48.               var config = rteloader._config;  
    49.               var toolbar = config._toolbartemplate || config.toolbar;  
    50.               //mybutton1 is added in Editor1.ToolbarItems  
    51.               var btnname = "item_" + toolbar + "_" + config.skin + "_" + config.color + "_mybutton1";  
    52.               var basetype = "image_" + config.skin + "_" + config.color;  
    53.   
    54.               var define = jsml.class_define(btnname, basetype);  
    55.               define.constructor(function () {  
    56.                   this[basetype + "_constructor"]();  
    57.                   this.set_imagename("openfolder");  
    58.                   this.set_tooltip("My custom button!");  
    59.               });  
    60.               define.attach("click", function () {  
    61.                   editor1.InsertHTML("editor1");  
    62.               });  
    63.           }  
    64.   
    65.           if (config.uniqueid == "Editor2") {  
    66.               var config = rteloader._config;  
    67.               var toolbar = config._toolbartemplate || config.toolbar;  
    68.               //mybutton2 is added in Editor1.ToolbarItems  
    69.               var btnname = "item_" + toolbar + "_" + config.skin + "_" + config.color + "_mybutton2";  
    70.               var basetype = "image_" + config.skin + "_" + config.color;  
    71.   
    72.               var define = jsml.class_define(btnname, basetype);  
    73.               define.constructor(function () {  
    74.                   this[basetype + "_constructor"]();  
    75.                   this.set_imagename("openfolder");  
    76.                   this.set_tooltip("My custom button!");  
    77.               });  
    78.               define.attach("click", function () {  
    79.                   editor2.InsertHTML("editor2");  
    80.               });  
    81.           }  
    82.   
    83.       }  
    84.   
    85.         </script>  
     

    Regards,

     

    Ken 

  •  03-17-2014, 6:54 AM 80094 in reply to 80086

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

    Reply Quote

    Thanks Ken.

     

    I want this to be automated so that developers simply add the control to the page without having to add any JavaScript.  I can work with your example to produce that.

     

    Thanks,

    Steve

View as RSS news feed in XML