Home arrow HTML arrow Page 6 - 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 - 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:

Before toggling

Our HTML editor after toggling:

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