Building a WYSIWYG HTML Editor Part 1/2 - Building our HTML editor (contd.)
(Page 6 of 7 )
Now that we've covered all of the controls, let’s look at how we can change the font and size of the text in our document. The three dropdown lists at the bottom of our HTML editor can be used to change the font, change the fonts size, and format text using a header style.
When the selected option of the font dropdown list is changed, the JavaScript function doFont() is called. It looks like this:
function doFont(fName)
{
if(fName != '')
iView.document.execCommand('fontname', false, fName);
}If we have selected some text in our document, then only that text's font will change. If we haven't selected any text, then any text that we type in after selecting the new font will appear as the selected font.
The fName argument of the doFont() function is the value of the currently selected font, and is retrieved in the dropdown lists onClick handler:
<select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)">The font size dropdown list works in the same way, so we will skip that. The heading dropdown list allows us to format our code using header tags, such as <h1>, <h2>, etc. When its option is changed, the doHead() JavaScript function is called:
<select name="selHeading" onChange="doHead(this.options[this.selectedIndex].value)">The doHead() JavaScript function looks like this:
function doHead(hType)
{
if(hType != '')
{
iView.document.execCommand('formatblock', false, hType);
doFont(selFont.options[selFont.selectedIndex].value);
}
}As you can see, we pass the "formatblock" command to execCommand, and set the value argument to the heading type, which is the value of the currently selected option for the heading dropdown list. After the call to execCommand, the type of font for the selected text reverts back to the default, so we have to set it again. That's why we call doFont.
All modern HTML editors have the option to switch between WYSIWYG view and HTML code view. Our HTML editor is no different. The blue button in the lower right hand corner can be used to toggle between modes. It calls the doToggleView() JavaScript function, whose code looks like this:
<script language="JavaScript">
var viewMode = 1; // WYSIWYG
// Other code exists here
function doToggleView()
{
if(viewMode == 1)
{
iHTML = iView.document.body.innerHTML;
iView.document.body.innerText = iHTML;
// Hide all controls
tblCtrls.style.display = 'none';
selFont.style.display = 'none';
selSize.style.display = 'none';
selHeading.style.display = 'none';
iView.focus();
viewMode = 2; // Code
}
else
{
iText = iView.document.body.innerText;
iView.document.body.innerHTML = iText;
// Show all controls
tblCtrls.style.display = 'inline';
selFont.style.display = 'inline';
selSize.style.display = 'inline';
selHeading.style.display = 'inline';
iView.focus();
viewMode = 1; // WYSIWYG
}
}The "viewMode" JavaScript variable is defined globally, and is set to 1 (WYSIWYG) by default. When the toggle display button is clicked, its value is checked and changed accordingly.
To show the source code of our document, we grab the inline frame's HTML from using the iView.document.body.innerHTML variable. We then set the innerText property of the inline frame to this value, which in turns causes its HTML code to be displayed. We also hide our HTML editors buttons and dropdown lists using display = 'inline'.
Our HTML editor before toggling:
Our HTML editor after toggling:
As you can see, all controls disappear until the toggle display button is clicked again. This is a handy feature if you want to add some JavaScript or maybe an <object> tag to your documents HTML code.
Next: Conclusion >>
More HTML Articles
More By Mitchell Harper
