📄 wind_c_editor.js
字号:
//WYSIWYD JS CODE
function WYSIWYD(textarea) {
if (WYSIWYD.Browsercheck()) {
this.config = new WYSIWYD.Config();
this._htmlArea = null;
this._textArea = textarea;
this._editMode = "wysiwyg";
this._timerToolbar = null;
}
};
WYSIWYD.prototype.init = function () {
var editor = this;
var textarea = this._textArea;
if (typeof textarea == "string") {
this._textArea = textarea = WYSIWYD.getElementById("textarea", textarea);
}
this._ta_size = {
w: textarea.offsetWidth,
h: textarea.offsetHeight
};
textarea.style.display = "none";
var htmlarea = document.createElement("div");
htmlarea.className = "htmlarea";
htmlarea.style.width = "560px";
this._htmlArea = htmlarea;
textarea.parentNode.insertBefore(htmlarea, textarea);
if (textarea.form) {
var f = textarea.form;
if (typeof f.onsubmit == "function") {
var funcref = f.onsubmit;
if (typeof f.__msh_prevOnSubmit == "undefined") {
f.__msh_prevOnSubmit = [];
}
f.__msh_prevOnSubmit.push(funcref);
}
f.onsubmit = function() {
editor._textArea.value = editor.getHTML();
var a = this.__msh_prevOnSubmit;
if (typeof a != "undefined") {
for (var i in a) {
a[i]();
}
}
};
}
window.onunload = function() {
editor._textArea.value = editor.getHTML();
};
this._createToolbar();
var iframe = document.createElement("iframe");
htmlarea.appendChild(iframe);
this._iframe = iframe;
if (!WYSIWYD.is_ie) {
iframe.style.borderWidth = "0px";
}
var height = this._ta_size.h + "px";
height = parseInt(height);
var width = this._ta_size.w + "px";
width = parseInt(width);
if (!WYSIWYD.is_ie) {
height -= 2;
width -= 2;
}
iframe.style.width = width + "px";
iframe.style.height = height + "px";
textarea.style.width = iframe.style.width;
textarea.style.height= iframe.style.height;
function initIframe() {
var doc = editor._iframe.contentWindow.document;
if (!doc) {
if (WYSIWYD.is_gecko) {
setTimeout(initIframe, 100);
return false;
} else {
alert("ERROR: IFRAME can't be initialized.");
}
}
if (WYSIWYD.is_gecko) {
doc.designMode = "on";
}
editor._doc = doc;
doc.open();
var html = "<html>\n";
html += "<head>\n";
if (editor.config.baseURL)
html += '<base href="' + editor.config.baseURL + '" />';
html += "<style> html,body {border:0px;font-family:Verdana;font-size:12px;margin:2;}img {border:0;}</style>\n";
html += "</head>\n";
html += "<body>\n";
html += editor._textArea.value;
html += "</body>\n";
html += "</html>";
doc.write(html);
doc.close();
if (WYSIWYD.is_ie) {
doc.body.contentEditable = true;
}
//editor.focusEditor();
WYSIWYD._addEvents
(doc, ["keydown", "keypress", "mousedown", "mouseup", "drag"],
function (event) {
return editor._editorEvent(WYSIWYD.is_ie ? editor._iframe.contentWindow.event : event);
});
setTimeout(function() {
editor.updateToolbar();
}, 250);
};
setTimeout(initIframe, 100);
};
WYSIWYD.prototype._createToolbar = function () {
var editor = this;
var toolbar = document.createElement("div");
this._toolbar = toolbar;
toolbar.className = "toolbar";
toolbar.unselectable = "1";
var tb_row = null;
var tb_objects = new Object();
this._toolbarObjects = tb_objects;
function newLine() {
var table = document.createElement("table");
table.border = "0px";
table.cellSpacing = "0px";
table.cellPadding = "0px";
toolbar.appendChild(table);
var tb_body = document.createElement("tbody");
table.appendChild(tb_body);
tb_row = document.createElement("tr");
tb_body.appendChild(tb_row);
};
newLine();
function setButtonStatus(id, newval) {
var oldval = this[id];
var el = this.element;
if (oldval != newval) {
switch (id) {
case "enabled":
if (newval) {
WYSIWYD._removeClass(el, "buttonDisabled");
el.disabled = false;
} else {
WYSIWYD._addClass(el, "buttonDisabled");
el.disabled = true;
}
break;
case "active":
if (newval) {
WYSIWYD._addClass(el, "buttonPressed");
} else {
WYSIWYD._removeClass(el, "buttonPressed");
}
break;
}
this[id] = newval;
}
};
function createSelect(txt) {
var options = null;
var el = null;
var cmd = null;
var context = null;
options = editor.config[txt];
cmd = txt;
if (options) {
el = document.createElement("select");
var obj = {
name : txt,
element : el,
enabled : true,
text : false,
cmd : cmd,
state : setButtonStatus,
context : context
};
tb_objects[txt] = obj;
for (var i in options) {
var op = document.createElement("option");
op.appendChild(document.createTextNode(i));
op.value = options[i];
el.appendChild(op);
}
WYSIWYD._addEvent(el, "change", function () {
editor._comboSelected(el, txt);
});
}
return el;
};
function createButton(txt) {
var el = null;
var btn = null;
switch (txt) {
case "separator":
el = document.createElement("div");
el.className = "separator";
break;
case "space":
el = document.createElement("div");
el.className = "space";
break;
case "linebreak":
newLine();
return false;
default:
btn = editor.config.btnList[txt];
}
if (!el && btn) {
el = document.createElement("div");
el.title = btn[0];
el.className = "button";
var obj = {
name : txt,
element : el,
enabled : true,
active : false,
text : btn[2],
cmd : btn[3],
state : setButtonStatus,
context : btn[4] || null
};
tb_objects[txt] = obj;
WYSIWYD._addEvent(el, "mouseover", function () {
if (obj.enabled) {
WYSIWYD._addClass(el, "buttonHover");
}
});
WYSIWYD._addEvent(el, "mouseout", function () {
if (obj.enabled) with (WYSIWYD) {
_removeClass(el, "buttonHover");
_removeClass(el, "buttonActive");
(obj.active) && _addClass(el, "buttonPressed");
}
});
WYSIWYD._addEvent(el, "mousedown", function (ev) {
if (obj.enabled) with (WYSIWYD) {
_addClass(el, "buttonActive");
_removeClass(el, "buttonPressed");
_stopEvent(is_ie ? window.event : ev);
}
});
WYSIWYD._addEvent(el, "click", function (ev) {
if (obj.enabled) with (WYSIWYD) {
_removeClass(el, "buttonActive");
_removeClass(el, "buttonHover");
obj.cmd(editor, obj.name, obj);
_stopEvent(is_ie ? window.event : ev);
}
});
var img = document.createElement("img");
img.src = btn[1];
img.style.width = "20px";
img.style.height = "20px";
el.appendChild(img);
} else if (!el) {
el = createSelect(txt);
}
if (el) {
var tb_cell = document.createElement("td");
tb_row.appendChild(tb_cell);
tb_cell.appendChild(el);
} else {
alert("FIXME: Unknown toolbar item: " + txt);
}
return el;
};
var first = true;
for (var i in this.config.toolbar) {
if (!first) {
createButton("linebreak");
} else {
first = false;
}
var group = this.config.toolbar[i];
for (var j in group) {
var code = group[j];
createButton(code);
}
}
this._htmlArea.appendChild(toolbar);
};
WYSIWYD.prototype.setMode = function(mode) {
if (typeof mode == "undefined") {
mode = ((this._editMode == "textmode") ? "wysiwyg" : "textmode");
}
switch (mode) {
case "textmode":
this._textArea.value = this.getHTML();
this._iframe.style.display = "none";
this._textArea.style.display = "block";
break;
case "wysiwyg":
if (WYSIWYD.is_gecko) {
try {
this._doc.designMode = "off";
} catch(e) {};
}
this._doc.body.innerHTML = this.getHTML();
this._iframe.style.display = "block";
this._textArea.style.display = "none";
if (WYSIWYD.is_gecko) {
try {
this._doc.designMode = "on";
} catch(e) {};
}
break;
default:
alert("Mode <" + mode + "> not defined!");
return false;
}
this._editMode = mode;
this.focusEditor();
};
WYSIWYD.prototype.forceRedraw = function() {
this._doc.body.style.visibility = "hidden";
this._doc.body.style.visibility = "visible";
};
WYSIWYD.prototype.focusEditor = function() {
switch (this._editMode) {
case "wysiwyg" : this._iframe.contentWindow.focus(); break;
case "textmode": this._textArea.focus(); break;
default : alert("ERROR: mode " + this._editMode + " is not defined");
}
return this._doc;
};
WYSIWYD.prototype.updateToolbar = function(noStatus) {
var doc = this._doc;
var text = (this._editMode == "textmode");
var ancestors = null;
if (!text) {
ancestors = this.getAllAncestors();
}
for (var i in this._toolbarObjects) {
var btn = this._toolbarObjects[i];
var cmd = i;
var inContext = true;
if (btn.context && !text) {
inContext = false;
var context = btn.context;
var attrs = [];
if (/(.*)\[(.*?)\]/.test(context)) {
context = RegExp.$1;
attrs = RegExp.$2.split(",");
}
context = context.toLowerCase();
var match = (context == "*");
for (var k in ancestors) {
if (!ancestors[k]) {
continue;
}
if (match || (ancestors[k].tagName.toLowerCase() == context)) {
inContext = true;
for (var ka in attrs) {
if (!eval("ancestors[k]." + attrs[ka])) {
inContext = false;
break;
}
}
if (inContext) {
break;
}
}
}
}
btn.state("enabled", (!text || btn.text) && inContext);
if (typeof cmd == "function") {
continue;
}
switch (cmd) {
case "fontname":
case "fontsize":
case "formatblock":
if (!text) try {
var value = ("" + doc.queryCommandValue(cmd)).toLowerCase();
if (!value) {
break;
}
var options = this.config[cmd];
var k = 0;
for (var j in options) {
if ((j.toLowerCase() == value) ||
(options[j].substr(0, value.length).toLowerCase() == value)) {
btn.element.selectedIndex = k;
break;
}
++k;
}
} catch(e) {};
break;
case "textindicator":
if (!text) {
try {with (btn.element.style) {
backgroundColor = WYSIWYD._makeColor(
doc.queryCommandValue(WYSIWYD.is_ie ? "backcolor" : "hilitecolor"));
if (/transparent/i.test(backgroundColor)) {
backgroundColor = WYSIWYD._makeColor(doc.queryCommandValue("backcolor"));
}
color = WYSIWYD._makeColor(doc.queryCommandValue("forecolor"));
fontFamily = doc.queryCommandValue("fontname");
fontWeight = doc.queryCommandState("bold") ? "bold" : "normal";
fontStyle = doc.queryCommandState("italic") ? "italic" : "normal";
}} catch (e) {}
}
break;
case "htmlmode": btn.state("active", text); break;
case "lefttoright":
case "righttoleft":
var el = this.getParentElement();
while (el && !WYSIWYD.isBlockElement(el))
el = el.parentNode;
if (el)
btn.state("active", (el.style.direction == ((cmd == "righttoleft") ? "rtl" : "ltr")));
break;
default:
try {
btn.state("active", (!text && doc.queryCommandState(cmd)));
} catch (e) {}
}
}
};
WYSIWYD.prototype.insertNodeAtSelection = function(toBeInserted) {
if (!WYSIWYD.is_ie) {
var sel = this._getSelection();
var range = this._createRange(sel);
sel.removeAllRanges();
range.deleteContents();
var node = range.startContainer;
var pos = range.startOffset;
switch (node.nodeType) {
case 3:
if (toBeInserted.nodeType == 3) {
node.insertData(pos, toBeInserted.data);
range = this._createRange();
range.setEnd(node, pos + toBeInserted.length);
range.setStart(node, pos + toBeInserted.length);
sel.addRange(range);
} else {
node = node.splitText(pos);
var selnode = toBeInserted;
if (toBeInserted.nodeType == 11) {
selnode = selnode.firstChild;
}
node.parentNode.insertBefore(toBeInserted, node);
this.selectNodeContents(selnode);
this.updateToolbar();
}
break;
case 1:
var selnode = toBeInserted;
if (toBeInserted.nodeType == 11) {
selnode = selnode.firstChild;
}
node.insertBefore(toBeInserted, node.childNodes[pos]);
this.selectNodeContents(selnode);
this.updateToolbar();
break;
}
} else {
return null;
}
};
WYSIWYD.prototype.getParentElement = function() {
var sel = this._getSelection();
var range = this._createRange(sel);
if (WYSIWYD.is_ie) {
switch (sel.type) {
case "Text":
case "None":
return range.parentElement();
case "Control":
return range.item(0);
default:
return this._doc.body;
}
} else try {
var p = range.commonAncestorContainer;
if (!range.collapsed && range.startContainer == range.endContainer &&
range.startOffset - range.endOffset <= 1 && range.startContainer.hasChildNodes())
p = range.startContainer.childNodes[range.startOffset];
while (p.nodeType == 3) {
p = p.parentNode;
}
return p;
} catch (e) {
return null;
}
};
WYSIWYD.prototype.getAllAncestors = function() {
var p = this.getParentElement();
var a = [];
while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
a.push(p);
p = p.parentNode;
}
a.push(this._doc.body);
return a;
};
WYSIWYD.prototype.selectNodeContents = function(node, pos) {
this.focusEditor();
this.forceRedraw();
var range;
var collapsed = (typeof pos != "undefined");
if (WYSIWYD.is_ie) {
range = this._doc.body.createTextRange();
range.moveToElementText(node);
(collapsed) && range.collapse(pos);
range.select();
} else {
var sel = this._getSelection();
range = this._doc.createRange();
range.selectNodeContents(node);
(collapsed) && range.collapse(pos);
sel.removeAllRanges();
sel.addRange(range);
}
};
WYSIWYD.prototype._comboSelected = function(el, txt) {
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -