📄 htmlarea.js
字号:
if (typeof _editor_url == "string") {
_editor_url = _editor_url.replace(/\x2f*$/, '/');
} else {
alert("WARNING: _editor_url is not set! You should set this variable to the editor files path; it should preferably be an absolute path, like in '/htmlarea', but it can be relative if you prefer. Further we will try to load the editor files correctly but we'll probably fail.");
_editor_url = '';
}
if (typeof _editor_lang == "string") {
_editor_lang = _editor_lang.toLowerCase();
} else {
_editor_lang = "zh-cn";
}
function HTMLArea(textarea, config) {
if (HTMLArea.checkSupportedBrowser()) {
if (typeof config == "undefined") {
this.config = new HTMLArea.Config();
} else {
this.config = config;
}
this._htmlArea = null;
this._textArea = textarea;
this._editMode = "wysiwyg";
this.plugins = {};
this._timerToolbar = null;
this._timerUndo = null;
this._undoQueue = new Array(this.config.undoSteps);
this._undoPos = -1;
this._customUndo = true;
this._mdoc = document;
this.doctype = '';
}
};
(function() {
var scripts = HTMLArea._scripts = [ _editor_url + "htmlarea.js",
_editor_url + "dialog.js",
_editor_url + "popupwin.js",
_editor_url + "lang/" + _editor_lang + ".js" ];
var head = document.getElementsByTagName("head")[0];
for (var i = 1; i < scripts.length; ++i) {
var script = document.createElement("script");
script.src = scripts[i];
head.appendChild(script);
}
})();
HTMLArea.RE_tagName = /(<\/|<)\s*([^ \t\n>]+)/ig;
HTMLArea.RE_doctype = /(<!doctype((.|\n)*?)>)\n?/i;
HTMLArea.RE_head = /<head>((.|\n)*?)<\/head>/i;
HTMLArea.RE_body = /<body>((.|\n)*?)<\/body>/i;
HTMLArea.Config = function () {
this.version = "3.0";
this.width = "auto";
this.height = "auto";
this.statusBar = true;
this.undoSteps = 20;
this.undoTimeout = 500;
this.sizeIncludesToolbar = true;
this.fullPage = false;
this.pageStyle = "body { font-family: Arial; font-size: 10pt;}.hdwiki_tmml{background-color: #94B888;float: left;height: 14px;border: 1px solid #316733;font-family:\"宋体\";font-size:14px;color: #FFFFFF;padding:4px;width: auto;}.innerlink:link{color:#ff0000;text-decoration:none}.innerlink:visited {color:#ff0000;text-decoration:none}.innerlink:hover{color:#ff0000;text-decoration:underline}.outerlink:link{color:#0000ff;text-decoration:none}.outerlink:visited{color:#0000ff;text-decoration:none}.outerlink:hover{color:#0000ff;text-decoration:underline}";
this.killWordOnPaste = true;
this.baseURL = document.baseURI || document.URL;
if (this.baseURL && this.baseURL.match(/(.*)\/([^\/]+)/))
this.baseURL = RegExp.$1 + "/";
this.imgURL = "images/";
this.popupURL = "popups/";
this.toolbar = [
[ "fontname", "space",
"fontsize", "space",
"undo","redo","separator",
"bold", "italic","underline", "separator",
"cut","copy", "paste","space", "justifyleft","justifycenter", "justifyright", "separator",
"insertorderedlist", "insertunorderedlist","separator",
"forecolor", "hilitecolor","separator",
"innerlink","outerlink","createsection","createlink", "insertimage", "inserttable","separator",
"htmlmode"]
];
this.fontname = {
"Arial": 'arial,helvetica,sans-serif',
"Courier New": 'courier new,courier,monospace',
"Georgia": 'georgia,times new roman,times,serif',
"Tahoma": 'tahoma,arial,helvetica,sans-serif',
"New Roman": 'times new roman,times,serif',
"Verdana": 'verdana,arial,helvetica,sans-serif',
"impact": 'impact',
"WingDings": 'wingdings',
"宋体": '宋体,sans-serif',
"黑体": '黑体,sans-serif',
"仿宋": '仿宋_GB2312,sans-serif',
"楷体": '楷体_GB2312,sans-serif',
"新宋体": '新宋体:sans-serif'
};
this.fontsize = {
"1 (8 pt)": "1",
"2 (10 pt)": "2",
"3 (12 pt)": "3",
"4 (14 pt)": "4",
"5 (18 pt)": "5",
"6 (24 pt)": "6",
"7 (36 pt)": "7"
};
this.formatblock = {
"一级标题": "h1",
"二级标题": "h2",
"三级标题": "h3",
"四级标题": "h4",
"五级标题": "h5",
"六级标题": "h6",
"常规文本": "p",
"地址": "address",
"格式文本": "pre"
};
this.customSelects = {};
function cut_copy_paste(e, cmd, obj) {
e.execCommand(cmd);
};
this.btnList = {
bold: [ "Bold", "ed_format_bold.gif", false, function(e) {e.execCommand("bold");} ],
italic: [ "Italic", "ed_format_italic.gif", false, function(e) {e.execCommand("italic");} ],
underline: [ "Underline", "ed_format_underline.gif", false, function(e) {e.execCommand("underline");} ],
strikethrough: [ "Strikethrough", "ed_format_strike.gif", false, function(e) {e.execCommand("strikethrough");} ],
subscript: [ "Subscript", "ed_format_sub.gif", false, function(e) {e.execCommand("subscript");} ],
superscript: [ "Superscript", "ed_format_sup.gif", false, function(e) {e.execCommand("superscript");} ],
justifyleft: [ "Justify Left", "ed_align_left.gif", false, function(e) {e.execCommand("justifyleft");} ],
justifycenter: [ "Justify Center", "ed_align_center.gif", false, function(e) {e.execCommand("justifycenter");} ],
justifyright: [ "Justify Right", "ed_align_right.gif", false, function(e) {e.execCommand("justifyright");} ],
justifyfull: [ "Justify Full", "ed_align_justify.gif", false, function(e) {e.execCommand("justifyfull");} ],
insertorderedlist: [ "Ordered List", "ed_list_num.gif", false, function(e) {e.execCommand("insertorderedlist");} ],
insertunorderedlist: [ "Bulleted List", "ed_list_bullet.gif", false, function(e) {e.execCommand("insertunorderedlist");} ],
outdent: [ "Decrease Indent", "ed_indent_less.gif", false, function(e) {e.execCommand("outdent");} ],
indent: [ "Increase Indent", "ed_indent_more.gif", false, function(e) {e.execCommand("indent");} ],
forecolor: [ "Font Color", "ed_color_fg.gif", false, function(e) {e.execCommand("forecolor");} ],
hilitecolor: [ "Background Color", "ed_color_bg.gif", false, function(e) {e.execCommand("hilitecolor");} ],
inserthorizontalrule: [ "Horizontal Rule", "ed_hr.gif", false, function(e) {e.execCommand("inserthorizontalrule");} ],
createlink: [ "Insert Web Link", "ed_link.gif", false, function(e) {e.execCommand("createlink", true);} ],
insertimage: [ "Insert/Modify Image", "ed_image.gif", false, function(e) {e.execCommand("insertimage");} ],
inserttable: [ "Insert Table", "insert_table.gif", false, function(e) {e.execCommand("inserttable");} ],
htmlmode: [ "Toggle HTML Source", "ed_html.gif", true, function(e) {e.execCommand("htmlmode");} ],
popupeditor: [ "Enlarge Editor", "fullscreen_maximize.gif", true, function(e) {e.execCommand("popupeditor");} ],
showhelp: [ "Help using editor", "ed_help.gif", true, function(e) {e.execCommand("showhelp");} ],
undo: [ "Undoes your last action", "ed_undo.gif", false, function(e) {e.execCommand("undo");} ],
redo: [ "Redoes your last action", "ed_redo.gif", false, function(e) {e.execCommand("redo");} ],
cut: [ "Cut selection", "ed_cut.gif", false, cut_copy_paste ],
copy: [ "Copy selection", "ed_copy.gif", false, cut_copy_paste ],
paste: [ "Paste from clipboard", "ed_paste.gif", false, cut_copy_paste ],
lefttoright: [ "Direction left to right", "ed_left_to_right.gif", false, function(e) {e.execCommand("lefttoright");} ],
righttoleft: [ "Direction right to left", "ed_right_to_left.gif", false, function(e) {e.execCommand("righttoleft");} ],
innerlink: [ "Addinner link", "innerlink.gif", false, function(e) {e.execCommand("innerlink");} ],
outerlink: [ "Add outer link", "outerlink.gif", false, function(e) {e.execCommand("outerlink");} ],
createsection:[ "Create section", "section.gif", false, function(e) {e.execCommand("createsection");} ]
};
for (var i in this.btnList) {
var btn = this.btnList[i];
btn[1] = _editor_url + this.imgURL + btn[1];
if (typeof HTMLArea.I18N.tooltips[i] != "undefined") {
btn[0] = HTMLArea.I18N.tooltips[i];
}
}
};
HTMLArea.Config.prototype.registerButton = function(id, tooltip, image, textMode, action, context) {
var the_id;
if (typeof id == "string") {
the_id = id;
} else if (typeof id == "object") {
the_id = id.id;
} else {
alert("ERROR [HTMLArea.Config::registerButton]:\ninvalid arguments");
return false;
}
if (typeof this.customSelects[the_id] != "undefined") {
}
if (typeof this.btnList[the_id] != "undefined") {
}
switch (typeof id) {
case "string": this.btnList[id] = [ tooltip, image, textMode, action, context ]; break;
case "object": this.btnList[id.id] = [ id.tooltip, id.image, id.textMode, id.action, id.context ]; break;
}
};
HTMLArea.Config.prototype.registerDropdown = function(object) {
if (typeof this.customSelects[object.id] != "undefined") {
}
if (typeof this.btnList[object.id] != "undefined") {
}
this.customSelects[object.id] = object;
};
HTMLArea.Config.prototype.hideSomeButtons = function(remove) {
var toolbar = this.toolbar;
for (var i in toolbar) {
var line = toolbar[i];
for (var j = line.length; --j >= 0; ) {
if (remove.indexOf(" " + line[j] + " ") >= 0) {
var len = 1;
if (/separator|space/.test(line[j + 1])) {
len = 2;
}
line.splice(j, len);
}
}
}
};
HTMLArea.replaceAll = function(config) {
var tas = document.getElementsByTagName("textarea");
for (var i = tas.length; i > 0; (new HTMLArea(tas[--i], config)).generate());
};
HTMLArea.replace = function(id, config) {
var ta = HTMLArea.getElementById("textarea", id);
return ta ? (new HTMLArea(ta, config)).generate() : null;
};
HTMLArea.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) {
HTMLArea._removeClass(el, "buttonDisabled");
el.disabled = false;
} else {
HTMLArea._addClass(el, "buttonDisabled");
el.disabled = true;
}
break;
case "active":
if (newval) {
HTMLArea._addClass(el, "buttonPressed");
} else {
HTMLArea._removeClass(el, "buttonPressed");
}
break;
}
this[id] = newval;
}
};
function createSelect(txt) {
var options = null;
var el = null;
var cmd = null;
var customSelects = editor.config.customSelects;
var context = null;
switch (txt) {
case "fontsize":
case "fontname":
case "formatblock":
options = editor.config[txt];
cmd = txt;
break;
default:
cmd = txt;
var dropdown = customSelects[cmd];
if (typeof dropdown != "undefined") {
options = dropdown.options;
context = dropdown.context;
} else {
alert("ERROR [createSelect]:\nCan't find the requested dropdown definition");
}
break;
}
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);
}
HTMLArea._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;
case "textindicator":
el = document.createElement("div");
el.appendChild(document.createTextNode("A"));
el.className = "indicator";
el.title = HTMLArea.I18N.tooltips.textindicator;
var obj = {
name : txt,
element : el,
enabled : true,
active : false,
text : false,
cmd : "textindicator",
state : setButtonStatus
};
tb_objects[txt] = obj;
break;
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;
HTMLArea._addEvent(el, "mouseover", function () {
if (obj.enabled) {
HTMLArea._addClass(el, "buttonHover");
}
});
HTMLArea._addEvent(el, "mouseout", function () {
if (obj.enabled) with (HTMLArea) {
_removeClass(el, "buttonHover");
_removeClass(el, "buttonActive");
(obj.active) && _addClass(el, "buttonPressed");
}
});
HTMLArea._addEvent(el, "mousedown", function (ev) {
if (obj.enabled) with (HTMLArea) {
_addClass(el, "buttonActive");
_removeClass(el, "buttonPressed");
_stopEvent(is_ie ? window.event : ev);
}
});
HTMLArea._addEvent(el, "click", function (ev) {
if (obj.enabled) with (HTMLArea) {
_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 = "18px";
img.style.height = "18px";
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];
if (/^([IT])\[(.*?)\]/.test(code)) {
var l7ed = RegExp.$1 == "I";
var label = RegExp.$2;
if (l7ed) {
label = HTMLArea.I18N.custom[label];
}
var tb_cell = document.createElement("td");
tb_row.appendChild(tb_cell);
tb_cell.className = "label";
tb_cell.innerHTML = label;
} else {
createButton(code);
}
}
}
this._htmlArea.appendChild(toolbar);
};
HTMLArea.prototype._createStatusBar = function() {
var statusbar = document.createElement("div");
statusbar.className = "statusBar";
this._htmlArea.appendChild(statusbar);
this._statusBar = statusbar;
div = document.createElement("span");
div.className = "statusBarTree";
div.innerHTML = HTMLArea.I18N.msg["Path"] + ": ";
this._statusBarTree = div;
this._statusBar.appendChild(div);
if (!this.config.statusBar) {
statusbar.style.display = "none";
}
};
HTMLArea.prototype.generate = function () {
var editor = this;
var textarea = this._textArea;
if (typeof textarea == "string") {
this._textArea = textarea = HTMLArea.getElementById("textarea", textarea);
}
this._ta_size = {
w: textarea.offsetWidth,
h: textarea.offsetHeight
};
textarea.style.display = "none";
var htmlarea = document.createElement("div");
htmlarea.className = "htmlarea";
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -