Tutorials » Building a WYSIWYG HTML Editor Using Only JavaScript and HTML

Why a WYSIWYG editor

Why not? I'm mocking up a site design for one of my clients at the moment, and I prefer to do it quickly using FrontPage 2000. When I'm actually developing the final release of the site however, I use Visual Interdev, but to create a quick site prototype, you can’t beat a WYSIWYG interface.

So how does Internet Explorer fit into the picture? Well, since IE5, there's been a JavaScript method called execCommand. ExecCommand is used to execute a command on a document. In the sense of execCommand, a command is a pre-defined set of functions that can manipulate the page layout, insert an image, url, list, text box, horizontal rule, etc right into a HTML document in the browser. In fact, pretty much anything you can do with FrontPage, you can do in IE using the execCommand JavaScript method.

The signature and parameters of the execCommand method are shown below:

bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue])

bSuccess: The return value from a call to execCommand. Returns true if the command executed OK, false if it failed.
sCommand: One of the pre-defined commands that can be used to manipulate a document, such as "bold" to make the selected text bold.
bUserInterface: A Boolean value that indicates whether or not the command displays a user interface (don't worry about this parameter for now).
vValue: A variant value that can be used in combination with sCommand to pass in a required value. For example, if I passed "FontName" as sCommand, false as bUserInterface, and "Verdana" as vValue, then the selected text's font would be changed to Verdana.

At this point I'm pretty sure that 99% of you will be sitting there with a puzzled look on your face...right? Well let’s supplement all of the nitty gritty details with a simple example. Add the code below to a new page called testbold.html. Save the file in c:\ and run it in IE5 or above:

<html>
<head>
<title> Using execCommand to bold text </title>
<script language="JavaScript">

function Init()
{
iView.document.designMode = 'On';
}

function boldIt()
{
iView.document.execCommand('bold', false, null);
}

</script>

When you click on the area inside the inline frame, you will be able to edit it. Type in some text, highlight it, and click on the toggle bold button:

As you can see in the screen shot above, as soon as you select some text and click the toggle bold button, IE automatically renders the selected text as bold. Let's look at the important parts of our code before moving on:

function Init()
{
iView.document.designMode = 'On';
}

The Init() command is called from the onLoad event handler of the <body> tag. Our inline frame has an id of iView, so we can use the DOM to get at its properties. To make it so that we can actually click in and edit the contents of the inline frame, its designMode attribute must be set to "On". If you comment out this line and refresh the page, you'll notice that you can't click into the inline frame and enter text.

function boldIt()
{
iView.document.execCommand('bold', false, null);
}

When we click on the toggle bold button, the boldIt() function is called. Inside of this function we have just one line. We call the execCommand method of our inline frame, passing in "bold" as the command. The user interface value is set to false, and no value is required, so we pass in null.

[Note] The execCommand method cannot be called until after the page loads. As you can see, I've used an inline frame as part of our example. Although we could use execCommand on <div> tags and other HTML controls directly, I think using an inline frame better suits our purposes of creating a HTML editor [End Note]


	1 2 3 4 5 6 7

Print this Page

E-mail this Page

DevGuru

Tutorials » Building a WYSIWYG HTML Editor Using Only JavaScript and HTML