 Inside Technique : WYSIWYG HTML Editor : Reusable Editing Component
We built the editor on the first page as a scriptable component. This component
is rendered in its own IFRAME and contains the framework for a building a basic editor. Within the
framework you will find a generic method for executing commands, a method for swapping between WYSIWYG
and raw HTML mode, plus an embedded IFRAME that is used as the editor. Not included in the component
is any user interface. Instead, the user interface uses the methods exposed by the editor and is defined by the page
containing the editor. Below is the complete script for the component (yes, all in about 1.5K of code!)
for the HTML component. Y
// Copyright 1997-1999 InsideDHTML.com, LLC. All rights reserved.
// This code cannot be reused on commercial sites without
// explicit permission from InsideDHTML.com, LLC.
<!-- Remove margins and set the width and height of the IFRAME to be the
entire size of the outer window (eg., the size of the outer IFRAME
containing the editor -->
<STYLE>
BODY {margin: 0pt; padding: 0pt; border: none}
IFRAME {width: 100%; height: 100%; border: none}
</STYLE>
<SCRIPT>
// Default format is WYSIWYG HTML
var format="HTML"
// Set the focus to the editor
function setFocus() {
textEdit.focus()
}
// Execute a command against the editor
// At minimum one argument is required. Some commands
// require a second optional argument:
// eg., ("formatblock","<H1>") to make an H1
function execCommand(command) {
if (format=="HTML") {
var edit = textEdit.document.selection.createRange()
if (arguments[1]==null)
edit.execCommand(command)
else
edit.execCommand(command,false, arguments[1])
edit.select()
textEdit.focus()
}
}
// Initialize the editor with an empty document
function initEditor() {
textEdit.document.designMode="On"
textEdit.document.open()
textEdit.document.write("")
textEdit.document.close()
textEdit.focus()
}
// Swap between WYSIWYG mode and raw HTML mode
function swapModes() {
if (format=="HTML") {
textEdit.document.body.innerText = textEdit.document.body.innerHTML
textEdit.document.body.style.fontFamily = "monospace"
textEdit.document.body.style.fontSize = "10pt"
format="Text"
}
else {
textEdit.document.body.innerHTML = textEdit.document.body.innerText
textEdit.document.body.style.fontFamily = ""
textEdit.document.body.style.fontSize =""
format="HTML"
}
textEdit.focus()
var s = textEdit.document.body.createTextRange()
s.collapse(false)
s.select()
}
window.onload = initEditor
</SCRIPT>
<!-- Turn off the outer body scrollbars. The IFRAME editbox will display its
own scrollbars when necessary -->
<BODY SCROLL=No>
<IFRAME ID=textEdit></IFRAME>
That is the complete framework necessary for the editor. Next, you can define your own user interface.
On the first page, our user interface is designed to pop-up whenever the user is using the editor. Below
is the code we used for our user interface. By changing this, you can easily create your own custom user-interface.
<!-- Define stylesheet for the edit bar -->
<STYLE>
#editBar {position: absolute; display: none; width:399px; border: 1px black solid; background: lightgrey ; text-align: center}
#editBar INPUT {font-size:10pt; width: 2em; font-weight: bold}
</STYLE>
<SCRIPT>
// Copyright 1997-1999 InsideDHTML.com, LLC. All rights reserved.
// This code cannot be reused on commercial sites
// without explicit permission from InsideDHTML.com, LLC.
// Hide or show the editbar
function displayToolbar(ed, how) {
var eb = document.all.editbar
if (how)
eb.style.display = "block"
else
eb.style.display = "none"
if (ed!=null) {
eb.style.pixelTop = ed.offsetTop + ed.offsetHeight + 1
eb.style.pixelLeft = ed.offsetLeft
eb._editor = window.frames[ed.id]
eb._editor.setFocus()
}
}
// Call the formatting command in the editor
function doFormat(what) {
var eb = document.all.editbar
eb._editor.execCommand(what, arguments[1])
}
// Call the swapmodes command in the editor
function swapMode(b) {
var eb = document.all.editbar._editor
eb.swapModes()
b.value = eb.format + " Mode"
}
</SCRIPT>
<!-- The following is necessary to remove the edit bar when the
editor loses focus -->
<BODY ONFOCUS="displayToolbar(null,false)">
<IFRAME ID=edit1 SRC="richText.htm"
ONFOCUS="displayToolbar(this,true)" WIDTH=400 HEIGHT=200></IFRAME>
<!-- Make sure any clicks return the focus to the editor -->
<DIV ID=editbar ONCLICK="this._editor.setFocus()">
<INPUT TYPE="button" VALUE="B" STYLE="font-weight: 900"
ONCLICK="doFormat('Bold')">
<INPUT TYPE="button" VALUE="I" STYLE="font-style: italic;font-weight:bold"
ONCLICK="doFormat('Italic')">
<INPUT TYPE="button" VALUE="U" STYLE="text-decoration: underline;font-weight: bold"
ONCLICK="doFormat('Underline')">
<INPUT TYPE="button" VALUE="P"
ONCLICK="doFormat('formatBlock','<P>')">
<INPUT TYPE="button" STYLE="width: 3em" VALUE="PRE"
ONCLICK="doFormat('formatBlock','<PRE>')">
<SCRIPT>
// Output H1 through H6 buttons
for (var i=1; i<=6; i++)
document.write("<INPUT TYPE=\"button\" VALUE=\"H"+i+"1\"
ONCLICK=\"doFormat('formatBlock','')\">")
</SCRIPT>
<BR>
<INPUT TYPE="button" VALUE="|--"
ONCLICK="doFormat('JustifyLeft')">
<INPUT TYPE="button" VALUE="-|-"
ONCLICK="doFormat('JustifyCenter')">
<INPUT TYPE="button" VALUE="--|"
ONCLICK="doFormat('JustifyRight')">
<INPUT TYPE="button" STYLE="width: 9em" VALUE="HTML Mode"
ONCLICK="swapMode(this)">
</DIV>
You have seen how to create a simple HTML editor. In a follow-up article we will show
you how to bind and respond to editor events and point out some differences between scripting in edit
mode and scripting in browse mode.
We also integrated an HTML editor into our Discussion Forum's. Internet Explorer 4.0 users get the rich editor, while
downlevel browsers get a traditional text box. When reading messages, all browsers receive the formatted message.
Discuss and Rate this Article© 1997-2000 InsideDHTML.com, LLC. All rights reserved. | 