Building a WYSIWYG HTML Editor Part 1/2 - Building our HTML editor (Page 4 of 7 )
Over the next couple of pages we're going to create our own browser based WYSIWYG HTML editor. I won't look at the entire source code for the editor, but I will go into detail about the most important points. The single HTML file and required images are available as part of the support material for this article. You should download it before continuing.
Firstly, we want to make our HTML editor boths look and feels like a "normal" HTML editor, such as Front Page 2000. Using style sheets and events, we can create a set of "buttons" that mimic those found in Windows applications. Our HTML editor will contain several buttons to bold text, insert images, etc. Here's how the image that makes up the bold button looks:
It has a class attribute of "butClass", which is defined in the <head> part of our HTML document:
border: 1px solid;
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';
The selOn function sets the border color of the image to black, its background color to "FrontPage blue", and the mouse cursor to a hand.
Here's how the buttons will look at different stages:
Besides buttons, our HTML editor also contains an inline frame (<iframe>) and drop down lists to set the font type and size, as well as various heading sizes (<h1>, <h2>, etc). If you've downloaded the support material, you will see that our HTML editor looks like this in IE:
iView.document.execCommand('bold', false, null);
The code for the italic and underline buttons is fairly similar to the bold buttons code, so let's look at the code for the center align function, doCenter():
One again, a simple call to execCommand, passing in the command "justifycenter". To actually test the justifycenter command, click on the inline frame, type in some text, select it, and click the center align button, like this: