📄 csdnubbeditor.js
字号:
{
var item = "<td title='size:{0}' onclick=\"CsdnUbbEditor.instance('" + this.hashCode + "').fontsize('{0}')\">{0}</td>";
var div = document.createElement("DIV"), a = [], me = this;
div.className = "CsdnUbbEditorFontsizeLayer";
div.style.display = "none";
div.id = "CsdnUbbEditorFontsizeLayer_" + this.hashCode;
div.onclick = function(e) { (window.event || e).cancelBubble = true; }
a.push("<table border='0' cellpadding='0' cellspacing='6'>");
a.push("<tr>");
a.push(item.format("10px"));
a.push(item.format("11px"));
a.push(item.format("12px"));
a.push(item.format("13px"));
a.push("</tr>");
a.push("<tr>");
a.push(item.format("14px"));
a.push(item.format("16px"));
a.push(item.format("18px"));
a.push(item.format("24px"));
a.push("</tr>");
a.push("</table>");
a=a.join("");
div.innerHTML = a;
document.body.insertBefore(div, document.body.firstChild);
document.attachEvent("onclick", function() { me.hideLayer(div.id); } );
};
CsdnUbbEditor.prototype.colorLayer = function()
{
var s = "<td title=\"{1}\" onclick=\"CsdnUbbEditor.instance('" + this.hashCode +
"').color('{0}')\" style=\"background-color: {0}\"> </td>"
var div = document.createElement("DIV"), a = [], me = this;
div.className = "CsdnUbbEditorColorLayer";
div.style.display = "none";
div.id = "CsdnUbbEditorColorLayer_" + this.hashCode;
div.onclick = function(e) { (window.event || e).cancelBubble = true; }
a.push("<table border='0' cellpadding='0' cellspacing='6'>");
a.push("<tr>");
a.push(s.format("#000000", "\u9ed1\u8272"));
a.push(s.format("#993300", "\u8910\u8272"));
a.push(s.format("#333300", "\u6a44\u6984\u8272"));
a.push(s.format("#003300", "\u6df1\u7eff"));
a.push(s.format("#003366", "\u6df1\u9752"));
a.push(s.format("#000080", "\u6df1\u84dd"));
a.push(s.format("#333399", "\u975b\u84dd"));
a.push(s.format("#333333", "\u7070\u8272-80%"));
a.push("</tr>");
a.push("<tr>");
a.push(s.format("#800000", "\u6df1\u7ea2"));
a.push(s.format("#FF6600", "\u6a59\u8272"));
a.push(s.format("#808000", "\u6df1\u9ec4"));
a.push(s.format("#008000", "\u7eff\u8272"));
a.push(s.format("#008080", "\u7eff\u8272"));
a.push(s.format("#0000FF", "\u84dd\u8272"));
a.push(s.format("#666699", "\u84dd-\u7070"));
a.push(s.format("#808080", "\u7070\u8272-50%"));
a.push("</tr>");
a.push("<tr>");
a.push(s.format("#FF0000", "\u7ea2\u8272"));
a.push(s.format("#FF9900", "\u6d45\u6a59"));
a.push(s.format("#99CC00", "\u9178\u6a59"));
a.push(s.format("#339966", "\u6d77\u7eff"));
a.push(s.format("#33CCCC", "\u6c34\u7eff\u8272"));
a.push(s.format("#3366FF", "\u6d45\u84dd"));
a.push(s.format("#800080", "\u7d2b\u7f57\u5170"));
a.push(s.format("#999999", "\u7070\u8272-40%"));
a.push("</tr>");
a.push("<tr>");
a.push(s.format("#FF00FF", "\u7c89\u7ea2"));
a.push(s.format("#FFCC00", "\u91d1\u8272"));
a.push(s.format("#FFFF00", "\u9ec4\u8272"));
a.push(s.format("#00FF00", "\u9c9c\u7eff"));
a.push(s.format("#00FFFF", "\u9752\u7eff"));
a.push(s.format("#00CCFF", "\u5929\u84dd"));
a.push(s.format("#993366", "\u6885\u7ea2"));
a.push(s.format("#C0C0C0", "\u7070\u8272-25%"));
a.push("</tr>");
a.push("<tr>");
a.push(s.format("#FF99CC", "\u7396\u7470\u7ea2"));
a.push(s.format("#FFCC99", "\u8336\u8272"));
a.push(s.format("#FFFF99", "\u6d45\u9ec4"));
a.push(s.format("#CCFFCC", "\u6d45\u7eff"));
a.push(s.format("#CCFFFF", "\u6d45\u9752\u7eff"));
a.push(s.format("#99CCFF", "\u6de1\u84dd"));
a.push(s.format("#CC99FF", "\u6de1\u7d2b"));
a.push(s.format("#FFFFFF", "\u767d\u8272"));
a.push("</tr>");
a.push("<tr>");
a.push("<td colspan='8' title='\u683c\u5f0f\uff1a #RRGGBB'>");
a.push("<input size='7' class='text' maxlength='7' value='#' />");
a.push("<input type='button' class='button' onclick=\"CsdnUbbEditor.instance('" + this.hashCode +
"').customColor(this)\" value='\u786e \u5b9a' /></td>");
a.push("</tr>");
a.push("</table>");
a = a.join("");
div.innerHTML = a;
document.body.insertBefore(div, document.body.firstChild);
document.attachEvent("onclick", function(){me.hideLayer("CsdnUbbEditorColorLayer_" + me.hashCode);});
};
var t = "<a><input onfocus='this.blur()' type='button' title='{2}' value=' ' class='menuitem {1}' onclick='CsdnUbbEditor.instance(\"{0}\").execCommand(event, \"{1}\", this)' /></a>";
CsdnUbbEditor.directorHTML =
{
fontsize : t.format("{0}", "fontsize", "\u5b57\u4f53\u5927\u5c0f"),
bold : t.format("{0}", "bold", "\u7c97\u4f53"),
italic : t.format("{0}", "italic", "\u659c\u4f53"),
underline : t.format("{0}", "underline", "\u4e0b\u5212\u7ebf"),
strikethrough : t.format("{0}", "strikethrough", "\u5220\u9664\u7ebf"),
color : t.format("{0}", "color", "\u5b57\u4f53\u989c\u8272"),
code : t.format("{0}", "code", "\u63d2\u5165\u6e90\u4ee3\u7801"),
url : t.format("{0}", "url", "\u63d2\u5165\u8d85\u94fe\u63a5"),
email : t.format("{0}", "email", "\u63d2\u5165\u7535\u5b50\u90ae\u4ef6\u5730\u5740"),
image : t.format("{0}", "image", "\u63d2\u5165\u56fe\u7247"),
swf : t.format("{0}", "swf", "\u63d2\u5165 FLASH"),
movie : t.format("{0}", "movie", "\u63d2\u5165\u5f71\u97f3\u5a92\u4f53\u6587\u4ef6\u94fe\u63a5"),
left : t.format("{0}", "left", "\u5de6\u5bf9\u9f50"),
right : t.format("{0}", "right", "\u53f3\u5bf9\u9f50"),
center : t.format("{0}", "center", "\u5c45\u4e2d\u5bf9\u9f50"),
help : "<a><input onfocus='this.blur()' type='button' title='help' value=' ' class='menuitem help' onclick='CsdnUbbEditor.instance(\"{0}\").help()' /></a>",
space : "<input onfocus='this.blur()' type='button' title='' value=' ' class='menuitem space' disabled='true' />",
increase : "<a><input onfocus='this.blur()' type='button' title='\u653e\u5927\u7f16\u8f91\u533a' value=' ' class='menuitem increase' onclick='CsdnUbbEditor.instance(\"{0}\").increase()' /></a>",
decrease : "<a><input onfocus='this.blur()' type='button' title='\u7f29\u5c0f\u7f16\u8f91\u533a' value=' ' class='menuitem decrease' onclick='CsdnUbbEditor.instance(\"{0}\").decrease()' /></a>"
}
CsdnUbbEditor.director =
{
fontsize : { open: "[size={0}]", close: "[/size]" },
bold : { open: "[b]", close: "[/b]" },
italic : { open: "[i]", close: "[/i]" },
underline : { open: "[u]", close: "[/u]" },
strikethrough : { open: "[del]", close: "[/del]" },
color : { open: "[color={0}]", close: "[/color]" },
code : { open: "[code={0}]", close: "[/code]" },
url : { open: "[url={0}]", close: "[/url]" },
email : { open: "[email={0}]", close: "[/email]" },
image : { open: "[img={0}]", close: "[/img]" },
swf : { open: "[swf={0}]", close: "[/swf]" },
movie : { open: "[movie={0}]", close: "[/movie]" },
left : { open: "[align=left]", close: "[/align]" },
right : { open: "[align=right]", close: "[/align]" },
center : { open: "[align=center]", close: "[/align]" }
};
CsdnUbbEditor.prototype.render = function(ubblist)
{
if ("string" != typeof(ubblist) || ubblist.length == 0)
{
ubblist = "fontsize|space|bold|italic|underline|strikethrough|color|code|space" +
"|url|email|image|swf|movie|space|left|center|right|space|help|increase|decrease";
}
if (this.helpLink) ubblist += "|space|help";
ubblist = ubblist.split("|");
var a = [];
for (var i = 0; i < ubblist.length; i++)
{
var s = CsdnUbbEditor.directorHTML[ubblist[i].toLowerCase()] || "";
a.push(s.format(this.hashCode));
}
a = a.join("");
this.menubar.innerHTML = a;
a = (Math.random() + "").substr(2);
s = "<span>" + (isIE ? "\u60A8\u53EA\u80FD\u8F93\u5165" : "\u60A8\u8FD8\u53EF\u8F93\u5165") + " <strong id='wordCounter_" + this.hashCode + "'>" +
this.contentLength + "</strong> \u4e2a\u5b57\u7b26</span><input type='checkbox' name='CsdnUbbEditorDisabled' value='true' " +
(this.disabled ? " checked='checked'" : "") + " onclick='CsdnUbbEditor.disable(this, \"" +
this.hashCode + "\")' id='disable_" + a + "' /><label for='disable_" + a + "'>\u7981\u7528UBB</label> ";
if (isIE && !window.opera)
s += "<input type='checkbox' id='paste_" + a + "' /><label for='paste_" + a + "'>\u5185\u5bb9\u5b58\u5165\u526a\u8d34\u677f</label><br/>"
s += "<div style='clear: both'></div>";
this.pasteInputId = "paste_" + a;
this.statusbar.innerHTML = s;
};
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";domain=csdn.net";
}
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]);
return null;
}
CsdnUbbEditor.prototype.wraptag = function(open, close)
{
this.editor.focus();
if (document.selection)
{
if (this.selection.range)
{
this.selection.range.text = open + this.selection.range.text + close;
this.selection.range.select();
}
}
else if (typeof(this.editor.selectionStart) != "undefined")
{
var ss = this.selection.start;
var se = this.selection.end;
var st = this.selection.top;
if (ss <= se)
{
var s = this.editor.value;
var left = s.substring(0, ss);
var center = s.substring(ss, se);
var right = s.substring(se, s.length);
center = open + center + close;
this.editor.value = left + center + right;
ss += center.length;
this.editor.selectionStart = ss;
this.editor.selectionEnd = ss;
this.editor.scrollTop = st;
}
}
}
CsdnUbbEditor.prototype.execCommand = function(e, ubbtag, trigger)
{
(window.event || e).cancelBubble=true;
var e = CsdnUbbEditor.director[ubbtag];
if ("undefined" == typeof(e)) return;
this.editor.focus();
this.selection = {};
if (document.selection)
{
var sel = document.selection;
var rng = sel.createRange();
if (rng && rng.parentElement() == this.editor) this.selection.range = rng;
}
else if (typeof(this.editor.selectionStart) != "undefined")
{
this.selection.start = this.editor.selectionStart;
this.selection.end = this.editor.selectionEnd;
this.selection.top = this.editor.scrollTop;
}
else
{
alert("your browser is not support Range");
return;
}
var open = e.open, close = e.close;
switch (ubbtag)
{
case "url":
var s = prompt("\u8f93\u5165\u5b8c\u6574\u7684\u94fe\u63a5\u5730\u5740", "http://");
if (s == null) return;
open = open.format(s);
break;
case "email":
var s = prompt("\u8f93\u5165\u90ae\u4ef6\u5730\u5740\uff1a mailname@mailhost.com", "");
if (!/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(s)) return;
if (s == null) return;
open = open.format(s);
break;
case "image":
var s = prompt("\u8f93\u5165\u56fe\u7247\u7684\u5b8c\u6574\u5730\u5740", "http://");
if (s == null) return;
open = open.format(s);
break;
case "swf":
var s = prompt("\u8f93\u5165 FLASH \u6587\u4ef6\u7684 URL \u5730\u5740", "http://");
if (s == null) return;
open = open.format(s);
break;
case "movie":
var s = prompt("\u8f93\u5165\u5f71\u97f3\u5a92\u4f53\u6587\u4ef6\uff08WMA\uff0cWMV\uff0cMP3\uff0cRM\uff0cRAM\u7b49\uff09\u7684 URL \u5730\u5740", "http://");
if (s == null) return;
open = open.format(s);
break;
case "fontsize":
this.fontsizelayer(trigger);
return;
case "code":
this.codelayer(trigger);
return;
case "color":
this.colorlayer(trigger);
return;
}
this.wraptag(open, close);
}
CsdnUbbEditor.prototype.increase = function()
{
if ("undefined" == typeof(this.originalEditorHeight))
this.originalEditorHeight = this.editor.offsetHeight;
this.editor.style.height = (this.editor.offsetHeight + 100) + "px";
}
CsdnUbbEditor.prototype.decrease = function()
{
if ("undefined" == typeof(this.originalEditorHeight)) return;
var n = this.editor.offsetHeight - 100;
n = n < this.originalEditorHeight ? this.originalEditorHeight : n;
this.editor.style.height = n + "px";
}
CsdnUbbEditor.prototype.help = function()
{
if (this.helpLink) window.open(this.helpLink, "_blank");
}
CsdnUbbEditor.prototype.colorlayer = function(button)
{
var xy = CsdnUbbEditor.realOffset(button);
var layer = CsdnUbbEditor.check("CsdnUbbEditorColorLayer_" + this.hashCode);
layer.style.top = (xy.y + button.offsetHeight) + "px";
layer.style.left = xy.x + "px";
this.showLayer(layer);
}
CsdnUbbEditor.prototype.showColorLayer = function()
{
var layer = CsdnUbbEditor.check("CsdnUbbEditorColorLayer_" + this.hashCode);
if (layer.style.display!="none") return;
layer.style.display="";
}
CsdnUbbEditor.prototype.hideColorLayer = function()
{
var layer = CsdnUbbEditor.check("CsdnUbbEditorColorLayer_" + this.hashCode);
if (layer.style.display == "none") return;
layer.style.display = "none";
}
CsdnUbbEditor.prototype.color = function(color)
{
this.hideLayer("CsdnUbbEditorColorLayer_" + this.hashCode);
var rule = CsdnUbbEditor.director["color"];
this.wraptag(rule.open.format(color), rule.close);
}
CsdnUbbEditor.prototype.customColor = function(button)
{
var input = button.parentNode.childNodes[0];
if (!/^#[\da-f]{6}$/i.test(input.value))
{
input.select();
return;
}
this.color(input.value);
};
CsdnUbbEditor.prototype.codelayer = function(button)
{
var xy = CsdnUbbEditor.realOffset(button);
var layer = CsdnUbbEditor.check("CsdnUbbEditorCodeLayer_" + this.hashCode);
layer.style.top = (xy.y + button.offsetHeight) + "px";
layer.style.left = xy.x + "px";
this.showLayer(layer);
};
CsdnUbbEditor.prototype.code = function(lang)
{
this.hideLayer("CsdnUbbEditorCodeLayer_" + this.hashCode);
var rule = CsdnUbbEditor.director["code"];
this.wraptag(rule.open.format(lang), rule.close);
};
CsdnUbbEditor.prototype.fontsizelayer = function(button)
{
var xy = CsdnUbbEditor.realOffset(button);
var layer = CsdnUbbEditor.check("CsdnUbbEditorFontsizeLayer_" + this.hashCode);
layer.style.top = (xy.y + button.offsetHeight) + "px";
layer.style.left = xy.x + "px";
this.showLayer(layer);
};
CsdnUbbEditor.prototype.fontsize = function(size)
{
this.hideLayer("CsdnUbbEditorFontsizeLayer_" + this.hashCode);
var rule = CsdnUbbEditor.director["fontsize"];
this.wraptag(rule.open.format(size), rule.close);
};
CsdnUbbEditor.prototype.showLayer = function(layer)
{
var layer = CsdnUbbEditor.check(layer);
if (layer.style.display != "none") return;
layer.style.display = "";
};
CsdnUbbEditor.prototype.hideLayer = function(layer)
{
var layer = CsdnUbbEditor.check(layer);
if (layer && layer.style.display == "none") return;
layer.style.display = "none";
};
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -