Microsoft's DEC // snook.ca

Microsoft's Dynamic HTML Editing Component (DEC)

November 1, 2001

There are actually two different ways you can accomplish HTML editing in IE5 and up. There is the MSHTML editor and then there's the DHTML Editing Component. The MSHTML editor allows for WYSIWYG editing by defining "editable regions" of a page. The DEC on the other hand is an embedded ActiveX control that works much like a <textarea> to edit HTML and also works in IE4.

What's the difference? The MSHTML editor is the core of the technology and the DEC is just an Active-X wrapper that uses the MSHTML editor. The DEC adds extra functionality (like adding tables) that isn't available by default with the MSHTML editor -- for this reason the DEC is still used quite a bit.

For more information on the MSHTML go to MSDN. To get started with the DEC you should download the sample code from Microsoft which also includes a CHM file for reference.

So, how do you use this thing? It's really quite simple... just drop in this piece of code where you want it to exist on the page:

<object ID="tbContentElement" CLASS="tbContentElement"

    CLASSID="clsid:2D360201-FFF5-11D1-8D03-00A0C959BC0A" VIEWASTEXT

    width="450" height="300">

    <param name=Scrollbars value=true>

</object>

There are actually two versions of the ActiveX control. One is safe and the other is not safe. Why are there two different versions? With one, you can access files off the hard drive or other Web sites. But in order to be able to do that, the user has to have their security settings set low enough to permit such a thing or they will be prompted that the control is not safe and asked to continue. The code above uses the safe version of the control and therefore cannot load external documents. If you wish to use the non-safe version, just replace the CLASSID to: clsid:2D360200-FFF5-11D1-8D03-00A0C959BC0A.

Now, why use the safe version? Because it works really well in a database-driven application. Content can be copied into and out of the control using script. With this additional code we copy the contents of a textarea into our control:

<form>

   <textarea name="htmlsource" id="htmlsource" rows="10">

      Here is some source code

   </textarea>

   <script language="JavaScript"

      FOR="tbContentElement" EVENT="DocumentComplete">

      tbContentElement.DOM.body.innerHTML=document.forms[0].htmlsource.value;

   </script>

</form>

You should now see the content from the textarea appear in the control! It's really easy then to go from here and pull the content from a database and input it into the control. You would just perform your database query and place the content into the textarea.

Example: <textarea ...><%=htmlcontent%></textarea>

Let's say that the user has entered some content into the editing control and now wants to save the information to the database. We need to copy the content from the control back into our textarea to be submitted to our database. This is done in just the exact opposite way of putting the content into the control:

<script language="JavaScript">

  function form_onSubmit() {

    document.forms[0].htmlsource.value=tbContentElement.DOM.body.innerHTML;

  }

</script>

I've placed the code into a function that will get called when you go to submit the form to the database. To put it all together we get this:

<html>

  <head><title>DEC</title>

  <script language="JavaScript">

  function form_onSubmit() {

    document.forms[0].htmlsource.value =

          document.all.tbContentElement.DOM.body.innerHTML;

  }

  </script>

  </head>

  <body>



  <form action="dbprocess.asp" method="post" name="myform">

  <object ID="tbContentElement" CLASS="tbContentElement"

          CLASSID="clsid:2D360201-FFF5-11D1-8D03-00A0C959BC0A" VIEWASTEXT

          width="450" height="300">

    <param name=Scrollbars value=true>

  </object>



  <textarea name="htmlsource" id="htmlsource" rows="10">

      Here is some source code

  </textarea>



  <script language="JavaScript"

     FOR="tbContentElement" EVENT="DocumentComplete">

     document.all.tbContentElement.DOM.body.innerHTML=

          document.forms[0].htmlsource.value;

  </script>

  </form>

  </body>

</html>

You may notice in our final code a couple minor differences:

1. The <object> code is now contained with the form tags and,
2. the reference to the editor has document.all attached to the front of it.

The <object> code is contained within the form tags to make things easier to follow as we develop more code surrounding the editor. The editor is now referenced by document.all so that we can find the editor within the DOM. If you don't put document.all and the control is contained within form tags then you will get a JavaScript error.

So, we've discovered how to use the control and how to move content between the textarea and the control.

Jonathan Snook.ca

Microsoft's Dynamic HTML Editing Component (DEC)