//Call speck Init to convert all text areas with "iEdit" to speck edit windows.
//Alternatively:
//var editor = new speckEditor();
//editor.init(textareaelement, optional callback on loaded)
function speckInit(callback) {
var tas = document.getElementsByTagName("textarea");
var found = false;
for(i=0;i<tas.length;i++) {
var ta = tas[i];
if (ta.className == "iEdit") {
var editor = new speckEditor();
editor.init(ta, callback);
found = true;
}
}
if (!found) {
if (callback)
callback.call();
}
return true;
};
//Be sure to call speckClose if you are hiding or removing a speck edit
//from the screen and plan to open another before refreshing the page.
function speckClose() {
for(var i in iEdit)
{
iEdit[i].iframe.contentWindow.document.designMode = "off";
}
};
/** (re)Opens all specks **/
function speckOpen() {
for(var i in iEdit)
{
iEdit[i].iframe.contentWindow.document.designMode = "on";
}
};
/** Toggle Html Editor on all specks */
function speckToggleAll() {
for(var i in iEdit)
{
iEdit[i].toggleMode();
}
};
//Collection of all text windows: accessible by:
//iEdit[TextAreaId].html();
var iEdit = [];
//One instance of a speck edit window
function speckEditor() {};
speckEditor.prototype = {
//Edit this path to point to the location of the stylesheet you would like applied to the edit window.
editStylePath: window.location.protocol + "//" + window.location.host + "/speck/editstyle.css",
//Remove or add features from this list. a=action, t=hover information text
features: [
"html", "Toggle HTML View",
"bold", "Bold",
"italic", "Italic",
"underline", "Underline",
"justifyleft", "Align Left",
"justifycenter", "Align Center",
"justifyright", "Align Right",
"insertorderedlist", "Insert Ordered List",
"insertunorderedlist", "Insert Unordered List",
"link", "Create Link",
"unlink", "Remove Link",
"formatblock", "Choose Format",
"fontname", "Choose Font Style",
"fontsize", "Choose Font Size",
"forecolor", "Choose Font Color",
"removeformat", "Remove Formatting"
],
//Colors available in the color bar
colors: [ "006600", "666600", "ccff66", "669933", "ffffff", "eeeeee", "999999", "333333", "000000", "666699", "000033", "000066", "ccffff", "ffff33", "ffcc00", "ffff99", "990000", "330033", "cc3399", "ffcccc", "ffffcc", "996633", "663300", "330000"],
//Block Options for formatblock
blockOptions: [
"<h1>", "Heading 1",
"<h2>", "Heading 2",
"<h3>", "Heading 3",
"<h4>", "Heading 4",
"<h5>", "Heading 5",
"<h6>", "Heading 6",
"<p>", "Normal",
"<blockquote>", "Block Quote"
],
//Font options for fontname
fontOptions: [
"Verdana", "Verdana",
"Arial", "Arial",
"Georgia", "Georgia",
"Trebuchet", "Trebuchet",
"Courier New", "Courier",
"Times New Roman", "Times"
],
//Font size options for fontsize
fontSizes: [
"1", "Small",
"3", "Medium",
"5", "Large",
"7", "Largest"
],
//Initialize the edit window
init: function(ta, callback) {
this.ta = ta;
this.id = ta.id;
iEdit[this.id] = this;
if (callback)
this.loaded = callback;
//Get the current width
this.width = this.ta.offsetWidth;
if (this.width == 0)
this.width = parseInt(this.ta.style.width);
//Get the current height
this.height = this.ta.offsetHeight;
if (this.height == 0)
this.height = parseInt(this.ta.style.height);
this.ta.style.display = "none";
this.container = this.$new("div");
this.tb = this.$new("div");
this.tb.className = "speckToolbar";
this.tb.style.width = this.width + "px";
this.container.appendChild(this.tb);
//Add the features
for(var i=0;i<this.features.length;i+=2) {
this.addFeature(this.features[i], this.features[i+1]);
}
this.ta.style.height = (this.height-32) + "px";
this.ta.parentNode.replaceChild(this.container, this.ta);
this.container.appendChild(this.ta);
this.initEdit();
},
initEdit: function(content) {
if (this.iframe)
this.container.removeChild(this.iframe);
//Create the iframe
this.iframe = this.$new("iframe");
this.iframe.className = "speckFrame";
this.iframe.frameBorder = "0";
this.iframe.style.width = (this.width-2) + "px";
this.iframe.style.height = (this.height-32) + "px";
this.container.appendChild(this.iframe);
//Save style properties with property called savestyle
content = this.ta.value.replace(/(style|STYLE|Style)=('|").+?('|")/g, function(match){ return match + " save" + match; });
//Write out current content to the iframe window, include edit mode stylesheet
this.iframe.contentWindow.document.open();
//this.iframe.contentWindow.document.write("<html><head><link id='ThemeStyle' href='" + this.editStylePath + "' type='text/css' rel='stylesheet' /></head><body style='background:#fff url();color:#000;'>" + content + "</body></html>");
this.iframe.contentWindow.document.write("<html><head></head><body style='background:#fff url();color:#000;'>" + content + "</body></html>");
this.iframe.contentWindow.document.close();
this.enterDesignMode();
return true;
},
enterDesignMode: function() {
//Firefox needs a little time for this.
if (!this.iframe.contentWindow.document.body) {
var self = this;
setTimeout(function() { self.enterDesignMode(); }, 1);
return;
}
//Turn on design mode
this.iframe.contentWindow.document.designMode = "on";
this.wysiwyg = true;
//call loaded event
if (this.loaded)
this.loaded.call();
},
addFeature: function(action, text) {
switch (action) {
case "formatblock":
this.hBar = this.$new("div");
this.hBar.id = this.id + "Hbar";
this.addBar(this.hBar, "formatblock", this.blockOptions, text);
this.container.appendChild(this.hBar);
break;
case "fontname":
this.fBar = this.$new("div");
this.fBar.id = this.id + "Fbar";
this.addBar(this.fBar, "fontname", this.fontOptions, text);
this.container.appendChild(this.fBar);
break;
case "fontsize":
this.sBar = this.$new("div");
this.sBar.id = this.id + "Sbar";
this.addBar(this.sBar, "fontsize", this.fontSizes, text);
this.container.appendChild(this.sBar);
break;
case "forecolor":
this.addColor("forecolor", this.colors, text);
this.container.appendChild(this.cBar);
break;
case "link":
this.addLinkBar("link", text);
this.container.appendChild(this.lBar);
break;
default:
this.tb.appendChild(this.getButton(action, text));
break;
}
},
getButton: function(action, text) {
var self = this;
var button = this.$new("input");
button.type = "button";
button.id = action + "Button";
button.title = text;
button.className = "speckButton";
button.action = action;
button.onclick = function() { self.execCommand(this); };
return button;
},
addColor: function(action, options, text) {
var button = this.getButton(action, text); // this.$new("input");
var self = this;
button.onclick = function() { self.showSelect(this); };
var bar = this.$new("div");
bar.id = action + "Select";
bar.className = "speckColorBar";
bar.style.width = (this.width - 2) + "px"; //2 is border width
bar.style.display = "none";
for (var i=0;i<options.length;i++)
{
var option = this.$new("input");
option.val = options[i];
option.type = "button";
option.style.backgroundColor = "#" + option.val;
option.action = action;
option.className = "speckColor";
option.onclick = function() { self.execCommand(this); };
bar.appendChild(option);
}
this.cBar = bar;
button.selectMenuId = bar.id;
this.tb.appendChild(button);
return true;
},
addLinkBar: function(action, text) {
var button = this.getButton(action, text); //this.$new("input");
var self = this;
button.onclick = function() { self.showSelect(this); };
var bar = this.$new("div");
bar.id = action + "linkbar";
bar.className = "speckLinkbar";
bar.style.width = (this.width-2) + "px"; //2 is border width
bar.style.display = "none";
this.linkUrl = this.$new("input");
this.linkUrl.id = this.id + "link";
this.linkUrl.style.width = (this.width - 60) + "px";
this.linkUrl.value = "http://";
var link = this.$new("input");
link.type = "button";
link.id = "linkingButton";
link.value = "link";
link.className = "linkbarButton";
link.action = "createlink";
link.onclick = function() { self.execCommand(this) };
bar.appendChild(this.linkUrl);
bar.appendChild(link);
this.lBar = bar;
button.selectMenuId = bar.id;
this.tb.appendChild(button);
return true;
},
addBar: function(bar, action, options, text) {
var button = this.getButton(action, text); //this.$new("input");
var self = this;
button.onclick = function() { self.showSelect(this); };
bar.className = "speckBar";
bar.style.width = (this.width-2) + "px";
bar.style.display = "none";
for (var i=0;i<options.length;i+=2)
{
var option = this.$new("input");
option.val = options[i];
option.value = options[i + 1];
option.type = "button";
option.action = action;
option.editor = this.id;
option.className = "speckOption";
option.onclick = function() { self.execCommand(this) };
bar.appendChild(option);
}
button.selectMenuId = bar.id;
this.tb.appendChild(button);
return true;
},
hideSelects: function() {
var buttons = this.tb.childNodes;
for(var i=0;i<buttons.length;i++) {
var button = buttons[i];
if (button.selectMenuId) {
var selectMenu = document.getElementById(button.selectMenuId);
selectMenu.style.display = "none";
}
}
this.lBar.style.display = "none";
this.iframe.style.height = (this.height-32) + "px";
this.ta.style.height = (this.height-32) + "px";
},
addLinkbar: function() {
this.lBar = this.$new("div");
this.lBar.id = this.id + "linkbar";
this.lBar.className = "speckLinkbar";
this.lBar.style.width = this.width-10 + "px";
this.lBar.style.display = "none";
this.linkUrl = this.$new("input");
this.linkUrl.id = this.id + "link";
this.linkUrl.style.width = (this.width - 60) + "px";
this.linkUrl.value = "http://";
var link = this.$new("input");
link.type = "button";
link.value = "link";
link.className = "linkbarButton";
link.action = "createlink";
var self = this;
link.onclick = function() { self.execCommand(); };
this.lBar.appendChild(this.linkUrl);
this.lBar.appendChild(link);
},
toggleLinkbar: function() {
if (this.lBar.style.display == "none") {
this.lBar.style.display = "block";
this.iframe.style.height = (this.height-(64)) + "px";
} else {
this.lBar.style.display = "none";
this.iframe.style.height = (this.height-32) + "px";
}
},
setFocus: function() {
if (this.wysiwyg == true)
this.iframe.contentWindow.focus();
else
this.ta.focus();
},
toggleMode: function() {
this.hideSelects();
if (this.wysiwyg) {
this.html(); //update html
this.ta.style.display = "block";
this.iframe.style.display = "none";
this.wysiwyg = false;
}
else {
this.ta.style.display = "none";
this.initEdit(this.ta.value);
this.wysiwyg = true;
}
},
disable: function() {
this.hideSelects();
if (this.wysiwyg) {
this.html(); //update html
this.ta.style.display = "block";
this.iframe.style.display = "none";
this.wysiwyg = false;
}
},
enable: function() {
this.hideSelects();
if (!this.wysiwyg) {
this.ta.style.display = "none";
this.initEdit(this.ta.value);
this.wysiwyg = true;
}
},
html: function() {
this.ta.value = this.innerXML(this.iframe.contentWindow.document.body.cloneNode(true));
return this.ta.value;
},
showSelect: function(selector) {
var selectMenu = document.getElementById(selector.selectMenuId);
//if select bar is already open, close it.
if (selectMenu.style.display == "block") {
this.hideSelects();
return;
}
this.hideSelects();
this.iframe.style.height = (this.height-64) + "px";
this.ta.style.height = (this.height-64) + "px";
selectMenu.style.display = "block";
},
execCommand: function(button) {
var doc = this.iframe.contentWindow.document;
switch (button.action) {
case "createlink":
if (this.linkUrl.value != "") {
doc.execCommand(button.action, false, this.linkUrl.value);
this.toggleLinkbar();
}
break;
case "formatblock":
case "fontsize":
case "forecolor":
case "fontname":
doc.execCommand(button.action, false, button.val);
break;
case "link":
this.toggleLinkbar();
break;
case "html":
this.toggleMode();
break;
default:
doc.execCommand(button.action, false, null);
break;
}
if (button.parentNode.className == "speckSelect") {
button.parentNode.style.display = "none";
return false;
}
this.setFocus();
},
innerXML: function(oNode) {
//Returns the innerXML of an HTML DOM node
var s = "";
var nodes = oNode.childNodes;
for(var i=0; i < nodes.length; i++)
{
var node = nodes[i];
var nodeType = node.nodeType;
if (nodeType == 1 || nodeType == 9 || nodeType == 11) //Element Node, Document Node, Document Fragment Node
s += this.xml(node, "");
else
s += node.data;
}
return s;
},
xml: function(oNode, indent) {
//Returns outerXML of the node.
var s = "";
var nodes = oNode.childNodes;
var tag = oNode.nodeName.toLowerCase();
if (nodes.length == 0 && (tag == "input" || tag == "img" || tag == "hr" || tag == "br" || tag == "feature" ))
{
if (!oNode.getAttribute("_moz_editor_bogus_node")) {
s += indent + "<" + tag + this.getAttributes(oNode) + "/>";
//s += indent + "<" + tag + this.getAttributes(oNode) + ">\n";
}
}
else
{
if (this.isEmptyNode(oNode))
return s;
s += indent + "<" + tag + this.getAttributes(oNode) + ">";
for(var i=0; i < nodes.length; i++)
{
var node = nodes[i];
var nodeType = node.nodeType;
if (nodeType == 1 || nodeType == 9 || nodeType == 11) //Element Node, Document Node, Document Fragment Node
s += this.xml(node, indent + "");
else
s += indent + node.data;
}
s += indent + "</" + tag + ">";
}
return s;
},
getAttributes: function(oNode) {
var s = "";
var atts = oNode.attributes;
var style = "";
for(var i=0; i < atts.length; i++) {
var att = atts[i];
var name = att.nodeName.toLowerCase();
var val = att.nodeValue;
if (this.validAttribute(att, oNode.nodeName)) {
if (name == "savestyle" || name == "style") {
if (style.indexOf(val)<0) //not already there
style += val;
} else {
s += " " + name + "=\"" + val.replace("about:/", "/") + "\" ";
}
}
}
if (style.length>0)
s += " style=\"" + style + "\" ";
return s;
},
validAttribute: function(att, tag) {
//eliminate unwanted or unsupported attributes
var name = att.nodeName.toLowerCase();
var val = att.nodeValue;
if (name == "start")
return false;
if (val == null || val == "" || val == "inherit" || val == "_moz")
return false;
if (name == "colspan" || name == "rowspan")
if (val == "1") { return false; }
if (tag == "INPUT")
if (name == "height" || name == "maxlength" || name == "loop")
return false;
if (tag == "IMG")
if (name == "start" || name == "loop")
return false;
return true;
},
isEmptyNode: function(oNode) {
var nodes = oNode.childNodes;
for(var i=0; i < nodes.length; i++) {
var node = nodes[i];
var nodeType = node.nodeType;
if (nodeType == 1 || nodeType == 9 || nodeType == 11) {
return false;
} else {
if (node.data.replace(/^\s+|\s+$/g,"").replace(/^\n+|\n+$/g,"") != "")
return false;
}
}
return true;
},
$new: function(tag) {
return document.createElement(tag);
}
}