Support forums » Products » Cute Editor for .NET » Rendering a rich Text control in Javascript

Rendering a rich Text control in Javascript

Last post 10-29-2009, 6:36 AM by Kenneth. 1 replies.
Sort Posts: Previous Next

  •  10-28-2009, 4:32 PM 56756

    Rendering a rich Text control in Javascript

    Reply Quote
    Greetings,
     
    I am wondering if it is possible to render add a new CuteEditor to the javascript DOM.
     
    My hope is a user would click on a div of text that launchs CuteEditor to allow the user to edit the content of the div, then click save to write the HTML value back to the div. 
     
    Thanks,
    Jay
    Filed under: , ,

  •  10-29-2009, 6:36 AM 56770 in reply to 56756

    Re: Rendering a rich Text control in Javascript

    Reply Quote
    Hi jgreenjr,
     
    Try the example below
     
    1. <%@ Page Language="C#" AutoEventWireup="True" %>   
    2.   
    3. <%@ Register Namespace="CuteEditor" Assembly="CuteEditor" TagPrefix="CE" %>   
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    5.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    6. <html xmlns="http://www.w3.org/1999/xhtml">   
    7. <head id="Head1" runat="server">   
    8.     <title>D</title>   
    9. </head>   
    10. <body>   
    11.     <form id="Form1" runat="server">   
    12.         <div id="div1" onclick="editContent()" style="border: solid 1px red">   
    13.             click me to start editing   
    14.         </div>   
    15.         <div id="div2" style="visibility: hidden; position: absolute">   
    16.             <CE:Editor ID="editor1" runat="server">   
    17.             </CE:Editor>   
    18.             <input type="button" value="Save" onclick="save()" />   
    19.         </div>   
    20.     </form>   
    21. </body>   
    22. </html>   
    23.   
    24. <script type="text/javascript">    
    25. var div1=document.getElementById("div1");   
    26. var div2=document.getElementById("div2");   
    27. var editor1=document.getElementById('<%= editor1.ClientID %>');   
    28. var content=div1.innerHTML;   
    29.   
    30. function editContent()   
    31. {   
    32. div2.style.visibility="visible";   
    33. div1.style.visibility="hidden";   
    34. editor1.SetHTML(content);   
    35. editor1.FocusDocument();   
    36. }   
    37. function save()   
    38. {   
    39. div2.style.visibility="hidden";   
    40. div1.style.visibility="visible";   
    41. div1.innerHTML=editor1.GetHTML();   
    42. }   
    43.   
    44. </script>  

    Regards,
     
    ken
View as RSS news feed in XML