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

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
  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

Building a WYSIWYG HTML Editor Part 1/2 - Building our HTML editor (contd.)
(Page 5 of 7 )

What good is a web site that has just boring old black text and a white background? Luckily execCommand has two commands that we can use to change the color of text and the background. These commands are forecolor and backcolor.

When the foreground color button is clicked (the one with the "A" on it), the JavaScript function doForeCol() is called. To change the foreground color, we must first get the color to change it to. We simply display a prompt box using JavaScript's prompt() command to get the required color code:

Getting the color with prompt

This color code can either be a proper HTML color code (such as #3DA1CC), or an alias (such as red). In another article I'm going to show you how to use JavaScript's showModalDialog function to show a window from which the user can actually click on a color and select it, but for now the prompt() function will do. The code for the doForeCol() function looks like this:

function doForeCol()


var fCol = prompt('Enter foreground color', '');

if(fCol != null)

iView.document.execCommand('forecolor', false, fCol);


As you can see in the code above, the foreground color is grabbed from a call to prompt() and passed in as the third argument to execCommand.

One of the things that amazed me when I started playing around with the execCommand method was that when you pass the "createlink" command to it, IE displays a modal window that looks like this:

Adding a hyperlink

If you have some text selected, then when you click OK that text becomes a hyperlink. If not, the URL of the hyperlink is inserted into the document. When the hyperlink button is clicked in our HTML editor, the doLink() JavaScript function is called. It looks like this:

function doLink()




Here are two different version of the link: the first one links a piece of text, and the second one is just the URL:

Adding URLs

But what about images? After all, images are what make a site, right? It's actually quite easy to add an image to our document. When the image button is clicked, the doImage() JavaScript function is called, which looks like this:

function doImage()


var imgSrc = prompt('Enter image location', '');

if(imgSrc != null)

iView.document.execCommand('insertimage', false, imgSrc);


Nothing new here, we simply use prompt() to get the URL of the image and pass it as the value to execCommand. The URL can be local or remote. Here's a screen shot:

Adding an image to our document

See the little squares around the image? Well these can be used to dynamically resize the image. To add a horizontal rule to our document, we use the horizontal rule button. When clicked, it calls the doRule() JavaScript function whose code looks like this:

function doRule()


iView.document.execCommand('inserthorizontalrule', false, null);


One good thing about our HTML editor is that once you insert a horizontal rule (or any other control), you can change its properties very easily. For example, if I wanted to change its color, I would click on it and then click on the foreground color button, enter "green", and the color of the horizontal rule would change to green.
blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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