(转)新浪HtmlEditor在线编辑器jsp版(OFFICE2007风格)（二）
转自：http://hi.baidu.com/zdz8207/blog/item/7483cbfc7f7a8bf8fd037f2f.html
editor.js
window._isIE = (navigator.appName == "Microsoft Internet Explorer");
if(window._isIE) {
if(navigator.userAgent.indexOf("Opera")>-1) window._isIE = null;
if(navigator.userAgent.indexOf("Windows NT 6.0")>-1) window._isVista = true;
else window._isVista = false;
}
else {
if(navigator.userAgent.indexOf("Gecko")==-1) window._isIE = null;
}
//获取对象
function $(_sId){
return document.getElementById(_sId);
}
//获取页面ID参数
function Request(name) {
var URLParams = new Object() ;
var aParams = document.location.search.substr(1).split('&') ;
for (i=0 ; i < aParams.length ; i++) {
var aParam = aParams[i].split('=') ;
URLParams[aParam[0]] = aParam[1] ;
}
return URLParams[name];
}
var EditorEvent=new Array();
/// Word////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
EDiaryEditor = {
initialize: function (sEditorID, sParentID, bWordMode, sContent) {
this.initView(sParentID);
this.initControl(bWordMode, sContent);
},
config: {node:{}, core:{}, frame:{}},
getElement: function() {
var _this = this;
var element = null;
var sel;
var range;
if(window._isIE) {
sel = _this.iframe.contentWindow.document.selection;
switch(sel.type.toLowerCase()) {
case "none":
case "text": {
range = sel.createRange();
element = range.parentElement();
break;
}
case "control": {
var ranges = sel.createRange();
element = ranges.item(0);
break;
}
}
}
else
{
sel = _this.iframe.contentWindow.getSelection();
if(sel.rangeCount > 0)
{
range = sel.getRangeAt(0);
if(range.startContainer == range.endContainer)
{
if(range.startContainer.nodeType != 3)
{
element = range.startContainer.childNodes[range.startOffset];
}
else element = range.startContainer;
}
else element = range.commonAncestorContainer;
}
if(element && element.nodeType == 3) element = element.parentNode;
}
return element;
},
initView: function (sParentID) {
var _this = this;
var _toolbarStr = "\
<div id='EDiaryEditor'style='width: 621px;'>\
<div id='EDiaryEditorToolBar' style='position: relative; width: 621px; height: 69px; background-image: url(images/editor/toolbar_bg.gif);'>\
<div id='EDiaryEditorFontFamilyMenu' title='字体' style='position: absolute; left: 80px; top: 12px; width: 92px; height: 18px; line-height: 20px; padding-left: 4px; cursor: pointer;' action='Family' unselectable='on'>字体</div>\
<div id='EDiaryEditorFontSizeMenu' title='字号' style='position: absolute; left: 177px; top: 12px; width: 66px; height: 18px; line-height: 20px; padding-left: 4px; cursor: pointer;' action='Size' unselectable='on'>字号</div>\
<div id='EDiaryEditorFontStyleMenu' title='段落' style='position: absolute; left: 245px; top: 12px; width: 66px; height: 18px; line-height: 20px; padding-left: 4px; cursor: pointer;' action='Style' unselectable='on'>段落</div>\
</div>\
<div style='width: 621px; height: 25px; background-image: url(images/editor/title_bg.gif);'>\
</div>\
<div style='height: 245px; background-image: url(images/editor/guage.gif); padding-left: 39px; width: 582px!important ; width: 621px;' id='EDiaryEditorContent'>\
<iframe id='editor_body_area' name='editor_body_area' style='width: 550px; height: 245px; border-width: 0px; overflow-x: atuo; display: nones;' frameborder='0'></iframe>\
<textarea id='editor_body_textarea' name='editor_body' style='width: 548px; height: 247px; border-width: 0px; padding-top:8px; display: none;'></textarea>\
<input type='hidden' name='char_count' value='-1' id='EDiaryEditorStrLen'>\
</div>\
<div style='width: 621px; height: 39px; background-image: url(images/editor/editor_foot.gif)'>\
<div style='float: left; padding-top: 18px; margin-left: 18px; margin-top: 16px;display: none;'><input type='checkbox' id='ModeCheck'><label for='ModeCheck'>显示源代码</label></div>\
</div>\
</div>\
";
this.addHTML($(sParentID), _toolbarStr);
var _toolBarInfo = [
{l: 11, t: 12, w: 35, h: 51, a: "粘贴", n: "paste"},
{l: 46, t: 12, w: 21, h: 24, a: "剪切", n: "cut"},
{l: 46, t: 36, w: 21, h: 27, a: "复制", n: "copy"},
{l: 77, t: 41, w: 23, h: 23, a: "撤销", n: "undo"},
{l: 102, t: 41, w: 23, h: 23, a: "重做", n: "redo"},
{l: 133, t: 41, w: 23, h: 23, a: "粗体", n: "bold"},
{l: 158, t: 41, w: 24, h: 23, a: "斜体", n: "italic"},
{l: 184, t: 41, w: 24, h: 23, a: "下划线", n: "underline"},
{l: 210, t: 41, w: 24, h: 23, a: "文字颜色", n: "forecolor", c: "FColor"},
{l: 236, t: 41, w: 24, h: 23, a: "背景颜色", n: "hilitecolor", c: "HColor"},
{l: 262, t: 41, w: 24, h: 23, a: "横线", n: "inserthorizontalrule"},
{l: 288, t: 41, w: 24, h: 23, a: "插入表情", n: "face", c: "FaceBG"},
{l: 320, t: 41, w: 23, h: 23, a: "左对齐", n: "justifyleft"},
{l: 345, t: 41, w: 24, h: 23, a: "居中对齐", n: "justifycenter"},
{l: 371, t: 41, w: 24, h: 23, a: "右对齐", n: "justifyright"},
{l: 397, t: 41, w: 24, h: 23, a: "两端对齐", n: "justifyfull"},
{l: 429, t: 41, w: 59, h: 23, a: "图片排版", n: "justifyformat", c: "Justify"},
{l: 320, t: 10, w: 23, h: 23, a: "编号", n: "insertorderedlist"},
{l: 345, t: 10, w: 24, h: 23, a: "项目符号", n: "insertunorderedlist"},
{l: 371, t: 10, w: 24, h: 23, a: "减少缩进", n: "outdent"},
{l: 397, t: 10, w: 24, h: 23, a: "增加缩进", n: "indent"},
{l: 429, t: 10, w: 23, h: 23, a: "插入图片", n: "img"},
{l: 454, t: 10, w: 24, h: 23, a: "插入链接", n: "link"},
{l: 480, t: 10, w: 24, h: 23, a: "插入表格", n: "table"},
{l: 531, t: 10, w: 24, h: 23, a: "插入搜索", n: "iask"},
{l: 506, t: 10, w: 23, h: 23, a: "插入文本框", n: "textarea"},
{l: 496, t: 41, w: 59, h: 23, a: "预览文章", n: "view"},
{l: 563, t: 10, w: 48, h: 54, a: "段落化", n: "ParaFormatting"},
];
_this.config.toolbarinfo = _toolBarInfo;
var _toolbarStr2 = new String;
for(var key in _toolBarInfo) {
_toolbarStr2 += "<img src='images/editor/blank.gif' title='" + _toolBarInfo[key]["a"] + "' alt='" + _toolBarInfo[key]["a"] + "' id='EDiaryEditor" + _toolBarInfo[key]["n"] + "' style='position: absolute; left: " + _toolBarInfo[key]["l"] + "px; top: " + _toolBarInfo[key]["t"] + "px; width: " + _toolBarInfo[key]["w"] + "px; height: " + _toolBarInfo[key]["h"] + "px;' func='" + _toolBarInfo[key]["n"] + "' action='" + _toolBarInfo[key]["c"] + "'>";
}
this.addHTML($("EDiaryEditorToolBar"), _toolbarStr2);
var _toolMenuInfo = {
Family: [
{t: "宋体"},
{t: "黑体"},
{t: "隶书"},
{t: "楷体"},
{t: "幼圆"},
{t: "Arial"},
{t: "Impact"},
{t: "Georgia"},
{t: "Verdana"},
{t: "Courier New"},
{t: "Times New Roman"}
],
Size: [
{t: "10px",n:"(六号)"},
{t: "12px",n:"(小五)"},
{t: "14px",n:"(五号)"},
{t: "16px",n:"(小四)"},
{t: "18px",n:""},
{t: "20px",n:"(小三)"},
{t: "22px",n:""},
{t: "24px",n:"(小二)"},
{t: "32px",n:"(小一)"},
{t: "36px",n:"(一号)"}
],
Style: [
{t: "div",n:"取消段落", s: "14"},
{t: "H1",n:"段落1", s: "32"},
{t: "H2",n:"段落2", s: "24"},
{t: "H3",n:"段落3", s: "18"},
{t: "H4",n:"段落4", s: "16"},
{t: "H5",n:"段落5", s: "12"},
{t: "H6",n:"段落6", s: "10"}
]
};
var _toolbarStr3 = new String;
var node;
for(key in _toolMenuInfo) {
for(var key2 in _toolMenuInfo[key]) {
node = _toolMenuInfo[key][key2];
if(key == "Family") {
key2 = parseInt(key2);
if(key2 == 0) {// head
_toolbarStr3 += "\
<!-- Font Family Menu -->\
<div style='cursor: default; position: absolute; width: 163px; top: 32px; left: 78px; display: none; background:#ffffff;' id='EDiaryEditorFontFamilyItem'>\
<div style='text-align: center; height: 18px; background-image: url(images/editor/menu_title.gif); padding-top: 4px; padding-left: 6px;'><b>字体</b></div>\
<div style=' height: 256px!important ;height: 250px; background-image: url(images/editor/menu_bg.gif);' id='EDiaryEditorFontFamilyBox'>\
";
}
if(key2 < _toolMenuInfo[key].length) {// body
_toolbarStr3 += "\
<div style='text-align: center; background: #f4f4f4; border: 1px solid #ccc; margin: 2px; padding-bottom:2px;padding-top:2px;padding-left:4px;padding-right:4px; width: 149px!important ; width: 158px; font-family: " + node["t"] + "' unselectable='on' action='family' value='" + node["t"] + "'>" + node["t"] + "</div>\
";
}
if(key2 + 1 == _toolMenuInfo[key].length) {// foot
_toolbarStr3 += "\
</div>\
<div style='height: 10px; background-image: url(images/editor/menu_foot.gif); font-size: 1px;'></div>\
</div>\
";
}
}
if(key == "Size") {
key2 = parseInt(key2);
if(key2 == 0) {// head
_toolbarStr3 += "\
<!-- Font Size Menu -->\
<div style='cursor: default; position: absolute; width: 163px; top: 32px; left: 175px; display: none; background:#ffffff;' id='EDiaryEditorFontSizeItem'>\
<div style='text-align: center; height: 18px; background-image: url(images/editor/menu_title.gif); padding-top: 4px; padding-left: 6px;'><b>字号</b></div>\
<div style='height: 283px!important ;height: 278px; background-image: url(images/editor/menu_bg.gif);' id='EDiaryEditorFontSizeBox'>\
";
}
if(key2 < _toolMenuInfo[key].length) {// body
_toolbarStr3 += "<div style='text-align: center; background: #f4f4f4; border: 1px solid #ccc; margin: 2px; padding-bottom:0px;padding-top:0px;padding-left:4px;padding-right:4px; width: 149px!important ; width: 158px; font-size: " + node["t"] + ";' unselectable='on' action='size' value='" + node["t"] + "'>" + node["t"] + "<span unselectable='on' style='font-size:12px'>"+node["n"]+"</span></div>";
}
if(key2 + 1 == _toolMenuInfo[key].length) {// foot
_toolbarStr3 += "\
</div>\
<div style='height: 10px; background-image: url(images/editor/menu_foot.gif); font-size: 1px;'></div>\
</div>\
";
}
}
if(key == "Style") {
key2 = parseInt(key2);
if(key2 == 0) {// head
_toolbarStr3 += "\
<!-- Font Style Menu -->\
<div style='cursor: default; position: absolute; width: 163px; top: 32px; left: 243px; display: none; background:#ffffff;' id='EDiaryEditorFontStyleItem'>\
<div style='text-align: center; height: 20px; background-image: url(images/editor/menu_title.gif); padding-top: 6px; padding-left: 6px;'><b>段落</b></div>\
<div style='height: 235px!important ;height: 187px; background-image: url(images/editor/menu_bg.gif);' id='EDiaryEditorFontStyleBox'>\
";
}
if(key2 < _toolMenuInfo[key].length) {// body
_toolbarStr3 += "<div style='text-align: center; background: #f4f4f4; border: 1px solid #ccc; margin: 2px; padding: 4px; width: 149px!important ; width: 158px; font-size: " + node["s"] + "px;' unselectable='on' action='style' value='" + node["t"] + "'>" + node["n"] + "</div>";
}
if(key2 + 1 == _toolMenuInfo[key].length) {// foot
_toolbarStr3 += "\
</div>\
<div style='height: 10px; background-image: url(images/editor/menu_foot.gif); font-size: 1px;'></div>\
</div>\
";
}
}
}
}
this.addHTML($("EDiaryEditorToolBar"), _toolbarStr3);
var _toolbarStr5 = "\
<div style='position: absolute; background-image: url(editor/images/blank.gif); left: 0px; top: 0px; width: " + $("EDiaryEditor").offsetWidth + "px; height: " + $("EDiaryEditor").offsetHeight + "px; display: none;' id='EDiaryEditorDialog'>\
<div style='position: absolute; background-image: url(images/editor/dilog_bg.gif); left: 160px; top: 140px; width: 310px; height: 157px; display: none;' id='EDiaryEditorIMGDialog'>\
<iframe src='editor/img.html'></iframe>\
</div>\
</div>\
";
//this.addHTML($("EDiaryEditorToolBar"), _toolbarStr5);
var _toolbarStr6 = "<div style='position: absolute; background: #fff; left: 234px; top: 66px; display: none;' id='EDiaryEditorforecolorItem'>";
var k = 1;
var c = ["","#FF9999","#FFFF80","#80FF80","#80FFFF","#0080FF","#FF80C0","#FF0000","#CCCC66","#00FF40","#0099CC","#9999CC","#FF00FF","#CC3333","#FF9933","#009999","#006699","#9999FF","#990033","#990000","#FF9900","#009900","#0000FF","#0000CC","#990099","#660000","#006666","#999900","#660099","#339999","#66CCCC","#000000","#494949","#767676","#A6A6A6","#C7C7C7","#FFFFFF"];
for(var i = 0; i < 6; i ++) {
for(var j = 0; j < 6; j++) {
_toolbarStr6 += ("<img src='editor/images/blank.gif' onclick='EDiaryEditor.runCMD(\"forecolor\", \"" + c[k] + "\");' style='background: " + c[k] + ";border: 1px solid #999; margin: 0px; padding: 0px; margin-top: 1px; margin-left: 1px; width: 14px; height: 14px; cursor: hand; cursor: pointer;' />");
k ++;
}
_toolbarStr6 += ('<br />');
}
_toolbarStr6 += "</div>";
this.addHTML($("EDiaryEditorToolBar"), _toolbarStr6);
var _toolbarStr7 = "<div style='position: absolute; background: #fff; left: 260px; top: 66px; display: none;' id='EDiaryEditorhilitecolorItem'>";
var k = 1;
var c = ["","#FF9999","#FFFF80","#80FF80","#80FFFF","#0080FF","#FF80C0","#FF0000","#CCCC66","#00FF40","#0099CC","#9999CC","#FF00FF","#CC3333","#FF9933","#009999","#006699","#9999FF","#990033","#990000","#FF9900","#009900","#0000FF","#0000CC","#990099","#660000","#006666","#999900","#660099","#339999","#66CCCC","#000000","#494949","#767676","#A6A6A6","#C7C7C7","#FFFFFF"];
for(var i = 0; i < 6; i ++) {
for(var j = 0; j < 6; j++) {
_toolbarStr7 += ("<img src='editor/images/blank.gif' onclick='EDiaryEditor.runCMD(\"hilitecolor\", \"" + c[k] + "\");' style='background: " + c[k] + ";border: 1px solid #999; margin: 0px; padding: 0px; margin-top: 1px; margin-left: 1px; width: 14px; height: 14px; cursor: hand; cursor: pointer;' />");
k ++;
}
_toolbarStr7 += ('<br />');
}
_toolbarStr7 += "</div>";
this.addHTML($("EDiaryEditorToolBar"), _toolbarStr7);
var _toolbarStr8 = "<div style='position: absolute; left: 312px; top: 66px; display: none;' id='EDiaryEditorfaceItem'>\
<img border='0' src='images/editor/face_bg.gif' usemap='#Map' align='center' style='cursor: hand; cursor: pointer;'/>\
<map name='Map'>\
<area shape='rect' coords='246,83,272,107' onClick='EDiaryEditor.insertFace(\"040\");'>\
<area shape='rect' coords='219,83,245,107' onClick='EDiaryEditor.insertFace(\"039\");'>\
<area shape='rect' coords='192,83,218,107' onClick='EDiaryEditor.insertFace(\"038\");'>\
<area shape='rect' coords='165,83,191,107' onClick='EDiaryEditor.insertFace(\"037\");'>\
<area shape='rect' coords='138,83,164,107' onClick='EDiaryEditor.insertFace(\"036\");'>\
<area shape='rect' coords='111,83,137,107' onClick='EDiaryEditor.insertFace(\"035\");'>\
<area shape='rect' coords='84,83,110,107' onClick='EDiaryEditor.insertFace(\"034\");'>\
<area shape='rect' coords='57,83,83,107' onClick='EDiaryEditor.insertFace(\"033\");'>\
<area shape='rect' coords='30,83,56,107' onClick='EDiaryEditor.insertFace(\"032\");'>\
<area shape='rect' coords='3,83,29,107' onClick='EDiaryEditor.insertFace(\"031\");'>\
<area shape='rect' coords='246,56,272,80' onClick='EDiaryEditor.insertFace(\"030\");'>\
<area shape='rect' coords='219,56,245,80' onClick='EDiaryEditor.insertFace(\"029\");'>\
<area shape='rect' coords='192,56,218,80' onClick='EDiaryEditor.insertFace(\"028\");'>\
<area shape='rect' coords='165,56,191,80' onClick='EDiaryEditor.insertFace(\"027\");'>\
<area shape='rect' coords='138,56,164,80' onClick='EDiaryEditor.insertFace(\"026\");'>\
<area shape='rect' coords='111,56,137,80' onClick='EDiaryEditor.insertFace(\"025\");'>\
<area shape='rect' coords='84,56,110,80' onClick='EDiaryEditor.insertFace(\"024\");'>\
<area shape='rect' coords='57,56,83,80' onClick='EDiaryEditor.insertFace(\"023\");'>\
<area shape='rect' coords='30,56,56,80' onClick='EDiaryEditor.insertFace(\"022\");'>\
<area shape='rect' coords='3,56,29,80' onClick='EDiaryEditor.insertFace(\"021\");'>\
<area shape='rect' coords='246,30,272,54' onClick='EDiaryEditor.insertFace(\"020\");'>\
<area shape='rect' coords='219,30,245,54' onClick='EDiaryEditor.insertFace(\"019\");'>\
<area shape='rect' coords='192,30,218,54' onClick='EDiaryEditor.insertFace(\"018\");'>\
<area shape='rect' coords='165,30,191,54' onClick='EDiaryEditor.insertFace(\"017\");'>\
<area shape='rect' coords='138,30,164,54' onClick='EDiaryEditor.insertFace(\"016\");'>\
<area shape='rect' coords='111,30,137,54' onClick='EDiaryEditor.insertFace(\"015\");'>\
<area shape='rect' coords='84,30,110,54' onClick='EDiaryEditor.insertFace(\"014\");'>\
<area shape='rect' coords='57,30,83,54' onClick='EDiaryEditor.insertFace(\"013\");'>\
<area shape='rect' coords='30,30,56,54' onClick='EDiaryEditor.insertFace(\"012\");'>\
<area shape='rect' coords='3,30,29,54' onClick='EDiaryEditor.insertFace(\"011\");'>\
<area shape='rect' coords='246,4,272,28' onClick='EDiaryEditor.insertFace(\"010\");'>\
<area shape='rect' coords='219,4,245,28' onClick='EDiaryEditor.insertFace(\"009\");'>\
<area shape='rect' coords='192,4,218,28' onClick='EDiaryEditor.insertFace(\"008\");'>\
<area shape='rect' coords='165,4,191,28' onClick='EDiaryEditor.insertFace(\"007\");'>\
<area shape='rect' coords='138,4,164,28' onClick='EDiaryEditor.insertFace(\"006\");'>\
<area shape='rect' coords='111,4,137,28' onClick='EDiaryEditor.insertFace(\"005\");'>\
<area shape='rect' coords='84,4,110,28' onClick='EDiaryEditor.insertFace(\"004\");'>\
<area shape='rect' coords='57,4,83,28' onClick='EDiaryEditor.insertFace(\"003\");'>\
<area shape='rect' coords='30,4,56,28' onClick='EDiaryEditor.insertFace(\"002\");'>\
<area shape='rect' coords='3,4,29,28' onClick='EDiaryEditor.insertFace(\"001\");'>\
</map>\
</div>\
";
this.addHTML($("EDiaryEditorToolBar"), _toolbarStr8);
var _toolbarStr9 = "<div style='position: absolute; left: 0px; top: 0px; width: 621px; background: url(editor/images/blank.gif); height: 69px; display: none;' id='EDiaryEditorToolBarMask'></div>";
this.addHTML($("EDiaryEditorToolBar"), _toolbarStr9);
var _toolbarStr9 = "<div style='position: absolute; left: 483px; top: 41px; display: none;' id='EDiaryEditorRsave' title='恢复上一次未成功发表内容'><img src='images/editor/rsave.gif' csrc='/images/rsave.gif' bsrc='/images/rsave_over.gif' onmouseover='this.src=this.bsrc' onmouseout='this.src=this.csrc'></div>";
this.addHTML($("EDiaryEditorToolBar"), _toolbarStr9);
var _toolbarStr4 = "\
<div style='position: absolute; width: 198px; height: 95px; top: 66px; left: 421px; display: none; background-image: url(images/editor/justifyformat_bg.gif);' id='EDiaryEditorJustifyFormatItem'>\
<div style='float: left; margin-left: 12px; margin-top: 29px; width: 42px; height: 50px; cursor: pointer;' id='EDiaryEditorIMGLeft' unselectable='on'></div>\
<div style='float: left; margin-left: 11px; margin-top: 29px; width: 42px; height: 50px; cursor: pointer;' id='EDiaryEditorIMGCenter' unselectable='on'></div>\
<div style='float: left; margin-left: 24px; margin-top: 29px; width: 43px; height: 50px; cursor: pointer;' id='EDiaryEditorIMGRight' unselectable='on'></div>\
</div>\
";
this.addHTML($("EDiaryEditorToolBar"), _toolbarStr4);
浙公网安备 33010602011771号