Moving the editor in the DOM

Last post 06-22-2009, 4:58 AM by Kenneth. 7 replies.
Sort Posts: Previous Next
  •  06-16-2009, 12:11 PM 53175

    Moving the editor in the DOM

    Hi,
     
    New to cute editor, upgrading from FCK!
     
    I am working on an application where I will show existing text or place holders which will, when clicked, display a cute editor with the content that was on the page (if any).
     
    This will allow me to show the user a preview of the page (We will have 3-6 of these editable content areas). When the user clicks on any of the text a cuteeditior control of equal width (but fixed height) to the text it replaced will be shown. The user will then hit save (easy to capture and handle) to commit the content and return to the text view.
     
    I am not dynamically creating a control (is this possible?) in JS as I think the responsiveness of having it hidden and available will be worth the additional initial load time. I would consider doing so if its the most sensible option / decent performance.
     
    If I take the control from the dom and append it (appendChild etc) to the target element the control moves fine but seems to loose it's javascript event handlers.
     
    I do not want to measure the width of the target, fix its height and wipe the text and then absolutely position over the top as this feels dirty. I will not use post backs to update the text / render the controls as this 2009!
     
    thanks in advance for any help you can offer with this,
     
    Megabeans
  •  06-16-2009, 1:14 PM 53176 in reply to 53175

    Re: Moving the editor in the DOM

  •  06-17-2009, 4:42 AM 53206 in reply to 53176

    Re: Moving the editor in the DOM

    Thanks for the links but this is not quite what I am looking for.
     
    UserFloatToolbar.aspx - Unfortunatly this only unclutters the interface when the user is not activly working with an instance of cuteeditor. It requires that each editable area on my page is displayed as a text box with a fixed height and width (I don't want this, I will "...show the user a preview of the page..." and will only show a cute-editor instance when the user clicks on that text.
     
    dad.html - I could adapt this (I would replace the text box with static html which when clicked would spawn a cuteeditor in another window (or DHTML popup).
     
    Example JS: (typed by hand, forgive any errors!)
     
    <!-- editor instance --> 
    <CE:Editor id="ceDynamic" runat="server" EnableStripScriptTags="false" />
    <!-- content placeholders -->
    <div id="placeholder1" onclick="edit('placeholder1')">editable content 1</div>
    <div id="placeholder2" onclick="edit('placeholder2')">editable content 2</div>
     
    <script>
     
    function edit(instance)
    {
                var placeholder = document.getElementById(instance);
     
                //cache content
                var cache = placeholder.innerHTML;
                //clear element
                placeholder.innerHTML = '';

                var dynEdit = document.getElementById('ceDynamic');
                //append the text editor instance to the cleared placeholder !!! This seems to remove the event handlers !!!
                placeholder.appendChild(dynEdit);
                //set the text of the cuteeditor to the snapshot we took earlier
                dynEdit.setHTML(cache);
                //set focus to the cuteeditor control
                dynEdit.FocusDocument();
    }
    </script>
  •  06-17-2009, 8:48 PM 53234 in reply to 53206

    Re: Moving the editor in the DOM

    Hi Megabeans ,
     
    Try this way
    1. <%@ Page Language="C#" %>   
    2.   
    3. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>   
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    5.   
    6. <script runat="server">   
    7.       
    8. </script>   
    9.   
    10. <html xmlns="http://www.w3.org/1999/xhtml">   
    11. <head runat="server">   
    12.     <title>Untitled Page</title>   
    13. </head>   
    14. <body>   
    15.     <form id="form1" runat="server">   
    16.         <div>   
    17.             <div id="placeholder1" onclick="edit('placeholder1')" >   
    18.                 editable content 1</div>   
    19.             <div id="placeholder2" onclick="edit('placeholder2')" >   
    20.                 editable content 2</div>   
    21.             <CE:Editor ID="ceDynamic" runat="server" EnableStripScriptTags="false" Style="visibility: hidden" />   
    22.         </div>   
    23.     </form>   
    24. </body>   
    25. </html>   
    26.   
    27. <script>   
    28.  function edit(instance)   
    29. {   
    30.             var placeholder = document.getElementById(instance);   
    31.     
    32.             //cache content   
    33.             var cache = placeholder.innerHTML;   
    34.             //clear element   
    35.             placeholder.innerHTML = '';   
    36.   
    37.             var dynEdit = document.getElementById('<%= ceDynamic.ClientID %>');   
    38.             dynEdit.style.visibility="visible";   
    39.             //append the text editor instance to the cleared placeholder !!! This seems to remove the event handlers !!!   
    40.             placeholder.appendChild(dynEdit);   
    41.             //set the text of the cuteeditor to the snapshot we took earlier   
    42.             dynEdit.setHTML(cache);   
    43.             //set focus to the cuteeditor control   
    44.             dynEdit.FocusDocument();   
    45. }   
    46. </script>  

    Regards,
     
    Ken
  •  06-18-2009, 6:21 AM 53254 in reply to 53234

    Re: Moving the editor in the DOM

    Thanks for the response, I actually had a variable in my version that referenced the .CientId so that wasn't the issue.
     
    When you run that code does the control still work? For me it becomes unresponsive.
  •  06-19-2009, 2:58 AM 53288 in reply to 53254

    Re: Moving the editor in the DOM

    Hi Megabeans,
     
    I will modify this example later.
     
    Regards,
     
    ken
  •  06-22-2009, 4:57 AM 53346 in reply to 53288

    Re: Moving the editor in the DOM

    Hi,
     
    Try this way
    1. <%@ Page Language="C#" %>   
    2.   
    3. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>   
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    5.   
    6. <script runat="server">      
    7.          
    8. </script>   
    9.   
    10. <html xmlns="http://www.w3.org/1999/xhtml">   
    11. <head id="Head1" runat="server">   
    12.     <title>Untitled Page</title>   
    13. </head>   
    14. <body>   
    15.     <form id="form1" runat="server">   
    16.         <div id="placeholder1">   
    17.             <span id="span1" onclick="edit('placeholder1')">editable content 1</span>   
    18.             <CE:Editor ID="Editor1" runat="server" EnableStripScriptTags="false" Style="display: none" />   
    19.             <input type="button" value="save" onclick="save1()" id="save" style="display: none" />   
    20.         </div>   
    21.     </form>   
    22. </body>   
    23. </html>   
    24.   
    25. <script>      
    26.   
    27.       var span1 = document.getElementById("span1");      
    28.       var save = document.getElementById("save");      
    29.       var dynEdit = document.getElementById('<%= Editor1.ClientID %>');     
    30.       var cache = span1.innerHTML;     
    31.       function edit(instance)      
    32.         {      
    33.              
    34.              span1.innerHTML = '';      
    35.             dynEdit.style.display="block";   
    36.              save.style.display="block";   
    37.             dynEdit.setHTML(cache);      
    38.             dynEdit.FocusDocument();      
    39.         }      
    40.       function save1()   
    41.         {   
    42.         span1.innerHTML=dynEdit.getHTML();   
    43.         dynEdit.style.display="none";   
    44.         save.style.display="none";   
    45.         }   
    46. </script>  

    Regards,
     
    ken
  •  06-22-2009, 4:58 AM 53347 in reply to 53254

    Re: Moving the editor in the DOM

    ~
View as RSS news feed in XML