简单编辑器 支持 FF + IE

2012年4月2日 发表评论 阅读评论

/*
CcEditor – Biluosky.cn
Date: 2009-09-10

cer_wdth 不要小于 405
创建编辑器 Cer_Create(隐藏areatext id) 检测编辑是否为空 Cer_Check()
提交之前执行 Cer_Submit()
*/

var cer_ecss = "font-size: 12px;";
var cer_high = 240;
var cer_wdth = 411;
var cer_icon = "http://hiphotos.baidu.com/ccdwei/pic/item/305252fb3271ef336d22eb8b.jpg";
var cer_face = "http://hiphotos.baidu.com/ccdwei/pic/item/4a2fbe12362902e5c2fd7824.jpg";
var cer_upgd = "img.html"
var cer_ffod = "http://res.mail.qq.com/zh_CN/images/mo/DEFAULT2";
var cer_menu = [["粗体", "Cer_Format('Bold')", "", 3, 2],
["斜体", "Cer_Format('Italic')", "", -19, 2],
["下划线", "Cer_Format('Underline')", "", -37, 2],
["分割符"],
["字体", "Cer_ShowNav(this)", "Cer_FFUL", -57, 1],
["字体大小", "Cer_ShowNav(this)", "Cer_FSUL", -78, 1],
["字体颜色", "Cer_ShowNav(this)", "Cer_FCUL", -238, 1],
["背景颜色", "Cer_ShowNav(this)", "Cer_FBUL", -258, 1],
["分割符"],
["对齐方式", "Cer_ShowNav(this)", "Cer_JFUL", -425, 2],
["列表模式", "Cer_ShowNav(this)", "Cer_OUUL", -448, 2],
["前后缩进", "Cer_ShowNav(this)", "Cer_OIUL", -470, 2],
["分割符"],
["图片", "Cer_ShowNav(this); Cer_SelectImage();", "Cer_IMUL", -321, 2],
["链接", "Cer_ShowNav(this); Cer_SelectLink();", "Cer_LKUL", -279, 2],
["头像", "Cer_ShowNav(this)", "Cer_FEUL", -360, 2]];
var cer_font = ["宋体", "黑体", "微软雅黑", "楷体_GB2312", "Arial", "Arial Black", "Times New Roman", "Courier New"];
var cer_ftse = [["abc", 1, 9], ["小", 2, 12], ["中", 3, 14], ["大", 5, 18], ["最大", 7, 23]];
var cer_ftjf = [["居左对齐", "Cer_Format('JustifyLeft')", -103, -2],
["居中对齐", "Cer_Format('JustifyCenter')", -123, -3],
["居右对齐", "Cer_Format('JustifyRight')", -143, -3]];
var cer_ftou = [["编号列表", "Cer_Format('InsertOrderedList')", -163, -3],
["符号列表", "Cer_Format('InsertUnorderedList')", -183, -3]];
var cer_ftoi = [["减少缩进", "Cer_Format('Outdent')", -203, -2],
["增加缩进", "Cer_Format('Indent')", -223, -2]];
var cer_colr = ['000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
'800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999',
'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'];

var cer_body = null;
var cer_bars = null;
var cer_tols = null;
var cer_edit = null;
var cer_atxt = null;
var cer_selt = null;
var cer_html = "";

