//Filename: RichTextEditor.js
//Rich Text Editor v1.0
//November 20, 2002
//
//A rich text editor for '
+ ''
;
//create the rich text editor
contents = document.all[objTextArea].value; // get original contents
document.all[objTextArea].outerHTML = RichTextEditor; // create editor frame
document.all['_'+ objTextArea +'_editor'].value = contents; // set contents
setUpRTEditor('_' + objTextArea + '_HtmlMode', 'init'); // switch to wysiwyg mode
if( DEBUG ){
alert("Exiting the generateEditor function");
}//end if
}//function generateEditor
//=======================================
// insertHTML(objTextArea, string1, string2, selection)
//=======================================
//Inputs: objTextArea ID of the textarea
// string1 HTML or text to insert
// string2 HTML or text to insert (optional)
// selection (1 or 0) give error if no text selected
//
//Description: insert a string at the current cursor position
// if two strings were specified insert the string between the two
//
//Usage: insertHTML(objTextArea, string1, string2, selection);
//=======================================
function insertHTML(objTextArea, string1, string2, selection){
var objEditor;
var tagName;
var createRange;
var editorDocument;
var Handler;
var htmlText;
if( DEBUG ){
alert("Entering the insertHTML function\nParameters:\nobjTextArea = " + objTextArea + "\nstring1 = " + string1 + "\nstring2 = " + string2);
}//end if
objEditor = document.all["_" +objTextArea + "_editor"]; // editor object
if( string1 == null ){
string1 = '';
}//end if
if( string2 == null ){
string2 = '';
}//end if
//for browsers that are not capable of handling rich text, just add to end of textbox
if( document.all[objTextArea] && objEditor == null ){
document.all[objTextArea].focus();
document.all[objTextArea].value = document.all[objTextArea].value + string1 + string2;
return;
}//end if
// error checking
if( objEditor == null ){
return alert("Unable to insert HTML. Invalid object name '" + objTextArea + "'.");
}//end if
setFocus(objEditor);
tagName = objEditor.tagName.toLowerCase();
// insertHTML for rich text iframe
if( tagName == 'iframe' ){
editorDocument = objEditor.contentWindow.document;
createRange = editorDocument.selection.createRange();
htmlText = createRange.htmlText;
// check for control ranges
if( createRange.length ){
return alert("Unable to insert HTML. Try highlighting content instead of selecting it.");
}//end if
// insert HTML
Handler = window.onerror;
window.onerror = function() { alert("Unable to insert HTML for current selection."); return true; } // partial table selections cause errors
if( htmlText.length ){
// if content selected
if( string2 ){
createRange.pasteHTML(string1 + htmlText + string2) //surround the HTML text with string1 and string2
}//end inner if
else{
createRange.pasteHTML(string1); //overwrite the text
}//end inner else
}//end outer if
else{
if( selection ){
// if insertion point only
return alert("Unable to insert HTML. You must select something first.");
}//end if
createRange.pasteHTML(string1 + string2); // insert strings
}//end outer else
window.onerror = Handler;
}//end outermost if
else if( tagName == 'textarea' ){
// insertHTML for plaintext textarea
objEditor.focus();
createRange = document.selection.createRange();
htmlText = createRange.text;
// insert HTML
if( htmlText.length ){
// if content selected
if( string2 ){
createRange.text = string1 + htmlText + string2; //surround the HTML text with string1 and string2
}//end if
else{
createRange.text = string1; //overwrite the text
}//end else
}//end if
else{
//if insertion point only
if( selection ){
return alert("Unable to insert HTML. You must select something first.");
}//end inner if
createRange.text = string1 + string2; // insert strings
}//end inner else
}//end else if
else{
alert("Unable to insert HTML. Unknown object tag type '" +tagName+ "'.");
}//end else
// move to end of new content
createRange.collapse(false); // move to end of range
createRange.select(); // re-select
if( DEBUG ){
alert("Exiting the insertHTML function");
}//end if
}//function insertHTML
//=======================================
// setFocus(objTextArea)
//=======================================
//Inputs: objTextArea ID of the text area
//
//Description: set the focus to the text area
//
//Usage: setFocus(objTextArea);
//=======================================
function setFocus(objTextArea){
var editorDocument;
var editorRange;
var createRange;
var innerFunction;
if( DEBUG ){
alert("Entering the setFocus function\nParameters:\nobjTextArea = " + objTextArea);
}//end if
// check editor mode
if( objTextArea.tagName.toLowerCase() == 'textarea' ){ // textarea
innerFunction = function() { objTextArea.focus(); };
setTimeout(innerFunction, 100); // doesn't work all the time without delay
}//end if
else{ // wysiwyg
editorDocument = objTextArea.contentWindow.document; // get iframe editor document object
editorRange = editorDocument.body.createTextRange(); // editor range
createRange = editorDocument.selection.createRange(); // selection range
// make sure it's not a controlRange
if( createRange.length == null && !editorRange.inRange(createRange) ){
//is the selection in editor range?
editorRange.collapse(); // move to start of range
editorRange.select(); // select
createRange = editorRange;
}//end if
}//end else
if( DEBUG ){
alert("Exiting the setFocus function");
}//end if
}//function setFocus
//=======================================
// setPlaceholders(editorDocument)
//=======================================
//Inputs: editorDocument reference to the editor document
//
//Description: set the focus to the text area
//
//Usage: setPlaceholders(editorDocument);
//=======================================
function setPlaceholders(editorDocument){
var i;
if( DEBUG ){
alert("Entering the setPlaceholders function\nParameters:\neditorDocument = " + editorDocument);
}//end if
// for links
for (i=0; i < editorDocument.links.length; i++) {
editorDocument.links[i].href = editorDocument.links[i].href.replace(/^[^*]*(\*\*\*)/, "$1");
}//end for loop
// for images
for (i = 0; i < editorDocument.images.length; i++) {
editorDocument.images[i].src = editorDocument.images[i].src.replace(/^[^*]*(\*\*\*)/, "$1");
}//end for loop
if( DEBUG ){
alert("Exiting the setPlaceholders function");
}//end if
}//function setPlaceholders
//=======================================
// setUpRTEditor(objTextArea)
//=======================================
//Inputs: objTextArea ID of the text area
// mode is this initialization on page load? Or has the user just made a change?
//
//Description: set up the rich text editor
//
//Usage: setUpRTEditor(buttonID, mode);
//=======================================
function setUpRTEditor(buttonID, mode){
var buttons = Array();
var objTextArea;
var controlID;
var objEditor;
var editorDocument;
var RichTextEditor;
var IDList;
var contents;
var objButton;
if( DEBUG ){
alert("Entering the setUpRTEditor function\nParameters:\nbuttonID = " + buttonID + "\nmode = " + mode);
}//end if
buttons = buttonID.split("_");
objTextArea = buttonID.replace(/^_(.*)_[^_]*$/, '$1');
controlID = buttons[ buttons.length-1 ];
objEditor = document.all["_" +objTextArea + "_editor"];
if( DEBUG ){
alert("Recent Assignments:\nbuttons = " + buttons + "\nobjTextArea = " + objTextArea + "\ncontrolID = " + controlID + "\nobjEditor = \n" + objEditor);
}//end if
// define editor
RichTextEditor = '';
contents = objEditor.value;
// create editor
objEditor.outerHTML = RichTextEditor;
objEditor = document.all["_" + objTextArea + "_editor"];
// get iframe document object
editorDocument = objEditor.contentWindow.document;
// set editor contents (and default styles for editor)
editorDocument.open();
editorDocument.write(''
+ '\n'
+ '\n'
+ '\n'
+ '\n'
+ ''
+ contents
+ '\n'
+ '\n'
);
editorDocument.close();
// enable buttons
IDList = Array('Bold','Italic','Underline','StrikeThrough','SubScript','SuperScript','JustifyLeft','JustifyCenter','JustifyRight','InsertOrderedList','InsertUnorderedList','Outdent','Indent','ForeColor','BackColor','InsertHorizontalRule','CreateLink','InsertImage');
for( i = 0; i < IDList.length; i++ ){
objButton = document.all["_" + objTextArea + "_" + IDList[i]];
if( objButton == null ){
continue;
}//end if
objButton.className = 'btn';
objButton.disabled = false;
}//end for loop
// set event handlers
editorDocument.onkeypress = function(){ updateUserInterface(objTextArea); }
editorDocument.onkeyup = function(){ updateUserInterface(objTextArea); }
editorDocument.onmouseup = function(){ updateUserInterface(objTextArea); }
//these events fire before they occur
editorDocument.body.ondrop = function(){ updateUserInterface(objTextArea, 100); }
editorDocument.body.oncut = function(){ updateUserInterface(objTextArea, 100); }
editorDocument.body.onpaste = function(){ updateUserInterface(objTextArea, 100); }
editorDocument.body.onblur = function(){ updateUserInterface(objTextArea, -1); }
// set initial value
objEditor.onload = function(){ editorDocument.body.innerHTML = document.all[objTextArea].value; }
// update hidden output field
setPlaceholders(editorDocument);
// update hidden output field
document.all[objTextArea].value = editorDocument.body.innerHTML;
// bring focus to editor
if( mode != 'init' ){
setFocus(objEditor); //don't focus on page load
updateUserInterface(buttonID); //don't update UI on page load
}//end if
if( DEBUG ){
alert("Exiting the setUpRTEditor function");
}//end if
}//function setUpRTEditor
//=======================================
// updateUserInterface(objTextArea, runDelay)
//=======================================
//Inputs: objTextArea ID of the textarea we are going to replace
// runDelay -1 = run now, no matter what
// 0 = run now, if allowed
// 1000 = run in 1 second, if allowed at that point
//
//Description: update button status, selected fonts, hidden output field
//
//Usage: updateUserInterface(objTextArea, runDelay);
//=======================================
function updateUserInterface(objTextArea, runDelay){
var objEditor;
var editorDocument;
var editEvent;
var IDList;
var objButton;
var isActive;
var fontName = '';
var fontSize = 0;
var objFontName;
var objFontSize;
var foundFont = 0;
var numFonts = 0;
var currentFont = '';
var currentFontSize = 0;
if( DEBUG ){
alert("Entering the updateUserInterface function\nParameters:\nobjTextArea = " + objTextArea + "\nrunDelay = " + runDelay);
}//end if
objEditor = document.all["_" + objTextArea + "_editor"]; //rich text editor object
if( runDelay == null ){
runDelay = 0;
}//end if
// setup timer for delayed updates (some events take time to complete)
if( runDelay > 0 ){
return setTimeout(function(){ updateUserInterface(objTextArea); }, runDelay);
}//end if
// don't execute more than 3 times a second (eg: too soon after last execution)
if( this.tooSoon == 1 && runDelay >= 0 ){
// queue all but urgent events
this.queue = 1; return;
}//end if
this.tooSoon = 1;
setTimeout(function(){
this.tooSoon = 0;
if( this.queue ){
updateUserInterface(objTextArea, -1);
};
this.queue = 0;
}, 333); // 1/3 second
editorDocument = objEditor.contentWindow.document; //get iframe editor document object
editEvent = objEditor.contentWindow.event;
setPlaceholders(editorDocument);
document.all[objTextArea].value = editorDocument.body.innerHTML; //update hidden output field
// update button states
IDList = Array('Bold','Italic','Underline','JustifyLeft','JustifyCenter','JustifyRight','InsertOrderedList','InsertUnorderedList');
for( i = 0; i < IDList.length; i++ ){ //for each button
objButton = document.all["_" + objTextArea + "_" +IDList[i]]; //get button object
if( objButton == null ){
continue; //if no button object
}//end if
isActive = editorDocument.queryCommandState( IDList[i] );
if( !isActive ){ //option is OK
if( objButton.className != 'btn' ){
objButton.className = 'btn';
}//end if
if( objButton.disabled != false ){
objButton.disabled = false;
}//end if
}//end if
else if( isActive ){
// option already applied or mixed content
if( objButton.className != 'btnDN' ){
objButton.className = 'btnDN';
}//end if
if( objButton.disabled != false ){
objButton.disabled = false;
}//end if
}//end else if
}//end for loop
// Loop over font pulldowns
IDList = Array('FontName','FontSize');
for( i = 0; i < IDList.length; i++ ){
isActive = editorDocument.queryCommandState( IDList[i] );
objButton = document.all["_" + objTextArea + "_" +IDList[i]]; //button object
objButton.disabled = false;
}//end for loop
//Get Font Name and Size
fontName = editorDocument.queryCommandValue('FontName');
fontSize = editorDocument.queryCommandValue('FontSize');
if( fontName != null ){
fontName = fontName.toLowerCase();
}//end if
//Set Font face pulldown
objFontName = document.all["_" + objTextArea + "_FontName"];
if( fontName == null ){
objFontName.value = fontName;
}//end if
else{
numFonts = objFontName.length;
for( i = 0; i < numFonts; i++ ){
currentFont = objFontName[i].text.toLowerCase();
if( currentFont == fontName ){
objFontName.selectedIndex = i;
foundFont = 1;
}//end if
}//end for loop
if( foundFont != 1 ){
objFontName.value = fontName; //for fonts not in list
}//end if
}//end else
//Set Font size pulldown
objFontSize = document.all["_" + objTextArea + "_FontSize"];
if( fontSize == null ){
objFontSize.value = fontSize;
}//end if
else{
for( i = 0; i < 7; i++ ){
currentFontSize = objFontSize[i].text;
if( currentFontSize == fontSize ){
objFontSize.selectedIndex = i;
}//end if
}//end for loop
}//end else
if( DEBUG ){
alert("Exiting the updateUserInterface function");
}//end if
}//function updateUserInterface