Microsoft's Dynamic HTML Editing Component (DEC)

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.

Published November 01, 2001 · Updated September 17, 2005
Categorized as MSHTML and DEC
Short URL: https://snook.ca/s/108

Conversation

16 Comments · RSS feed
k-v-s said on April 01, 2004

how i can change background color of editor area ?

please send me any ideas to k-v-s@ukr.net

Jonathan Snook said on April 14, 2004

You absolutely can. Anything you can do to an HTML page using the DOM, you can do with the DEC. One of the ways I do it is to attach an external stylesheet to the editor. Doing it this way allows you to set a number of properties to more closely match the final look and feel of the site.

On MSDN check out the methods, createstylesheet and addimport.

Toby said on August 20, 2004

The links to MS's site poing to archived areas that don't seem to contain the source code.

Am I missing something?

Thanks for the article though. Very informative.

Jonathan Snook said on August 20, 2004

I've updated the link to the DEC sample code. Thanks.

Markus Fink said on October 25, 2004

Is there a way to disable the resize handles for images.

Jonathan Snook said on October 25, 2004

To prevent resize of images, you'll need to attach an event handler for the onselectstart event for all images currently in the editor (ie: run a function right after loading the content into the editor to attach the event) as well as attach it to any new image that is inserted into the editor.

Virendra Sharma said on November 04, 2004

Sir,

I am new in the Programing and I have been given an assignment to use DHTML editing for some admin pages in ASP. The samples provided in microsoft.com is very hard to under stand.

Could you help me out to built my first page using DHTML Editing in ASP. I have to insert the innerHTML data in a table.

Regards.

Virendra Sharma

Dale Burrell said on January 20, 2005

Hi,

I've been using this control for a while, and just realised that I can't seem to print it.

When I click print I just get a blank page - so I guess the object isn't rendering itself...

I read that this was due to using the safe object, but using the unsafe object didn't make any difference.

Any suggestions?

Cheers,

Dale

Raymond Eric said on March 09, 2005

I was wondering if you know how to append text to the object, ID="tbContentElement" dynamicaly after the page loads.

Basically, i'd like to append the data to the object, ID="tbContentElement" after the URL is loaded.

I have tried the following without success...

var txt = document.createTextNode(" This text was added to the DIV.");

document.getElementById('tbContentElement').appendChild(txt);

Jonathan Snook said on March 09, 2005

Raymond: tbContentElement is a reference to the DEC. In order to append to the content, you need to access the document contained within.

This should work:
var txt = document.createTextNode(" This text was added to the DIV.");
document.all.tbContentElement.DOM.body.appendChild(txt);

Vagelis said on March 18, 2005

Hi,
I need to use Dhtml editor twice in a page (summary and body), but i get an error when i try to setup styles:

document.sum_editor.DOM.body.style.fontFamily = "Arial";
document.body_editor.DOM.body.style.fontFamily = "Arial";

Style does not efect in the first loadded object (summary)

Any sugestions PLEASE !!!????

Ted said on June 14, 2005

To Whom It May Concern:

I have been unable to respond or forward any email as of late.
I have been getting the following message when I try:
---------------------------
Microsoft Internet Explorer
---------------------------
Error: There must be one element on the page with an ID of tbContentElement
---------------------------
OK

I inquired with my local ISP amd they directed me to this web site. I would like to ask you for any advice on what I can do to fix this issue. Thanks.

said on August 01, 2005

please

Christine said on January 27, 2006

Hi,

I am trying to let the users to edit html files on our web site and I have to use the safe version because our browser blocks the unsafe version. Woud I be able to use LoadURL in the safe version?

mark said on May 22, 2006

for the block format command,

execcommand(5043,0,"Heading 1"), how do i know which values to use if the pc is running in another language by use of the windows MUI ?

Jonathan Snook said on May 22, 2006

mark: Check the DEC documentation for the command DECMD_GETBLOCKFMTNAMES. It'll describe how to do this.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.