document.write(‘<style type="text/css">’);
document.write(‘/*<![CDATA[*/');
document.write('.cer_body { border: 1px solid #bbb; }');
document.write('.cer_body .cer_bar { height: 23px; border-bottom: 1px solid #716f64; padding: 2px 0 1px; background-color: #f7f7f7; }');
document.write('.cer_body ul { margin: 0; padding: 0; list-style-type: none; }');
document.write('.cer_body .cer_hdr { float: left; width: 5px; height: 23px; background: url(' + cer_icon + ') no-repeat -100px 1px; margin: 0 1px; }');
document.write('.cer_body .cer_spc { float: left; width: 5px; height: 23px; }');
document.write('.cer_body .cer_cpy { float: right; font-size: 12px; line-height: 23px; font-family: Arial; margin-right: 9px; color: #99F; cursor: pointer; }');
document.write('.cer_body .cer_tls { float: left; width: 23px; height: 23px; }');
document.write('.cer_body .cer_icn { display: block; height: 23px; background: url(' + cer_icon + ') no-repeat; }');
document.write('.cer_body .cer_tls ul { position: absolute; left: -1000px; padding: 0 2px 2px 0; margin-top: 2px; background-color: #716f64; }');
document.write('.cer_body .cer_tls ul li { background-color: #fff; border: 1px solid #ebebe4; border-top: 0; border-bottom: 0; }');
document.write('.cer_body .cer_fnt a { font-size: 12px; height: 18px; padding: 2px; line-height: 18px; text-decoration: none; padding-left: 11px; color: #000; display: block; }');
document.write('.cer_body .cer_fnt b { float: left; width: 18px; height: 18px; background: url(' + cer_icon + ') no-repeat; }');
document.write('.cer_body .cer_fnt a:hover { padding: 1px; border: 1px solid #ddd; padding-left: 10px; background-color: #f1f1f1; }');
document.write('.cer_body .cer_clr li { padding-left: 3px; height: 18px; _height: auto; }');
document.write('.cer_body .cer_clr div, .cer_body .cer_fce div { font-size: 0; line-height: 0; height: 0; }');
document.write('.cer_body .cer_clr a { float: left; width: 16px; height: 16px; }');
document.write('.cer_body .cer_clr b { float: left; margin: 2px; height: 10px; width: 10px; font-size: 0; line-height: 0; border: 1px solid #ddd; }');
document.write('.cer_body .cer_clr a:hover { background-color: #ddd; }');
document.write('.cer_body .cer_lnk li { padding-left: 11px; height: 24px; padding-top: 3px; font-size: 12px; _height: auto; }');
document.write('.cer_body .cer_lnk li .txt { height: 14px; width: 165px; font-size: 12px; }');
document.write('.cer_body .cer_lnk li .ifm { }');
document.write('.cer_body .cer_lnk li .btn { font-size: 12px; height: 19px; margin-bottom: 2px; }');
document.write('.cer_body .cer_fce li { padding-left: 3px; height: 24px; _height: auto; }');
document.write('.cer_body .cer_fce a { float: left; width: 24px; height: 24px; background: url(' + cer_face + ') no-repeat; }');
document.write('/*]]>*/’);
document.write(‘</style>’);

function Cer_Create(id) {
try {
cer_atxt = Cer_GetELE(id);
} catch (e) { }
document.write(‘<div class="cer_body" style="width: ‘ + cer_wdth + ‘px;">’);
document.write(‘<ul class="cer_bar" id="cer_bar_obj">’);
document.write(‘<li class="cer_cpy">biluosky.cn</li>’);
document.write(‘<li class="cer_hdr"></li>’);
for (var i = 0; i < cer_menu.length; i++) {
if(cer_menu[i][0] == "分割符") {
document.write(‘<li class="cer_spc"></li>’);
} else {
document.write(‘<li class="cer_tls"><a onclick="’ + cer_menu[i][1] + ‘" title="’ + cer_menu[i][0] + ‘" href="javascript:;" ‘);
document.write(‘style="background-position: ‘ + cer_menu[i][3] + ‘px ‘ + cer_menu[i][4] + ‘px;" class="cer_icn"></a>’);
switch (cer_menu[i][2]) {
case "Cer_FFUL": Cer_ShowFFUL(); break;
case "Cer_FSUL": Cer_ShowFSUL(); break;
case "Cer_FCUL": Cer_ShowFCUL(false); break;
case "Cer_FBUL": Cer_ShowFCUL(true); break;
case "Cer_JFUL": Cer_ShowJFUL(); break;
case "Cer_OUUL": Cer_ShowOUUL(); break;
case "Cer_OIUL": Cer_ShowOIUL(); break;
case "Cer_IMUL": Cer_ShowIMUL(); break;
case "Cer_LKUL": Cer_ShowLKUL(); break;
case "Cer_FEUL": Cer_ShowFEUL(); break;
}
document.write(‘</li>’);
}
}
document.write(‘</ul>’);
document.write(‘<iframe onload="Cer_Init()" id="cer_edt_obj" frameborder="0" marginheight="3" marginwidth="3" width="100%" height="’ + (cer_high – 26) + ‘"></iframe>’);
document.write(‘</div>’);
}

function Cer_ShowFFUL() {
document.write(‘<ul style="width: 120px;" class="cer_fnt">’);
for (var i = 0; i < cer_font.length; i++) {
document.write(‘<li><a href="javascript:;" onclick="Cer_Format(\’FontName\’, \” + cer_font[i] + ‘\’)" id="" style="font-family: ‘ + cer_font[i] + ‘">’ + cer_font[i] + ‘</a></li>’);
}
document.write(‘</ul>’)
}

function Cer_ShowFSUL() {
document.write(‘<ul style="width: 100px;" class="cer_fnt">’);
for (var i = 0; i < cer_ftse.length; i++) {
document.write(‘<li><a href="javascript:;" onclick="Cer_Format(\’FontSize\’, ‘ + cer_ftse[i][1] + ‘)" id="" style="font-size: ‘ + cer_ftse[i][2] + ‘px; height: ‘ + (cer_ftse[i][2] + 3) + ‘px; line-height: ‘ + (cer_ftse[i][2] + 3) + ‘px;">’ + cer_ftse[i][0] + ‘</a></li>’);
}
document.write(‘</ul>’)
}

function Cer_ShowFCUL(b) {
document.write(‘<ul style="width: 136px;" class="cer_clr">’);
document.write(‘<li>’);
FStr = "ForeColor";
if (b) FStr = "BackColor";
for(var i = 1; i <= cer_colr.length; i ++ ) {
document.write(‘<a href="javascript:;" onclick="Cer_Format(\” + FStr + ‘\’, \’#’ + cer_colr[i - 1] + ‘\’)" id=""><b style="background-color: #’ + cer_colr[i - 1] + ‘;"></b></a>’);
if (i % 8 == 0 && i != cer_colr.length) document.write(‘<div style="clear: both;"></div></li><li>’);
}
document.write(‘<div style="clear: both;"></div></li>’);
document.write(‘</ul>’);
}

function Cer_ShowJFUL() {
document.write(‘<ul style="width: 100px;" class="cer_fnt">’);
for(var i = 0; i < cer_ftjf.length; i ++) {
document.write(‘<li><a href="javascript:;" onclick="’ + cer_ftjf[i][1] + ‘" id=""><b style="background-position: ‘ + cer_ftjf[i][2] + ‘px ‘ + cer_ftjf[i][3] + ‘px"></b>’ + cer_ftjf[i][0] + ‘</a></li>’);
}
document.write(‘</ul>’);
}

function Cer_ShowOUUL() {
document.write(‘<ul style="width: 100px;" class="cer_fnt">’);
for (var i = 0; i < cer_ftou.length; i++) {
document.write(‘<li><a href="javascript:;" onclick="’ + cer_ftou[i][1] + ‘" id=""><b style="background-position: ‘ + cer_ftou[i][2] + ‘px ‘ + cer_ftou[i][3] + ‘px"></b>’ + cer_ftou[i][0] + ‘</a></li>’);
}
document.write(‘</ul>’);
}

function Cer_ShowOIUL() {
document.write(‘<ul style="width: 100px;" class="cer_fnt">’);
for (var i = 0; i < cer_ftoi.length; i++) {
document.write(‘<li><a href="javascript:;" onclick="’ + cer_ftoi[i][1] + ‘" id=""><b style="background-position: ‘ + cer_ftoi[i][2] + ‘px ‘ + cer_ftoi[i][3] + ‘px"></b>’ + cer_ftoi[i][0] + ‘</a></li>’);
}
document.write(‘</ul>’);
}

function Cer_ShowIMUL() {
document.write(‘<ul style="width: 230px; margin-left: -126px;" class="cer_lnk">’);
document.write(‘<li>本地: <iframe frameborder="0" src="’ + cer_upgd + ‘" class="ifm" style="position: relative; margin-bottom: -3px;" marginheight="0" marginwidth="0" height="20" width="170" scrolling="no"></iframe></li>’);
document.write(‘<li>网络: <input type="text" id="cer_img_txt" value="http://" class="txt" /></li>’);
document.write(‘<li> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;’);
document.write(‘<input type="button" value="添加" onclick="Cer_CreateImage()" class="btn" />&nbsp; ‘);
document.write(‘<input type="button" value="去除" onclick="Cer_UnImage();" class="btn" />’);
document.write(‘</li></ul>’);
}

function Cer_ShowLKUL() {
document.write(‘<ul style="width: 230px; margin-left: -149px;" class="cer_lnk">’);
document.write(‘<li>文字: <input type="text" id="cer_lnk_txt" class="txt" /></li>’);
document.write(‘<li>链接: <input type="text" id="cer_lnk_hrf" value="http://" class="txt" /></li>’);
document.write(‘<li> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;’);
document.write(‘<input type="button" value="添加" onclick="Cer_CreateLink()" class="btn" />&nbsp; ‘);
document.write(‘<input type="button" value="去除" onclick="Cer_Format(\’Unlink\’);" class="btn" />’);
document.write(‘</li></ul>’);
}

function Cer_ShowFEUL() {
document.write(‘<ul style="width: 247px; margin-left: -173px;" class="cer_fce">’);
document.write(‘<li>’);
for (var i = 1; i <= 54; i++) {
document.write(‘<a href="javascript:;" onclick="Cer_Format(\’InsertImage\’, \” + cer_ffod + ‘/’ + i + ‘.gif\’)" style="background-position: ‘ + (i * -24) + ‘px 0;"></a>’);
if (i % 10 == 0 && i != 54) document.write(‘<div style="clear: both;"></div></li><li>’);
}
document.write(‘<div style="clear: both;"></div>’);
document.write(‘</li></ul>’);
}

function Cer_Init() {
if (cer_tols == null) {
if (cer_bars == null) cer_bars = Cer_GetELE("cer_bar_obj");
cer_tols = cer_bars.getElementsByTagName("UL");
}

    if (cer_edit == null) {
if (cer_atxt != null) cer_html = cer_atxt.value;
cer_edit = Cer_GetELE("cer_edt_obj");
cer_edit.contentWindow.document.designMode = "on";
cer_edit.contentWindow.document.open();
cer_edit.contentWindow.document.write(‘<body onConTextMenu="event.returnValue=false;" style="’ + cer_ecss + ‘"></body>’);
cer_edit.contentWindow.document.body.innerHTML = cer_html;
cer_edit.contentWindow.document.body.contentEditable = "true";
cer_edit.contentWindow.document.close();
cer_edit.contentWindow.document.body.onclick = function() { Cer_HiddenNav(); };
}
}

function Cer_ShowNav(obj) {
objUL = obj.parentNode.getElementsByTagName("UL")[0];
var b = objUL.style.left != "auto";
Cer_HiddenNav();
if (b) objUL.style.left = "auto";
}

function Cer_HiddenNav() {
for (var i = 0; i < cer_tols.length; i++) {
cer_tols[i].style.left = "-1000px";
}
}

function Cer_SelectImage() {
if (!document.all) {
var s = cer_edit.contentWindow.getSelection();
if (s.rangeCount > 0) {
cer_selt = s.getRangeAt(0);
if (cer_selt.startContainer == cer_selt.endContainer) {
if (cer_selt.startContainer.nodeType != 3) {
pELE = cer_selt.startContainer.childNodes[cer_selt.startOffset];
} else pELE = cer_selt.startContainer;
} else pELE = cer_selt.commonAncestorContainer;
}
if (pELE.tagName == "IMG") Cer_GetELE("cer_img_txt").value = pELE.src;
cer_selt = s;
return;
}
cer_edit.contentWindow.focus();
cer_selt = cer_edit.contentWindow.document.selection.createRange();
Cer_GetELE("cer_img_txt").value = "http://";
try {
Cer_GetELE("cer_img_txt").value = cer_selt.item(0).src;
} catch (e) { }
}

function Cer_UnImage() {
if (!document.all) {
if (cer_selt.rangeCount > 0) {
cer_rng = cer_selt.getRangeAt(0);
if (cer_rng.startContainer == cer_rng.endContainer) {
if (cer_rng.startContainer.nodeType != 3) {
pELE = cer_rng.startContainer.childNodes[cer_rng.startOffset];
} else pELE = cer_rng.startContainer;
} else pELE = cer_rng.commonAncestorContainer;
}
if (pELE.tagName == "IMG") pELE.parentNode.removeChild(pELE);
Cer_HiddenNav(); return;
}
try {
cer_selt.item(0).parentElement.removeChild(cer_selt.item(0));
} catch (e) { }
Cer_HiddenNav()
}

function Cer_CreateImage() {
var txt = Cer_GetELE("cer_img_txt");
var html = ‘<img src="’ + txt.value + ‘" />’;
if (!document.all) {
if (cer_selt.rangeCount > 0) {
cer_rng = cer_selt.getRangeAt(0);
if (cer_rng.startContainer == cer_rng.endContainer) {
if (cer_rng.startContainer.nodeType != 3) {
pELE = cer_rng.startContainer.childNodes[cer_rng.startOffset];
} else pELE = cer_rng.startContainer;
} else pELE = cer_rng.commonAncestorContainer;
}
if (pELE.tagName == "IMG") {
pELE.src = txt.value;
Cer_HiddenNav();
} else {
rng = cer_selt.getRangeAt(cer_selt.rangeCount – 1).cloneRange();
rng.text = rng.toString();
Cer_Format("insertHTML", html);
}
return;
}
if (txt.value == "" || txt.value == "http://") return;
try {
cer_selt.item(0).src = txt.value;
Cer_HiddenNav();
} catch (e) {
cer_selt.pasteHTML(html);
cer_selt.collapse(false);
cer_selt.select();
Cer_HiddenNav();
}
}

function Cer_SelectLink() {
var pELE = null;
var pTXT = "";
try {
cer_edit.contentWindow.focus();
cer_selt = cer_edit.contentWindow.document.selection.createRange();
pELE = cer_selt.parentElement();
pTXT = cer_selt.text;
} catch (e) {
var s = cer_edit.contentWindow.getSelection();
if (s.rangeCount > 0) {
cer_selt = s.getRangeAt(0);
if (cer_selt.startContainer == cer_selt.endContainer) {
if (cer_selt.startContainer.nodeType != 3) {
pELE = cer_selt.startContainer.childNodes[cer_selt.startOffset];
} else pELE = cer_selt.startContainer;
} else pELE = cer_selt.commonAncestorContainer;
}
if (pELE && pELE.nodeType == 3) pELE = pELE.parentNode;
pTXT = cer_selt = s;
}
Cer_GetELE("cer_lnk_txt").value = pTXT;
Cer_GetELE("cer_lnk_hrf").value = "http://";
if (pELE.tagName == "A") Cer_GetELE("cer_lnk_hrf").value = pELE.href;
}

function Cer_CreateLink() {
html = ‘<A HREF="’ + Cer_GetELE("cer_lnk_hrf").value + ‘">’ + Cer_GetELE("cer_lnk_txt").value + ‘</a>’
try {
cer_selt.pasteHTML(html);
cer_selt.collapse(false);
cer_selt.select();
Cer_HiddenNav();
} catch (e) {
rng = cer_selt.getRangeAt(cer_selt.rangeCount – 1).cloneRange();
rng.text = rng.toString();
Cer_Format("insertHTML", html);
}
}

function Cer_GetELE(id) { return document.getElementById(id); }

function Cer_Check() { return cer_edit.contentWindow.document.body.innerHTML == ""; }

function Cer_Submit() { if (cer_atxt != null) cer_atxt.value = cer_edit.contentWindow.document.body.innerHTML; }

function Cer_Format(type, para) {
cer_edit.contentWindow.focus();
!para ? cer_edit.contentWindow.document.execCommand(type, false, false) : cer_edit.contentWindow.document.execCommand(type, false, para);
Cer_HiddenNav();
}


转载请注明来自:[MSN Spaces]http://msn.shandian.biz/204.html

  1. 本文目前尚无任何评论.