Creating editor with HTML and JS

Last post 04-30-2008, 2:31 PM by gwp. 6 replies.
Sort Posts: Previous Next
  •  04-24-2008, 9:00 AM 39724

    Creating editor with HTML and JS

    Hi,  I need to be able to create an editor with HTML and JS.
    http://www.gwptest.ca/editortest.htm has the attempt I'm working on.
     
    I also need to attach onkeypress and onblur events, and I've seen posts for those, but I can't get the editor to display/function properly in the first place.
     
    If you check the error console of your browser there's a problem with _CState in the JS toward the end of the code...I think the problem stems from that.
     
    Thanks,
    Peter

  •  04-24-2008, 9:56 AM 39727 in reply to 39724

    Re: Creating editor with HTML and JS

    I don't know why, but it suddenly works.
    The issue that I'm having now, however, is that in the JS function to attach the events, "editor1.GetDocument is not a function" is the e error I can't figure out.
     
    Any help would be appreciated!
     
    Thanks!
  •  04-24-2008, 10:04 AM 39729 in reply to 39724

    Re: Creating editor with HTML and JS

    Peter,
     
    Did you modify the code?
     
    When I test it using IE 7.0, it displays the javaScript code for Gecko.

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  04-28-2008, 9:35 AM 39826 in reply to 39729

    Re: Creating editor with HTML and JS

    After some more work, and understanding what is involved in displaying the editor, I found a workaround that doesn't need to use HTML only.
     
    Unfortunately, that created a new challenge.  I need to create the editor and then move it.
     
    <DIV ID="Original_Location">
      <DIV ID="Container">
    editor
      </DIV>
    </DIV>
     
    [.....  other page content ......]
     
    <DIV ID="Desired_Location">
    </DIV>
     
     
    I've tried 2 methods.
    Method 1:
    <SCRIPT type="text/javascript">
     document.getElementById("Desired_Location").innerHTML = document.getElementById("Original_Location").innerHTML;
     document.getElementById("Original_Location").innerHTML = "";
    </SCRIPT>
     
    This method moved the editor, but it was not usable. No cursor in the editor area.  the drop-downs worked, but the area where you type was not usable.
     
    The 2nd method was:
    <SCRIPT type="text/javascript">
      document.getElementById("Desired_Location").appendChild(document.getElementById("Container"));
      document.getElementById("Original_Location").innerHTML = "";
    </SCRIPT>
     
    This method works in IE7, but not in FF.
     

    Any thoughts or any other suggestions?
     
    Thanks,
    Peter

  •  04-29-2008, 10:33 AM 39890 in reply to 39826

    Re: Creating editor with HTML and JS

  •  04-29-2008, 12:36 PM 39898 in reply to 39890

    Re: Creating editor with HTML and JS

    That example is what I've based my solution on, actually.
     
    With JS it changes the style of the DIV the editor is in.
     
    In my example I need to be able to move the editor from one DIV into another.
     
    <!--#include virtual= "/CuteEditor_Files/include_CuteEditor.asp" -->

    <html>
        <head>
            <script language="javascript">
          
          var d=document;
          
          function dge(s) {
              return d.getElementById(s);
          }
            function hide()
            {
                dge("div1").style.display="none";
            }
            function show()
            {
                dge("div1").style.display="block";
            }
            function xmove()
            {  
                var ee = dge("Container");
                if (dge("div2").innerHTML=="") {
                    dge("div2").appendChild(dge("Container"));
                }
                else
                {
                    dge("div1").appendChild(dge("Container"));
                }
            }
            </script>
        </head>
        <body>
    <DIV id="title">DIV1</DIV>
                <div id="div1" style="border:1px solid black;margin:3px;padding:2px;">
    <div id=Container>
     <!-- CuteEditor Editor1 Begin -->
    <%
      Set editor = New CuteEditor
      editor.ID = "Editor1"
      editor.Text = "Type text here!"
      editor.FilesPath = "CuteEditor_Files"
      editor.ShowBottomBar = true
      editor.ThemeType = "Office2003"
      editor.ShowHtmlMode = true
      editor.TemplateItemList="G_start,FontName,FontSize,Separator,Bold,Italic,Underline,G_end, " &_
                              "G_Start,JustifyLeft,JustifyCenter,JustifyRight,Separator,InsertOrderedList,InsertUnorderedList,"&_
                              "Separator,InsertLink,Unlink,Separator,InsertEmotion,G_end"
      editor.Height = 240
      editor.Width = "100%"
     editor.Draw()
    %>
     <!-- CuteEditor Editor1 End -->

    </div>
                </div>
                <hr>
                <a onclick="hide()" href="#">Hide</a> |
                <a onclick="show()" href="#">Show</a> |
                <a onclick="xmove()" href="#">Move</a> |
                <a href="editortest5.asp">Use a Form</a>
    <DIV id="title">DIV1</DIV>            
    <div id="div2" style="border:1px solid black;margin:3px;padding:2px;"></div>

    </body>
        
    </html>

    For any content I've tried, other than the CE, it works in both IE and FF; but with the CE in "div1", it works in IE, but not FF.
     

  •  04-30-2008, 2:31 PM 39930 in reply to 39898

    Re: Creating editor with HTML and JS

    Using FF and WebDeveloper Add-on, I can get the Generated Source ... what the HTML looks like after the JS has moved the DIV.
     
    Interestingly, when I copy and paste the generated source after the move, it works.
    That is, I click the MOVE link.  The CE moves from DIV1 to DIV2, but doesn't work (I can't type in the input area). 
    I view the generated source. 
    I copy the text into whatever.htm, save it to the webserver, and view it....and the CE works fine.
     
    Thoughts anyone?  As I mentioned above, it works in IE, but not FF.
     
View as RSS news feed in XML