Home arrow HTML arrow Page 2 - Building a WYSIWYG HTML Editor Part 1/2
HTML

Building a WYSIWYG HTML Editor Part 1/2


Whether you're creating your own personal web site, a site for a medium sized business, or a site for a company intranet, the content management system (CMS) is one of the most important aspects of the overall design. In this article Mitchell shows us how to build an awesome browser based HTML editor using only HTML and JavaScript. This article is a must read!

Author Info:
By: Mitchell Harper
Rating: 5 stars5 stars5 stars5 stars5 stars / 398
February 27, 2002
TABLE OF CONTENTS:
  1. · Building a WYSIWYG HTML Editor Part 1/2
  2. · Why a WYSIWYG editor
  3. · execCommand examples
  4. · Building our HTML editor
  5. · Building our HTML editor (contd.)
  6. · Building our HTML editor (contd.)
  7. · Conclusion

print this article
SEARCH DEVARTICLES

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.

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>

<body onLoad="Init()">

<iframe id="iView" style="width: 200px; height:70px"></iframe>

<br><br>

<input type="button" onClick="boldIt()" value="Toggle Bold">

</body>

</html>


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:

Bolding some text with execCommand

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.

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
blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials