Building a WYSIWYG HTML Editor Part 1/2 - Why a WYSIWYG editor (Page 2 of 7 )
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.
The signature and parameters of the execCommand method are shown below:
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:
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:
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.
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.
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