Inside Technique : WYSIWYG HTML Editor : Coordinating with Forms

The contents of the editor cannot be automatically submitted. Instead, the contents of the editor need to be copied to a HTML textarea element that is then submitted by the form. This textarea control would be hidden by setting the CSS display property to none. Continuing our example, below is the necessary HTML:

<FORM ONSUBMIT="copyValue(this);" >
<IFRAME WIDTH=200 HEIGHT=50 ID=myEditor></IFRAME>
<TEXTAREA STYLE="display: none" NAME=EditorValue></TEXTAREA>
<SCRIPT>
  function copyValue(f) {
    f.elements.EditorValue.value = "" + myEditor.document.body.innerHTML + "";
  }

  function makeBold() {
    var tr = frames.myEditor.document.selection.createRange()
    tr.execCommand("Bold")
    tr.select()
    frames.myEditor.focus()
  }
 
  frames.myEditor.document.designMode = "On"
</SCRIPT>
<INPUT TYPE="button" ONCLICK="makeBold()" VALUE="Bold">
<INPUT TYPE="submit" VALUE="Submit">
</FORM>

In the demonstration below, we display the text box so you can see the raw HTML being copied to the text area element. We also disable the actual submission of the value to the server.

Moving on to the last part of the article, we show you how we build the HTML editor component demonstrated on the opening page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.