Software

Use MSHTML editing object to make a browser-based HTML editor

Consultants who need to incorporate an HTML editor with spell-checker functionality into their Web site can make it work with the MSHTML Editor Object. We'll show you how.


Editor’s note: This article originally appeared in TechRepublic’s Web Development Zone TechMail. Subscribe, and you’ll receive information on Web-development-related projects and trends.

My initial impression when I heard that a client of mine wanted to incorporate an HTML editor with spell-checker functionality into the company's Web site was that it would be an impossible task. The client wanted the information that users entered to automatically be translated into an HTML format so that the data could be more easily displayed in reports on the client's Web site. After trying several techniques for generating the necessary HTML tags, I discovered a solution.

The following code works on a client computer with Internet Explorer 5.5 and Word 97. Microsoft includes an MSHTML Editor Object with its Explorer 5.5 release that gives you the ability to make Web page elements editable by setting the CONTENTEDITABLE attribute to true. For example:
<div CONTENTEDITABLE="true">This is editable.</div>

The MSHTML Editing object gives the user standard editing functionality, such as caret positioning, keyboard navigation, drag-and-drop, and content selection, and provides copy, cut, delete, and paste operations and multilevel undo and redo. It also allows the user to:
  • Toggle selected text between bold, italic, and/or underlined.
  • Alter typeface, font size, forecolor (text), and backcolor (background).
  • Remove formatting.
  • Increase or decrease indentation.
  • Justify text (left, center, right).
  • Create ordered and unordered lists.
  • Create a hyperlink or bookmark.
  • Insert a horizontal line.
  • Insert an image.
  • Insert a variety of intrinsic controls (including buttons, text boxes, radio buttons, check boxes, submit controls, and drop-down and list boxes).

Here is sample code for an inline HTML editor with built-in spell checker using the Word Object:
<html>
<head>
<title>HTML Editor</title>
<SCRIPT LANGUAGE=javascript>
// Makes button look sunken when button is clicked
function BtnDown()
{window.event.srcElement.style.borderStyle ="inset";}
// Makes button look raised when button is released
function BtnUp()
{window.event.srcElement.style.borderStyle ="outset";}
// Executes commands depending on which
// button has been pushed
function Toggle()
{       // get button label
        text = window.event.srcElement.innerText;
        if (text == "Bold")
                document.execCommand("Bold");
        else if (text == "Italic")
                document.execCommand("Italic");
        else if (text == "FontColor")
        {       theColor =
document.all.fontcolor.value;
                if (theColor != "")
                       
document.execCommand("ForeColor", false, theColor);
        }
        else if (text == "FontSize")
        {       theSize = document.all.fontsize.value;
                if (theSize != "")
                       
document.execCommand("FontSize", false, theSize);
        }
        else if (text == "FontName")
        {       theName = document.all.fontname.value;
                if (theName != "")
                       
document.execCommand("FontName", false, theName);
        }
               else if (text == "Check Spelling")
        {       SpellChecker(window.edit.innerHTML);
        }
                else if (text == "View Source")
        {       alert(window.edit.innerHTML);
        }
                else if (text == "Save the Text")
        {      
somename.TextForForm.value=window.edit.innerHTML;
                somename.submit();
        }
        window.event.srcElement.style.borderStyle =
"outset";
}
function SaveText(){
somename.TextForForm.value=window.edit.innerHTML;
somename.submit();
}
</script>
<style>
#edit {
        position:absolute;
        top: 15;
        left: 150;
        width: 350;
        height: 350;
        border:solid;
        border-style:ridge;
        border-width:5;
        background-color:white;
        }
.btn {
        border:solid;
        width:110;
        align:center;
        text-align:center;
        border-style:outset;
        border-width:thin;
        font-weight:bold;
        padding:2;
        color:white;
        background-color:#ABA6FF;
       cursor:default;
        }
.settings{
        border:solid;
        width:110;
        align:center;
        text-align:center;
        border-style:outset;
        border-width:thin;
        font-weight:bold;
        padding:2;
        cursor:default;
        }
