//
// htmlArea v2.00 - Copyright (c) 2002 interactivetools.com, inc.
// A free WYSIWYG editor replacement for ';
// add context menu
editor += '';
// hide original textarea and insert htmlarea after it
if (!config.debug) { document.all[objname].style.display = "none"; }
document.all[objname].insertAdjacentHTML('afterEnd', editor)
// convert htmlarea from textarea to wysiwyg editor
editor_setmode(objname, 'init');
// call filterOutput when user submits form
for (var idx=0; idx < document.forms.length; idx++) {
var r = document.forms[idx].attachEvent('onsubmit', function() { editor_filterOutput(objname); });
if (!r) { alert("Error attaching event to form!"); }
}
}
/* ---------------------------------------------------------------------- *\
Function : editor_action
Description : perform an editor command on selected editor content
Usage :
Arguments : button_id - button id string with editor and action name
\* ---------------------------------------------------------------------- */
function editor_action(button_id) {
// split up button name into "editorID" and "cmdID"
var BtnParts = Array();
BtnParts = button_id.split("_");
var objname = button_id.replace(/^_(.*)_[^_]*$/, '$1');
var cmdID = BtnParts[ BtnParts.length-1 ];
var button_obj = document.all[button_id];
var editor_obj = document.all["_" +objname + "_editor"];
var config = document.all[objname].config;
// help popup
if (cmdID == 'showhelp') {
window.open(_editor_url + "popups/editor_help.html", 'EditorHelp');
return;
}
// check editor mode (don't perform actions in textedit mode)
if (editor_obj.tagName.toLowerCase() == 'textarea') { return; }
var editdoc = editor_obj.contentWindow.document;
editor_focus(editor_obj);
// get index and value for pulldowns
var idx = button_obj.selectedIndex;
var val = (idx != null) ? button_obj[ idx ].value : null;
if (0) {} // use else if for easy cutting and pasting
//
// CUSTOM BUTTONS START HERE
//
// Custom1
else if (cmdID == 'custom1') {
alert("Hello, I am custom button 1!");
}
// Custom2
else if (cmdID == 'Macros') { // insert some text from a popup window
var myTitle = "Insert WebGUI macro";
var myText = showModalDialog(_editor_url + "popups/macros.html",
myTitle, // str or obj specified here can be read from dialog as "window.dialogArguments"
"resizable: yes; help: no; status: no; scroll: no; ");
if (myText) { editor_insertHTML(objname, myText); }
}
// Custom3
else if (cmdID == 'custom3') { // insert some text
editor_insertHTML(objname, "It's easy to add buttons that insert text!");
}
//
// END OF CUSTOM BUTTONS
//
// popup editor
else if (cmdID == 'popupeditor') {
showModalDialog(_editor_url + "popups/fullscreen.html?"+objname, window, "resizable: yes; help: no; status: no; scroll: no; ");
}
// FontName
else if (cmdID == 'FontName' && val) {
editdoc.execCommand(cmdID,0,val);
}
// FontSize
else if (cmdID == 'FontSize' && val) {
editdoc.execCommand(cmdID,0,val);
}
// FontStyle (change CSS className)
else if (cmdID == 'FontStyle' && val) {
editdoc.execCommand('RemoveFormat');
editdoc.execCommand('FontName',0,'636c6173734e616d6520706c616365686f6c646572');
var fontArray = editdoc.all.tags("FONT");
for (i=0; i 0) { return setTimeout(function(){ editor_event(objname); }, runDelay); }
// don't execute more than 3 times a second (eg: too soon after last execution)
if (this.tooSoon == 1 && runDelay >= 0) { this.queue = 1; return; } // queue all but urgent events
this.tooSoon = 1;
setTimeout(function(){
this.tooSoon = 0;
if (this.queue) { editor_event(objname,-1); };
this.queue = 0;
}, 333); // 1/3 second
editor_updateOutput(objname);
editor_updateToolbar(objname);
}
/* ---------------------------------------------------------------------- *\
Function : editor_updateToolbar
Description : update toolbar state
Usage :
Arguments : objname - ID of textarea to replace
action - enable, disable, or update (default action)
\* ---------------------------------------------------------------------- */
function editor_updateToolbar(objname,action) {
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname+ "_editor"];
// disable or enable toolbar
if (action == "enable" || action == "disable") {
var tbItems = new Array('FontName','FontSize','FontStyle'); // add pulldowns
for (var btnName in config.btnList) { tbItems.push(config.btnList[btnName][0]); } // add buttons
for (var idxN in tbItems) {
var cmdID = tbItems[idxN].toLowerCase();
var tbObj = document.all["_" +objname+ "_" +tbItems[idxN]];
if (cmdID == "htmlmode" || cmdID == "about" || cmdID == "showhelp") { continue; } // don't change these buttons
if (tbObj == null) { continue; }
var isBtn = (tbObj.tagName.toLowerCase() == "button") ? true : false;
if (action == "enable") { tbObj.disabled = false; if (isBtn) { tbObj.className = 'btn' }}
if (action == "disable") { tbObj.disabled = true; if (isBtn) { tbObj.className = 'btnNA' }}
}
return;
}
// update toolbar state
if (editor_obj.tagName.toLowerCase() == 'textarea') { return; } // don't update state in textedit mode
var editdoc = editor_obj.contentWindow.document;
// Set FontName pulldown
var fontname_obj = document.all["_" +objname+ "_FontName"];
if (fontname_obj) {
var fontname = editdoc.queryCommandValue('FontName');
if (fontname == null) { fontname_obj.value = null; }
else {
var found = 0;
for (i=0; i]*|'[^']*'|"[^"]*")*)>/g; // this will match tags, but still doesn't handle container tags (textarea, comments, etc)
contents = contents.replace(matchTag, filterTag);
// update output with filtered content
document.all[objname].value = contents;
}
/* ---------------------------------------------------------------------- *\
Function : editor_setmode
Description : change mode between WYSIWYG and HTML editor
Usage : editor_setmode(objname, mode);
Arguments : objname - button id string with editor and action name
mode - init, textedit, or wysiwyg
\* ---------------------------------------------------------------------- */
function editor_setmode(objname, mode) {
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname + "_editor"];
// wait until document is fully loaded
if (document.readyState != 'complete') {
setTimeout(function() { editor_setmode(objname,mode) }, 25);
return;
}
// define different editors
var TextEdit = '';
var RichEdit = '';
//
// Switch to TEXTEDIT mode
//
if (mode == "textedit" || editor_obj.tagName.toLowerCase() == 'iframe') {
var editdoc = editor_obj.contentWindow.document;
var contents = editdoc.body.createTextRange().htmlText;
editor_obj.outerHTML = TextEdit;
editor_obj = document.all["_" +objname + "_editor"];
editor_obj.value = contents;
editor_event(objname);
editor_updateToolbar(objname, "disable"); // disable toolbar items
// set event handlers
editor_obj.onkeypress = function() { editor_event(objname); }
editor_obj.onkeyup = function() { editor_event(objname); }
editor_obj.onmouseup = function() { editor_event(objname); }
editor_obj.ondrop = function() { editor_event(objname, 100); } // these events fire before they occur
editor_obj.oncut = function() { editor_event(objname, 100); }
editor_obj.onpaste = function() { editor_event(objname, 100); }
editor_obj.onblur = function() { editor_event(objname, -1); }
editor_updateOutput(objname);
editor_focus(editor_obj);
}
//
// Switch to WYSIWYG mode
//
else {
var contents = editor_obj.value;
if (mode == 'init') { contents = document.all[objname].value; } // on init use original textarea content
// create editor
editor_obj.outerHTML = RichEdit;
editor_obj = document.all["_" +objname + "_editor"];
// get iframe document object
// create editor contents (and default styles for editor)
var html = "";
html += '\n';
if (config.stylesheet) {
html += '\n';
}
html += '\n'
+ '\n'
+ ''
+ contents
+ '\n'
+ '\n';
// write to editor window
var editdoc = editor_obj.contentWindow.document;
editdoc.open();
editdoc.write(html);
editdoc.close();
editor_updateToolbar(objname, "enable"); // enable toolbar items
// store objname under editdoc
editdoc.objname = objname;
// set event handlers
editdoc.onkeypress = function() { editor_event(objname); }
editdoc.onkeyup = function() { editor_event(objname); }
editdoc.onmouseup = function() { editor_event(objname); }
editdoc.body.ondrop = function() { editor_event(objname, 100); } // these events fire before they occur
editdoc.body.oncut = function() { editor_event(objname, 100); }
editdoc.body.onpaste = function() { editor_event(objname, 100); }
editdoc.body.onblur = function() { editor_event(objname, -1); }
// bring focus to editor
if (mode != 'init') { // don't focus on page load, only on mode switch
editor_focus(editor_obj);
}
}
// Call update UI
if (mode != 'init') { // don't update UI on page load, only on mode switch
editor_event(objname);
}
}
/* ---------------------------------------------------------------------- *\
Function : editor_focus
Description : bring focus to the editor
Usage : editor_focus(editor_obj);
Arguments : editor_obj - editor object
\* ---------------------------------------------------------------------- */
function editor_focus(editor_obj) {
// check editor mode
if (editor_obj.tagName.toLowerCase() == 'textarea') { // textarea
var myfunc = function() { editor_obj.focus(); };
setTimeout(myfunc,100); // doesn't work all the time without delay
}
else { // wysiwyg
var editdoc = editor_obj.contentWindow.document; // get iframe editor document object
var editorRange = editdoc.body.createTextRange(); // editor range
var curRange = editdoc.selection.createRange(); // selection range
if (curRange.length == null && // make sure it's not a controlRange
!editorRange.inRange(curRange)) { // is selection in editor range
editorRange.collapse(); // move to start of range
editorRange.select(); // select
curRange = editorRange;
}
}
}
/* ---------------------------------------------------------------------- *\
Function : editor_about
Description : display "about this editor" popup
\* ---------------------------------------------------------------------- */
function editor_about(objname) {
showModalDialog(_editor_url + "popups/about.html", window, "resizable: yes; help: no; status: no; scroll: no; ");
}
/* ---------------------------------------------------------------------- *\
Function : _dec_to_rgb
Description : convert dec color value to rgb hex
Usage : var hex = _dec_to_rgb('65535'); // returns FFFF00
Arguments : value - dec value
\* ---------------------------------------------------------------------- */
function _dec_to_rgb(value) {
var hex_string = "";
for (var hexpair = 0; hexpair < 3; hexpair++) {
var byte = value & 0xFF; // get low byte
value >>= 8; // drop low byte
var nybble2 = byte & 0x0F; // get low nybble (4 bits)
var nybble1 = (byte >> 4) & 0x0F; // get high nybble
hex_string += nybble1.toString(16); // convert nybble to hex
hex_string += nybble2.toString(16); // convert nybble to hex
}
return hex_string.toUpperCase();
}
/* ---------------------------------------------------------------------- *\
Function : editor_insertHTML
Description : insert string at current cursor position in editor. If
two strings are specifed, surround selected text with them.
Usage : editor_insertHTML(objname, str1, [str2], reqSelection)
Arguments : objname - ID of textarea
str1 - HTML or text to insert
str2 - HTML or text to insert (optional argument)
reqSelection - (1 or 0) give error if no text selected
\* ---------------------------------------------------------------------- */
function editor_insertHTML(objname, str1,str2, reqSel) {
var config = document.all[objname].config;
var editor_obj = document.all["_" +objname + "_editor"]; // editor object
if (str1 == null) { str1 = ''; }
if (str2 == null) { str2 = ''; }
// for non-wysiwyg capable browsers just add to end of textbox
if (document.all[objname] && editor_obj == null) {
document.all[objname].focus();
document.all[objname].value = document.all[objname].value + str1 + str2;
return;
}
// error checking
if (editor_obj == null) { return alert("Unable to insert HTML. Invalid object name '" +objname+ "'."); }
editor_focus(editor_obj);
var tagname = editor_obj.tagName.toLowerCase();
var sRange;
// insertHTML for wysiwyg iframe
if (tagname == 'iframe') {
var editdoc = editor_obj.contentWindow.document;
sRange = editdoc.selection.createRange();
var sHtml = sRange.htmlText;
// check for control ranges
if (sRange.length) { return alert("Unable to insert HTML. Try highlighting content instead of selecting it."); }
// insert HTML
var oldHandler = window.onerror;
window.onerror = function() { alert("Unable to insert HTML for current selection."); return true; } // partial table selections cause errors
if (sHtml.length) { // if content selected
if (str2) { sRange.pasteHTML(str1 +sHtml+ str2) } // surround
else { sRange.pasteHTML(str1); } // overwrite
} else { // if insertion point only
if (reqSel) { return alert("Unable to insert HTML. You must select something first."); }
sRange.pasteHTML(str1 + str2); // insert strings
}
window.onerror = oldHandler;
}
// insertHTML for plaintext textarea
else if (tagname == 'textarea') {
editor_obj.focus();
sRange = document.selection.createRange();
var sText = sRange.text;
// insert HTML
if (sText.length) { // if content selected
if (str2) { sRange.text = str1 +sText+ str2; } // surround
else { sRange.text = str1; } // overwrite
} else { // if insertion point only
if (reqSel) { return alert("Unable to insert HTML. You must select something first."); }
sRange.text = str1 + str2; // insert strings
}
}
else { alert("Unable to insert HTML. Unknown object tag type '" +tagname+ "'."); }
// move to end of new content
sRange.collapse(false); // move to end of range
sRange.select(); // re-select
}
/* ---------------------------------------------------------------- */
function _isMouseOver(obj,event) { // determine if mouse is over object
var mouseX = event.clientX;
var mouseY = event.clientY;
var objTop = obj.offsetTop;
var objBottom = obj.offsetTop + obj.offsetHeight;
var objLeft = obj.offsetLeft;
var objRight = obj.offsetLeft + obj.offsetWidth;
if (mouseX >= objLeft && mouseX <= objRight &&
mouseY >= objTop && mouseY <= objBottom) { return true; }
return false;
}
/* ---------------------------------------------------------------- */
function editor_cMenu_generate(editorWin,objname) {
var parentWin = window;
editorWin.event.returnValue = false; // cancel default context menu
// define content menu options
var cMenuOptions = [ // menu name, shortcut displayed, javascript code
['Cut', 'Ctrl-X', function() {}],
['Copy', 'Ctrl-C', function() {}],
['Paste', 'Ctrl-C', function() {}],
['Delete', 'DEL', function() {}],
['---', null, null],
['Select All', 'Ctrl-A', function() {}],
['Clear All', '', function() {}],
['---', null, null],
['About this editor...', '', function() {
alert("about this editor");
}]];
editor_cMenu.options = cMenuOptions; // save options
// generate context menu
var cMenuHeader = ''
+ '';
for (var menuIdx in editor_cMenu.options) {
var menuName = editor_cMenu.options[menuIdx][0];
var menuKey = editor_cMenu.options[menuIdx][1];
var menuCode = editor_cMenu.options[menuIdx][2];
// separator
if (menuName == "---" || menuName == "separator") {
cMenuList += ' |
';
}
// menu option
else {
cMenuList += '';
}
}
var cMenuHTML = cMenuHeader + cMenuList + cMenuFooter;
document.all['_'+objname+'_cMenu'].outerHTML = cMenuHTML;
editor_cMenu_setPosition(parentWin, editorWin, objname);
parentWin['_'+objname+'_cMenu'].style.visibility = 'visible';
parentWin['_'+objname+'_cMenu'].focus();
}
/* ---------------------------------------------------------------- */
function editor_cMenu_setPosition(parentWin, editorWin, objname) { // set object position that won't overlap window edge
var event = editorWin.event;
var cMenuObj = parentWin['_'+objname+'_cMenu'];
var mouseX = event.clientX + parentWin.document.all['_'+objname+'_editor'].offsetLeft;
var mouseY = event.clientY + parentWin.document.all['_'+objname+'_editor'].offsetTop;
var cMenuH = cMenuObj.offsetHeight;
var cMenuW = cMenuObj.offsetWidth;
var pageH = document.body.clientHeight + document.body.scrollTop;
var pageW = document.body.clientWidth + document.body.scrollLeft;
// set horzontal position
if (mouseX + 5 + cMenuW > pageW) { var left = mouseX - cMenuW - 5; } // too far right
else { var left = mouseX + 5; }
// set vertical position
if (mouseY + 5 + cMenuH > pageH) { var top = mouseY - cMenuH + 5; } // too far down
else { var top = mouseY + 5; }
cMenuObj.style.top = top;
cMenuObj.style.left = left;
}
/* ---------------------------------------------------------------- */
function editor_cMenu(obj,menuIdx,objname) {
var action = event.type;
if (action == "mouseover" && !obj.disabled && obj.tagName.toLowerCase() == 'tr') {
obj.className = 'cMenuOver';
for (var i=0; i < obj.cells.length; i++) { obj.cells[i].className = 'cMenuOver'; }
}
else if (action == "mouseout" && !obj.disabled && obj.tagName.toLowerCase() == 'tr') {
obj.className = 'cMenu';
for (var i=0; i < obj.cells.length; i++) { obj.cells[i].className = 'cMenu'; }
}
else if (action == "click" && !obj.disabled) {
document.all['_'+objname+'_cMenu'].style.visibility = "hidden";
var menucode = editor_cMenu.options[menuIdx][2];
menucode();
}
else if (action == "blur") {
if (!_isMouseOver(obj,event)) { obj.style.visibility = 'hidden'; }
else {
if (obj.style.visibility != "hidden") { obj.focus(); }
}
}
else { alert("editor_cMenu, unknown action: " + action); }
}
/* ---------------------------------------------------------------------- */