Tutorials » Building a WYSIWYG HTML Editor Using Only JavaScript and HTML
Building our HTML editor (contd.)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:
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.
When "createlink" is passed to the execCommand
method IE displays a modal window that looks like this:
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()
{
iView.document.execCommand('createlink');
}
Here are two different version of the link: the first one
links a piece of text, and the second one is just the URL:
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:
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.