</style>
<SCRIPT LANGUAGE=vbscript>
<!—
    Function SpellChecker(TextValue)
        Dim objWordobject
        Dim objDocobject
        Dim strReturnValue
        Set objWordobject = & _
CreateObject("word.Application")
        objWordobject.WindowState = 2
        objWordobject.Visible = True
 'For Word 97 use the line below.
        Set objDocobject = objWordobject.Documents.Add
' For word 2000 add "'( , , 1, True)" to the line
above.         
        objDocobject.Content=TextValue
        objDocobject.CheckSpelling
        strReturnValue = objDocobject.Content
        window.edit.innerHTML=strReturnValue
        objDocobject.Close false
        Set objDocobject = Nothing
        objWordobject.Application.Quit True
        Set objWordobject= Nothing
    End Function
    —>
    </SCRIPT>
</head>
<body bgcolor="#FFFFFF" unselectable="on">
<form method="post" action="ViewResults.asp"
name="somename"  >
<INPUT type="hidden" id="TextForForm"
name="TextForForm" >
</form>
<div unselectable="on">
<span unselectable="on" class="btn"
onmousedown="BtnDown();" onmouseup="Toggle();"
onmouseout="BtnUp();">Bold</span>
<br>
<span unselectable="on" class="btn"
onmousedown="BtnDown();" onmouseup="Toggle();"
onmouseout="BtnUp();">Italic</span>
<br>
<span unselectable="on" class="btn"
onmousedown="BtnDown();" onmouseup="Toggle();"
onmouseout="BtnUp();">FontColor</span><br>
<select class="settings" id="fontcolor" >
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="yellow">yellow</option>
</select>
<br>
<span unselectable="on" class="btn"
onmousedown="BtnDown();" onmouseup="Toggle();"
onmouseout="BtnUp();">FontSize</span><br>
<select class="settings" id="fontsize" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<br>
<span unselectable="on" class="btn"
onmousedown="BtnDown();" onmouseup="Toggle();"
onmouseout="BtnUp();">FontName</span><br>
<select class="settings" id="fontname" >
<option value="tahoma">tahoma</option>
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Terminal">Terminal</option>
<option value="Trebuchet MS">Trebuchet MS</option>
</select>
<br><br>
<span unselectable="on" class="btn"
onmousedown="BtnDown();" onmouseup="Toggle();"
onmouseout="BtnUp();">Check Spelling</span>
<br>
<span unselectable="on" class="btn"
onmousedown="BtnDown();" onmouseup="Toggle();"
onmouseout="BtnUp();">View Source</span>
<br>
<span unselectable="on" class="btn"
onmousedown="BtnDown();" onmouseup="Toggle();"
onmouseout="BtnUp();">Save the Text</span>
<br>
</div>
<BR>
<div id="edit" contentEditable="true">
This text is editable. <p>
This line has some spelling errors.
</div>
</body>
</html>


That's it for the editor code. Below is the code for a receiving form processor:
<% DisplayText=Request.Form("TextForForm")%>
<HTML>
<HEAD>
<style>
#HTML_view {
        width: 400;
        height: 140;
        border:solid;
        border-style:ridge;
        border-width:5;
        background-color:white;
        }
</style>       
<TITLE>Editor Results</TITLE>
</HEAD>
<BODY>
<h1>Your HTML Editor Results</h1>
<P>In HTML View:<br>
<div id="HTML_view">
<%=DisplayText%>
</div><P>
In HTML Source Code View:<br>
<textarea cols="45" rows="8" >
<%=DisplayText%>
</textarea>
</BODY>
</HTML>


For more information
If you'd like to learn more about using the MSHTML editing component, visit the MSDN library for instructions on using the MSHTML editor.

Microsoft Word also provides the programming capacity to allow you to achieve process automation by taking programmatic control of document handling. You can find more information on writing programs using Microsoft Word 97 by visiting the MSDN Library.

Also, for more information on using Word 2000 in an application, see Microsoft's Working with Document objects.

What do clients want?
What type of work have your consulting clients been asking for during the past year? What was your most challenging contract? Were you able to deliver? Tell us in an e-mail or in a discussion below.

 

Editor's Picks

Free Newsletters, In your Inbox