Support forums » Products » Rich Text Editor for .NET and ... » Re: Use RichTextEditor as image selector

Re: Use RichTextEditor as image selector

  •  04-08-2014, 8:28 AM

    Re: Use RichTextEditor as image selector

    Reply Quote

    Hi,

     

    You can try the way below. I use a new HiddenField control to save the src value, so you can get it at server side.

     

    1. <%@ Page Language="VB" %>  
    2. <%@ Register TagPrefix="RTE" Namespace="RTE" Assembly="RichTextEditor" %>  
    3. <!DOCTYPE html>  
    4.   
    5. <script runat="server">  
    6.   
    7.     Protected Sub btn_GetURL_Click(sender As Object, e As EventArgs)  
    8.         l1.Text=hf1.Value  
    9.     End Sub  
    10. </script>  
    11.   
    12. <html xmlns="http://www.w3.org/1999/xhtml">  
    13. <head runat="server">  
    14.  <script type="text/javascript">  
    15.      var editor;  
    16.      var showed = false;  
    17.   
    18.      function RichTextEditor_OnLoader(loader) {  
    19.          var config = loader._config;  
    20.          config.showtoolbar = false;  
    21.          config.showtoolbar_code = false;  
    22.          config.showbottombar = false;  
    23.          config.preloadplugins = "";  
    24.          var div = document.getElementById(config.containerid);  
    25.          div.style.display = "none";  
    26.      }  
    27.      function ShowEditorGallery() {  
    28.          showed = true;  
    29.          if (editor) {  
    30.              editor.ExecUICommand(null, "InsertGallery");  
    31.          }  
    32.      }  
    33.   
    34.      function RichTextEditor_OnLoad(argeditor) {  
    35.          editor = argeditor;  
    36.          if (showed)  
    37.              ShowEditorGallery()  
    38.      }  
    39.   
    40.      function RichTextEditor_OnTextChanged() {  
    41.          if (!showed) return;  
    42.          showed = false;  
    43.          var img = editor.GetPointNode();  
    44.          var editwin = editor.GetWindow();//added by ken  
    45.          var editdoc = editwin.document;//added by ken  
    46.          if (img && img.GetNameLower() == "img") {  
    47.              var src = img.GetAttribute("src");  
    48.              var width = editdoc.images[0].width;//added by ken  
    49.              var height = editdoc.images[0].height;//added by ken  
    50.              OnGetImageUrl(src, width, height);//changed by ken  
    51.          }  
    52.          editor.SetText("");  
    53.      }  
    54.      //changed by ken  
    55.      function OnGetImageUrl(src, width, height) {  
    56.          document.getElementById("result").innerHTML = "You selected : " + src + "<br/>" + "width : " + width + "<br/>" + "height : " + height;  
    57.          document.getElementById("<%= hf1.ClientID %>").value = src;  
    58.         }  
    59.   
    60.     </script>  
    61. </head>  
    62. <body>  
    63.     <form id="form1" runat="server">  
    64.         <h1>Use RichTextEditor as image selector</h1>  
    65.         <p>  
    66.         </p>  
    67.         <div style="display: none;">  
    68.             <RTE:Editor runat="server" ID="Editor1" />  
    69.         </div>  
    70.         <br />  
    71.         <div>  
    72.             <button type="button" onclick="ShowEditorGallery();return false;">Select Image</button>  
    73.         </div>  
    74.         <br />  
    75.         <div id="result"></div>  
    76.             <asp:HiddenField ID="hf1" runat="server"  />  
    77.         <asp:Button ID="btn_GetURL" runat="server" Text="get url at server side" OnClick="btn_GetURL_Click"/>  
    78.         <br />  
    79.         <asp:Label ID="l1" runat="server"></asp:Label>  
    80.     </form>  
    81. </body>  
    82. </html>  
     

    Regards,

     

    Ken 
View Complete Thread