學(xué)習(xí)js在線html(富文本,所見(jiàn)即所得)編輯器
更新時(shí)間：2012年12月18日 16:47:35 作者：
需要一個(gè)可以編輯同時(shí)又可顯效果的編輯框。textarea不行，它只能用來(lái)輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本,本文介紹所見(jiàn)即所得編輯器實(shí)現(xiàn)原理
你要的是所見(jiàn)即所得HTML編輯器，簡(jiǎn)單來(lái)說(shuō)需要幾個(gè)基本步驟：
1，需要一個(gè)可以編輯同時(shí)又可顯效果的編輯框。textarea不行，它只能用來(lái)輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本。
你可以使用iframe來(lái)實(shí)現(xiàn)，修改iframe的designMode屬性使其可以被編輯。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>
這樣你就可以在這個(gè)iframe區(qū)域里寫(xiě)字了。
2，選中要添加樣式的文字。通常我們用WORD編輯一段文字的樣式時(shí)，一般是先打字，再編輯樣式。所以你需要一個(gè)選中要處理文本的方法。JS的selection.createRange()可以選中文本，返回一個(gè)對(duì)象，你可以通過(guò)訪問(wèn)該對(duì)象的text屬性得到被選中的文本。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>
3，改變被選中文本的樣式。selection.createRange()選中文本，返回一個(gè)對(duì)象，該對(duì)象有一個(gè)方法execCommand()，可以用來(lái)改變被選中文本的樣式。
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>
execCommand()的常用用法：
字體--宋體、黑體、楷體等
execCommand("fontname","",字體)
字號(hào)--字號(hào)大小
execCommand("fontsize","",字號(hào))
加重
execCommand("Bold")
斜體
execCommand("Italic")
下劃線
execCommand("Underline")
刪除線
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷貝
execCommand("Copy")
粘貼
execCommand("Paste")
取消操作--IE5.0以后可以無(wú)限取消
execCommand("Undo")
重復(fù)操作
execCommand("Redo")
把上面的每個(gè)用法用按鈕來(lái)實(shí)現(xiàn)，你就已經(jīng)完成了一個(gè)簡(jiǎn)單的可視文本編輯器。
document.execCommand()用法說(shuō)明
Position 允許通過(guò)拖曳移動(dòng)絕對(duì)定位的對(duì)象。
AbsolutePosition 設(shè)定元素的 position 屬性為“absolute”(絕對(duì))。
BackColor 設(shè)置或獲取當(dāng)前選中區(qū)的背景顏色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切換當(dāng)前選中區(qū)的粗體顯示與否。
BrowseMode 目前尚未支持。
Copy 將當(dāng)前選中區(qū)復(fù)制到剪貼板。
CreateBookmark 創(chuàng)建一個(gè)書(shū)簽錨或獲取當(dāng)前選中區(qū)或插入點(diǎn)的書(shū)簽錨的名稱。
CreateLink 在當(dāng)前選中區(qū)上插入超級(jí)鏈接，或顯示一個(gè)對(duì)話框允許用戶指定要為當(dāng)前選中區(qū)插入的超級(jí)鏈接的 URL。
Cut 將當(dāng)前選中區(qū)復(fù)制到剪貼板并刪除之。
Delete 刪除當(dāng)前選中區(qū)。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 設(shè)置或獲取當(dāng)前選中區(qū)的字體。
FontSize 設(shè)置或獲取當(dāng)前選中區(qū)的字體大小。
ForeColor 設(shè)置或獲取當(dāng)前選中區(qū)的前景(文本)顏色。
FormatBlock 設(shè)置當(dāng)前塊格式化標(biāo)簽。
Indent 增加選中文本的縮進(jìn)。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。
InsertFieldset 用方框覆蓋當(dāng)前選中區(qū)。
InsertHorizontalRule 用水平線覆蓋當(dāng)前選中區(qū)。
InsertIFrame 用內(nèi)嵌框架覆蓋當(dāng)前選中區(qū)。
InsertImage 用圖像覆蓋當(dāng)前選中區(qū)。
InsertInputButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。
InsertInputCheckbox 用復(fù)選框控件覆蓋當(dāng)前選中區(qū)。
InsertInputFileUpload 用文件上載控件覆蓋當(dāng)前選中區(qū)。
InsertInputHidden 插入隱藏控件覆蓋當(dāng)前選中區(qū)。
InsertInputImage 用圖像控件覆蓋當(dāng)前選中區(qū)。
InsertInputPassword 用密碼控件覆蓋當(dāng)前選中區(qū)。
InsertInputRadio 用單選鈕控件覆蓋當(dāng)前選中區(qū)。
InsertInputReset 用重置控件覆蓋當(dāng)前選中區(qū)。
InsertInputSubmit 用提交控件覆蓋當(dāng)前選中區(qū)。
InsertInputText 用文本控件覆蓋當(dāng)前選中區(qū)。
InsertMarquee 用空字幕覆蓋當(dāng)前選中區(qū)。
InsertOrderedList 切換當(dāng)前選中區(qū)是編號(hào)列表還是常規(guī)格式化塊。
InsertParagraph 用換行覆蓋當(dāng)前選中區(qū)。
InsertSelectDropdown 用下拉框控件覆蓋當(dāng)前選中區(qū)。
InsertSelectListbox 用列表框控件覆蓋當(dāng)前選中區(qū)。
InsertTextArea 用多行文本輸入控件覆蓋當(dāng)前選中區(qū)。
InsertUnorderedList 切換當(dāng)前選中區(qū)是項(xiàng)目符號(hào)列表還是常規(guī)格式化塊。
Italic 切換當(dāng)前選中區(qū)斜體顯示與否。
JustifyCenter 將當(dāng)前選中區(qū)在所在格式化塊置中。
JustifyFull 目前尚未支持。
JustifyLeft 將當(dāng)前選中區(qū)所在格式化塊左對(duì)齊。
JustifyNone 目前尚未支持。
JustifyRight 將當(dāng)前選中區(qū)所在格式化塊右對(duì)齊。
LiveResize 迫使 MSHTML 編輯器在縮放或移動(dòng)過(guò)程中持續(xù)更新元素外觀，而不是只在移動(dòng)或縮放完成后更新。
MultipleSelection 允許當(dāng)用戶按住 Shift 或 Ctrl 鍵時(shí)一次選中多于一個(gè)站點(diǎn)可選元素。
Open 打開(kāi)。
Outdent 減少選中區(qū)所在格式化塊的縮進(jìn)。
OverWrite 切換文本狀態(tài)的插入和覆蓋。
Paste 用剪貼板內(nèi)容覆蓋當(dāng)前選中區(qū)。
PlayImage 目前尚未支持。
Print 打開(kāi)打印對(duì)話框以便用戶可以打印當(dāng)前頁(yè)。
Redo 重做。
Refresh 刷新當(dāng)前文檔。
RemoveFormat 從當(dāng)前選中區(qū)中刪除格式化標(biāo)簽。
RemoveParaFormat 目前尚未支持。
SaveAs 將當(dāng)前 Web 頁(yè)面保存為文件。
SelectAll 選中整個(gè)文檔。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 停止。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 從當(dāng)前選中區(qū)中刪除全部書(shū)簽。
Underline 切換當(dāng)前選中區(qū)的下劃線顯示與否。
Undo 撤消。
Unlink 從當(dāng)前選中區(qū)中刪除全部超級(jí)鏈接。
Unselect 清除當(dāng)前選中區(qū)的選中狀態(tài)。
一個(gè)簡(jiǎn)單的開(kāi)源編輯器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
<style type="text/css">
body{ font-size:12px;}
#ed{ height:300px; width:800px; background-color:#fff }
.sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)}
.tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif);height:22px; display:inline-table;float:left; ;cursor: pointer; margin-top:8px; margin-left:5px; margin-right:2px; vertical-align:middle; line-height:20px;}
.span0_hover{background-position:-0px -2px;width:22px}
.span1_hover{background-position:-30px -2px;width:22px}
.span2_hover{background-position:-58px -2px;width:22px}
.span3_hover{background-position:-86px -57px;width:73px}
.span4_hover{background-position:-86px -28px;width:73px}
.span5_hover{background-position:-164px -2px;width:22px; background-color:#000000}
.span6_hover{background-position:-194px -2px;width:22px}
.span7_hover{background-position:-45px -192px;width:22px}
.span8_hover{background-position:-76px -192px;width:22px}
.span9_hover{background-position:-58px -247px;width:22px}
.span10_hover{background-position:-86px -247px;width:22px}
.span11_hover{background-position:-113px -247px;width:22px}
.span12_hover{background-position:-476px -192px;width:22px}
.span13_hover{background-position:-505px -192px;width:22px}
.span14_hover{background-position:-333px -247px;width:22px}
.span15_hover{background-position:-532px -192px;width:22px}
.span16_hover{background-position:-560px -192px;width:22px}
.span17_hover{background-position:-455px -247px;width:22px}
.span18_hover{background-position:-222px -2px;width:73px}
.span19_hover{background-position:-380px -2px;width:74px}
.span20_hover{background-position:-460px -2px;width:71px}
.span0{background-position:-0px -57px;width:22px}
.span1{background-position:-30px -57px;width:22px}
.span2{background-position:-58px -57px;width:22px}
.span3{background-position:-86px -57px;width:73px}
.span4{background-position:-86px -28px;width:73px}
.span5{background-position:-164px -57px;width:22px;background-color:#000000}
.span6{background-position:-194px -57px;width:22px}
.span7{background-position:-45px -84px;width:22px}
.span8{background-position:-76px -84px;width:22px}
.span9{background-position:-58px -140px;width:22px}
.span10{background-position:-86px -140px;width:22px}
.span11{background-position:-113px -140px;width:22px}
.span12{background-position:-476px -84px;width:22px}
.span13{background-position:-505px -84px;width:22px}
.span14{background-position:-333px -140px;width:22px}
.span15{background-position:-532px -84px;width:22px}
.span16{background-position:-560px -84px;width:22px}
.span17{background-position:-455px -140px;width:22px}
.span18{background-position:-222px -57px;width:73px}
.span19{background-position:-380px -57px;width:74px}
.span20{background-position:-460px -57px;width:71px}
.span0_active{background-position:-0px -28px;width:22px}
.span1_active{background-position:-30px -28px;width:22px}
.span2_active{background-position:-58px -28px;width:22px}
.span3_active{background-position:-476px -299px;width:22px}
.span4_active{background-position:-505px -299px;width:22px}
.ebody{ height:auto; width:760px; border:1px solid #999999}
.ebar{ width:100%; height:36px; background-color:#F0F2F5;};
.edit{ height:550px; width:100%; border:0px;}
.popupfont{ width:200px; height:auto; border:1px solid #7B9EBD; background-color:#F7F7F7; position:absolute;padding:3px; }
a.c1{ width:96%; height:auto; font-size:10px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c1:hover{width:96%; height:auto; font-size:10px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c2{ width:96%; height:auto; font-size:12px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c2:hover{width:96%; height:auto; font-size:12px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c3{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666 ;text-decoration:none;}
a.c3:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c4{ width:96%; height:auto; font-size:16px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c4:hover{width:96%; height:auto; font-size:16px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c5{ width:96%; height:auto; font-size:18px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c5:hover{width:96%; height:auto; font-size:18px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c6{ width:96%; height:auto; font-size:22px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c6:hover{width:96%; height:auto; font-size:22px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c7{ width:96%; height:auto; font-size:26px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c7:hover{width:96%; height:auto; font-size:26px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.n{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666;text-decoration:none; }
a.n:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
.textarea{ border:0px;display:none;}
.toolbarlayer{position:absolute;opacity:0.7;filter:alpha(opacity:70);background-color:#ffffff;height:36px}
.bottom{height:30px;width:100%;background-color:#F7F3F7;font-size:12px;}
.checkbox{margin-top:10px;margin-top/*\**/:6px\9;margin-left:20px;margin-left/*\**/:16px\9;}
.pp{height:auto; border:1px solid #D3D3D3; position:absolute;z-index:5;}
.ppt{
height:24px; width:100%; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090726/203207031.p.gif); font-size:12px; font-weight: bold; vertical-align:middle; line-height:24px;
}
</style>
</head>
<body>
<div id='ss'></div>
<div id='sss'></div>
<script type="text/javascript">
var Sys = (function(ua) {
var s = {};
s.IE = ua.match(/msie ([\d.]+)/) ? true: false;
s.Firefox = ua.match(/firefox\/([\d.]+)/) ? true: false;
s.Chrome = ua.match(/chrome\/([\d.]+)/) ? true: false;
s.IE6 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)) ? true: false;
s.IE7 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7)) ? true: false;
s.IE8 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)) ? true: false;
return s;
})(navigator.userAgent.toLowerCase());
Sys.IE6 && document.execCommand("BackgroundImageCache", false, true);
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function Each(list, fun) {
for (var i = 0, len = list.length; i < len; i++) {
fun(list[i], i);
}
};
var Css = function(e, o) {
if (typeof o == "string") {
e.style.cssText = o;
return;
}
for (var i in o)
e.style[i] = o[i];
};
var Attr = function(e, o) {
for (var i in o)
e.setAttribute(i, o[i]);
};
var $$ = function(p, e) {
return p.getElementsByTagName(e);
};
function create(e, p, fn) {
var element = document.createElement(e);
p && p.appendChild(element);
fn && fn(element);
return element;
};
function getTarget(e) {
e = e || window.event;
return e.srcElement || e.target;
};
function createtab(tri, tdi, arisetab, arisetr, arisetd, p) {
var table = p ? p.createElement("table") : create("table");
arisetab && arisetab(table);
var tbody = p ? p.createElement("tbody") : create("tbody");
for (var i = 0; i < tri; i++) {
var tr = p ? p.createElement("tr") : create("tr");
arisetr && arisetr(i, tr);
for (var j = 0; j < tdi; j++) {
var td = p ? p.createElement("td") : create("td");
arisetd && arisetd(i, j, td);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
};
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
}
};
var BindAsEventListener = function(object, fun, args) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
};
var CurrentStyle = function(element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
var Getpos = function(o) {
var x = 0,
y = 0;
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (( o = o . offsetParent ));
return {
'x': x,
'y': y
};
};
function addListener(element, e, fn) {
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);
};
function removeListener(element, e, fn) {
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn);
};
var Class = function(properties) {
var _class = function() {
return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
};
_class.prototype = properties;
return _class;
};
var Editer = new Class({
options: {
width: 890,
height: 700,
facebg: [{
bgimg: "-4px -4px",
title: "微笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220846596.p.gif"
},
{
bgimg: "-31px -4px",
title: "大笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220859814.p.gif"
},
{
bgimg: "-58px -4px",
title: "竊笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220911971.p.gif"
},
{
bgimg: "-85px -4px",
title: "眨眼",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
bgimg: "-112px -4px",
title: "鬼臉",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
bgimg: "-139px -4px",
title: "色色",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220951955.p.gif"
},
{
bgimg: "-167px -4px",
title: "暴牙",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220958111.p.gif"
},
{
bgimg: "-194px -4px",
title: "討厭",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/221004564.p.gif"
}],
fontsizedata: {
fontSize: ["字號(hào)1", "字號(hào)2", "字號(hào)3", "字號(hào)4", "字號(hào)5", "字號(hào)6", "字號(hào)7"],
fontname: ["宋體", "黑體", "楷體", "隸書(shū)", "幼圓", "Arial", "Georgia", "Verdana", "Helvetica"]
},
oninit: function() {}
},
initialize: function(container, data, b, options) {
this.container = container;
this._body = create("div", container);
this.toolbar = create("div", this._body); //工具欄
this.iframe = create("iframe", this._body); //編輯區(qū)
this.textarea = create("textarea", this._body); //顯示源代碼的框框
this.bottom = create("div", this._body); //底部
this.lightbox = b; //lightbox
this.original = create("input"); //顯示源代碼的按紐
this.ed = null;
this.isfocus = false;
this.option = {};
Extend(this.option, this.options);
Extend(this.option, options);
this.rang = null; //選中區(qū)
this.Fpop = null;
this.option.oninit();
this.toolbar.className = "ebar";
this._body.className = "ebody";
this.textarea.className = "textarea";
Css(this._body, {
width: this.option.width + "px",
height: this.option.height + "px"
});
Css(this.textarea, {
width: Sys.IE ? this.option.width - 2 + "px": this.option.width + "px",
height: Sys.IE ? this.option.height - 66 + "px": this.option.height - 70 + "px"
});
Attr(this.iframe, {
src: "about:blank",
width: Sys.IE ? this.option.width: this.option.width - 4,
height: Sys.IE ? this.option.height - 66 : this.option.height - 70
});
Attr(this.original, {
type: "checkbox",
className: "checkbox",
align: "top"
});
this.bottom.className = "bottom";
this.bottom.innerHTML = "<span>顯示源代碼</span>";
this.bottom.insertBefore(this.original, this.bottom.childNodes[0]);
this.ed = Sys.IE ? this.iframe.contentWindow.document: this.iframe.contentDocument;
this.ed.open();
var div = Sys.IE ? "<div></div>": "";
this.ed.write("<html><head><style>body{margin:5px;font-size:16px;word-wrap:break-word}</style></head><body id='my_body'>" + div + "</body></html>");
this.ed.close();
this.ed.contentEditable = true;
this.ed.designMode = "on"; //設(shè)置編輯區(qū)為可編輯
for (var i = 0, l = data.length; i < l; i++) {
var o = create("span", this.toolbar);
Attr(o, {
title: data[i].title,
active: false,
unselectable: "on"
});
o.className = "tag " + data[i].Class;
addListener(o, "mouseover", Bind(this, this.Changebgcolor, o, data[i].hover));
addListener(o, "mouseout", Bind(this, this.Changebgcolor, o, data[i].Class));
addListener(o, "click", Bind(this, this[data[i].action], o, data[i].args));
}
//////////////////////////生成工具欄
addListener(this.iframe.contentWindow, "focus", Bind(this,
function() {
this.isfocus = true;
}));
addListener(this.iframe.contentWindow, "blur", Bind(this,
function() {
this.isfocus = false;
}));
addListener(this.ed, 'mousedown', Bind(this, this.Show));
addListener(this.ed, 'mouseup', Bind(this, this.Show));
//////////////////////////這2個(gè)事件是來(lái)判斷光標(biāo)所在位置是否別編輯
addListener(this.original, 'click', Bind(this, this.Showoriginal, this.original)); //顯示源代碼
},
Changebgcolor: function(o, name, p) {
if (o.active) return;
o.className = "tag " + name;
},
Show: function() {
var spans = $$(this.toolbar, "span"),
Is;
var elm = [[spans[0], "Bold", "tag span0_active", "tag span0"], [spans[1], "Italic", "tag span1_active", "tag span1"], [spans[2], "Underline", "tag span2_active", "tag span2"], [spans[12], "InsertUnorderedList", "tag span3_active", "tag span12"], [spans[13], "InsertOrderedList", "tag span4_active", "tag span13"]];
for (var i = 0, l = elm.length; i < l; i++) {
Is = this.ed.queryCommandState(elm[i][1]);
elm[i][0].className = Is ? elm[i][2] : elm[i][3];
elm[i][0].active = Is;
}
},
Showoriginal: function(o) {
if (!this.toolbarlayer) {
this.toolbarlayer = create("div", document.body);
this.toolbarlayer.className = "toolbarlayer";
var pos = Getpos(this.toolbar);
Css(this.toolbarlayer, {
width: this.option.width + "px",
left: pos.x + "px",
top: pos.y + "px"
});
}
if (o.checked) {
this.iframe.style.display = "none";
this.textarea.style.display = "block";
this.toolbarlayer.style.display = "block";
this.textarea.value = this.ed.body.innerHTML;
}
else {
this.iframe.style.display = "block";
this.textarea.style.display = "none";
this.toolbarlayer.style.display = "none";
this.ed.body.innerHTML = this.textarea.value;
}
},
Exec: function(o, cmd, para) {
try {
this.ed.execCommand(cmd, false, para);
this.Show();
}
catch(err) {
return;
}
},
InsertImage: function(o) {
if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
this.rang = this.ed.selection.createRange();
}
this.lightbox.Show();
this.makebody(this.Imagepopoup, "350px", "插入圖片", "InsertImage", "Imagepopoup");
},
CreateLink: function(o) {
if (Sys.IE) this.rang = this.ed.selection.createRange();
this.lightbox.Show();
this.makebody(this.Linkpopoup, "350px", "插入連接", "CreateLink", "Linkpopoup");
},
Fontcolor: function(o) {
var self = this;
if (!this.fontcolorpopup) {
var color = new popoup({
width: "210px",
title: "顏色選擇"
});
this.fontcolorpopup = color.container;
var pos = Getpos(o);
Css(color.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
var bgcolor = ["00", "33", "66", "99", "CC", "FF", "00", "33", "66", "99", "CC", "FF"];
$$(color.container, "div")[1].appendChild(createtab(12, 18,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#333333"
});
},
null,
function(i, j, td) {
var color = i < 6 ? "#" + bgcolor[Math.floor(j / 6)] + bgcolor[Math.floor(j % 6)] + bgcolor[i] : "#" + bgcolor[Math.floor(j / 6) + 3] + bgcolor[Math.floor(j % 6)] + bgcolor[i - 6];
Attr(td, {
width: 10,
height: 10,
unselectable: "on"
});
td.style.backgroundColor = color;
addListener(td, 'click', Bind(self, self.Execa, color, "fontColor"));
addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble));
}))
}
else this.fontcolorpopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Expression: function(o) {
var self = this;
if (!this.facebgpopup) {
var expr = new popoup({
width: "190px",
title: "插入表情"
});
this.facebgpopup = expr.container;
var pos = Getpos(o);
Css(expr.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
$$(expr.container, "div")[1].appendChild(createtab(1, this.option.facebg.length,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#FFFFFF"
});
},
null,
function(i, j, td) {
Css(td, {
backgroundImage: "url(http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220510752.p.gif)",
backgroundPosition: self.option.facebg[j].bgimg
});
Attr(td, {
width: self.option.facebg[i].wl,
height: self.option.facebg[i].wl,
unselectable: "on"
});
addListener(td, 'click', Bind(self, self.Execa, self.option.facebg[j].src, "Expression"));
addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble))
}));
}
else this.facebgpopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Layout: function() {
var child = this.ed.body.childNodes;
for (var i = 0, l = child.length; i < l; i++) {
if (child[i].nodeName == "DIV" || child[i].nodeName == "P") child[i].style.textIndent = child[i].style.textIndent == "2em" ? "": "2em";
}
},
Fontsize: function(o) {
if (!this.fontsizepopup) {
var size = new popoup({
width: "210px",
title: "字號(hào)"
}),
a;
this.fontsizepopup = size.container;
var pos = Getpos(o);
Css(size.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
for (var i = 0, l = this.option.fontsizedata.fontSize.length; i < l; i++) {
a = create("a", $$(size.container, "div")[1]);
a.className = "c" + (i + 1);
a.setAttribute("href", "javascript:void(0);")
a.innerHTML = this.option.fontsizedata.fontSize[i];
addListener(a, "click", Bind(this, this.Execa, i, "fontSize"));
addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
}
} else this.fontsizepopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
FontName: function(o) {
if (!this.fontnamepopup) {
var name = new popoup({
width: "200px",
title: "字體"
}),
a;
this.fontnamepopup = name.container;
var pos = Getpos(o);
Css(name.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
for (var i = 0, l = this.option.fontsizedata.fontname.length; i < l; i++) {
a = create("a", $$(name.container, "div")[1]);
a.className = "n";
a.setAttribute("href", "javascript:void(0);");
a.innerHTML = this.option.fontsizedata.fontname[i];
addListener(a, "click", Bind(this, this.Execa, this.option.fontsizedata.fontname[i], "fontname"));
addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
}
} else this.fontnamepopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
makebody: function(o, w, t, f, n) {
if (!o) {
var self = this;
this[n] = new popoup({
width: w,
title: t
});
this[n].pos();
$$(this[n].container, "div")[1].innerHTML = "<div style=' margin-top:6px; margin-left:10px'><span >連接地址</span> <input style='width:200px;' type='text' /></div><div style='text-align:center; padding-top:15px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
this[n].elm = [$$(this[n].container, "input")[0], $$(this[n].container, "img")[0], $$(this[n].container, "img")[1]];
this[n].elm[0].focus()
addListener(this[n].elm[1], 'click', Bind(this, this.Execa, null, f));
addListener(this[n].elm[2], 'click',
function() {
self.lightbox.Close();
self[n].Close();
});
}
else with(this[n]) {
pos();
Show();
elm[0].value = "";
elm[0].focus();
}
},
Addtable: function() {
if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
this.rang = this.ed.selection.createRange();
}
this.lightbox.Show();
if (Sys.IE) this.rang = this.ed.selection.createRange();
if (!this.tablepopup) {
var self = this;
this.tablepopup = new popoup({
width: "300px",
title: "插入表格"
});
this.tablepopup.pos();
$$(this.tablepopup.container, "div")[1].innerHTML = "<div style='margin-left:30px; margin-top:7px;'>行數(shù)：<input style='width:50px; height:13px' type='text' /> 列數(shù)：<input style='width:50px;height:13px' type='text' /></div><div style=' margin-left:30px; margin-top:7px;'>表格的寬度：<input style='width:50px; height:13px' type='text' /> px</div><div style=' margin-left:30px; margin-top:7px;'>表行的高度：<input style='width:50px; height:13px' type='text' /> px<div style='text-align:center; margin-left:30px; margin-top:7px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
var o = $$(this.tablepopup.container, "input");
this.tablepopup.elm = [o[0], o[1], o[2], o[3], $$(this.tablepopup.container, "img")[0], $$(this.tablepopup.container, "img")[1]];
addListener(this.tablepopup.elm[4], 'click', Bind(this, this.Execa, null, "CreateTable"));
addListener(this.tablepopup.elm[5], 'click',
function() {
self.lightbox.Close();
self.tablepopup.Close();
});
}
else with(this.tablepopup) {
pos();
Show();
elm[0].focus();
}
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Hide: function(o) {
this.facebgpopup && (this.facebgpopup.style.display = "none");
this.fontsizepopup && (this.fontsizepopup.style.display = "none");
this.fontnamepopup && (this.fontnamepopup.style.display = "none");
this.fontcolorpopup && (this.fontcolorpopup.style.display = "none");
removeListener(this.ed, 'click', this.Fpop);
removeListener(document, 'mousedown', this.Fpop);
},
Bubble: function(e) {
if (Sys.IE) {
e.cancelBubble = true
} else {
e.stopPropagation()
}
},
Execa: function(num, stamp) {
var exec = {
fontname: function() {
this.fontnamepopup.style.display = "none";
this.ed.execCommand('FontName', false, num);
},
fontSize: function() {
this.fontsizepopup.style.display = "none";
this.ed.execCommand("FontSize", false, num + 1)
},
fontColor: function() {
this.fontcolorpopup.style.display = "none";
this.ed.execCommand("ForeColor", false, num);
},
CreateLink: function() {
this.lightbox.Close();
this.Linkpopoup.Close();
if (this.Linkpopoup.elm[0].value == "") return;
if (Sys.IE) {
this.rang.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
this.rang.parentElement().target = "_blank ";
}
else {
this.ed.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
this.rang = this.iframe.contentWindow.getSelection().getRangeAt(0);
this.rang.commonAncestorContainer.parentNode.target = "_blank ";
}
},
InsertImage: function() {
this.lightbox.Close();
this.Imagepopoup.Close();
if (this.Imagepopoup.elm[0].value == "") return;
Sys.IE ? this.rang.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value) : this.ed.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value);
},
Expression: function() {
this.facebgpopup.style.display = "none";
Sys.IE && (this.iframe.contentWindow.focus());
this.ed.execCommand("InsertImage", false, num);
},
CreateTable: function() {
this.lightbox.Close();
this.tablepopup.Close();
var o = this.tablepopup.elm,
p = null;
if (Sys.IE) {
this.rang.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
p = this.rang.parentElement();
}
else {
this.ed.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
p = this.iframe.contentWindow.getSelection().getRangeAt(0).commonAncestorContainer;
}
var tab = createtab(o[0].value, o[1].value,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#CCCCCC",
width: o[2].value
});
},
null,
function(i, j, td) {
td.height = o[3].value;
td.width = o[2].value / o[1].value;
td.style.backgroundColor = "#FFFFFF"
},
this.ed);
var imgs = p.getElementsByTagName("img");
for (var i = 0, l = p.childNodes.length; i < l; i++) {
if (imgs[i].src == "http://xxx.com/xxxxx.gif") {
p.replaceChild(tab, imgs[i])
}
}
p.insertBefore(this.ed.createElement("br"), tab.nextSibling);
}
};
Bind(this, exec[stamp])();
}
});
var popoup = new Class({
options: {
width: "200px",
title: "標(biāo)題"
},
initialize: function(options) {
this.container = create("div", document.body);
Extend(this.options, options);
this.title = this.options.title;
this.container.className = "pp";
this.container.style.width = this.options.width;
this.container.innerHTML = "<div class='ppt'><span style='margin-left:8px;'></span></div><div style='height:auto; width:auto; padding:7px; background-color:#FFFFFF'></div>";
this.w = this.container.offsetWidth;
this.h = this.container.offsetHeight;
$$(this.container, "span")[0].innerHTML = this.title;
},
pos: function() {
var str = "left:" + (Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) - this.w) / 2 + "px;top:" + ((Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight) - this.h) / 2 + document.documentElement.scrollTop) + "px"
Css(this.container, str);
},
Show: function() {
this.container.style.display = "";
},
Close: function() {
this.container.style.display = "none";
}
})
var LightBox = {
obj: null,
config: {
Color: "#fff",
Opacity: 80,
zIndex: 5
},
init: function(options) {
Extend(this.config, options || {});
Extend(this, this.config);
delete this.config;
this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
var str = "display:none; z-index:" + this.zIndex + ";left:0px;top:0px;position:fixed;width:100%;height:100%;background-color:" + this.Color + (Sys.IE ? ";filter : alpha(opacity:" + this.Opacity + ")": ";opacity :" + this.Opacity / 100);
Css(this.obj, str);
if (Sys.IE6) {
this.obj.style.position = "absolute";
var _self = this;
this._resize = function() {
_self.obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
_self.obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
};
this.obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>';
}
return this;
},
Show: function() {
if (Sys.IE6) {
this._resize();
addListener(window, "resize", this._resize);
}
this.obj.style.display = "block";
},
Close: function() {
this.obj.style.display = "none";
if (Sys.IE6) removeListener(window, "resize", LightBox._resize);
}
}
window.onload = function() {
var data = [{
Class: "span0",
hover: "span0_hover",
title: "加粗",
action: "Exec",
args: "bold"
},
{
Class: "span1",
hover: "span1_hover",
title: "斜體",
action: "Exec",
args: "Italic"
},
{
Class: "span2",
hover: "span2_hover",
title: "下劃線",
action: "Exec",
args: "Underline"
},
{
Class: "span3",
hover: "span3_hover",
title: "字號(hào)",
action: "Fontsize",
args: null
},
{
Class: "span4",
hover: "span4_hover",
title: "字體",
action: "FontName",
args: null
},
{
Class: "span5",
hover: "span5_hover",
title: "文字顏色",
action: "Fontcolor",
args: null
},
{
Class: "span6",
hover: "span6_hover",
title: "插入鏈接",
action: "CreateLink",
args: null
},
{
Class: "span7",
hover: "span7_hover",
title: "剪貼",
action: "Exec",
args: "Cut"
},
{
Class: "span8",
hover: "span8_hover",
title: "復(fù)制",
action: "Exec",
args: "Copy"
},
{
Class: "span9",
hover: "span9_hover",
title: "左對(duì)齊",
action: "Exec",
args: "JustifyLeft"
},
{
Class: "span10",
hover: "span10_hover",
title: "居中對(duì)齊",
action: "Exec",
args: "JustifyCenter"
},
{
Class: "span11",
hover: "span11_hover",
title: "右對(duì)齊",
action: "Exec",
args: "JustifyRight"
},
{
Class: "span12",
hover: "span12_hover",
title: "項(xiàng)目符號(hào)",
action: "Exec",
args: "InsertUnorderedList"
},
{
Class: "span13",
hover: "span13_hover",
title: "編號(hào)",
action: "Exec",
args: "InsertOrderedList"
},
{
Class: "span14",
hover: "span14_hover",
title: "插入表格",
action: "Addtable",
args: null
},
{
Class: "span15",
hover: "span15_hover",
title: "減少縮進(jìn)",
action: "Exec",
args: "Outdent"
},
{
Class: "span16",
hover: "span16_hover",
title: "增加縮進(jìn)",
action: "Exec",
args: "Indent"
},
{
Class: "span17",
hover: "span17_hover",
title: "清除樣式",
action: "Exec",
args: "RemoveFormat"
},
{
Class: "span18",
hover: "span18_hover",
title: "插入圖片",
action: "InsertImage",
args: null
},
{
Class: "span19",
hover: "span19_hover",
title: "插入表情",
action: "Expression",
args: null
},
{
Class: "span20",
hover: "span20_hover",
title: "自動(dòng)排版",
action: "Layout",
args: null
}];
new Editer($('ss'), data, LightBox.init());
}
</script>
</body
</html>
1，需要一個(gè)可以編輯同時(shí)又可顯效果的編輯框。textarea不行，它只能用來(lái)輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本。
你可以使用iframe來(lái)實(shí)現(xiàn)，修改iframe的designMode屬性使其可以被編輯。
復(fù)制代碼 代碼如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>
這樣你就可以在這個(gè)iframe區(qū)域里寫(xiě)字了。
2，選中要添加樣式的文字。通常我們用WORD編輯一段文字的樣式時(shí)，一般是先打字，再編輯樣式。所以你需要一個(gè)選中要處理文本的方法。JS的selection.createRange()可以選中文本，返回一個(gè)對(duì)象，你可以通過(guò)訪問(wèn)該對(duì)象的text屬性得到被選中的文本。
復(fù)制代碼 代碼如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>
3，改變被選中文本的樣式。selection.createRange()選中文本，返回一個(gè)對(duì)象，該對(duì)象有一個(gè)方法execCommand()，可以用來(lái)改變被選中文本的樣式。
復(fù)制代碼 代碼如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>
execCommand()的常用用法：
字體--宋體、黑體、楷體等
execCommand("fontname","",字體)
字號(hào)--字號(hào)大小
execCommand("fontsize","",字號(hào))
加重
execCommand("Bold")
斜體
execCommand("Italic")
下劃線
execCommand("Underline")
刪除線
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷貝
execCommand("Copy")
粘貼
execCommand("Paste")
取消操作--IE5.0以后可以無(wú)限取消
execCommand("Undo")
重復(fù)操作
execCommand("Redo")
把上面的每個(gè)用法用按鈕來(lái)實(shí)現(xiàn)，你就已經(jīng)完成了一個(gè)簡(jiǎn)單的可視文本編輯器。
document.execCommand()用法說(shuō)明
復(fù)制代碼 代碼如下:
Position 允許通過(guò)拖曳移動(dòng)絕對(duì)定位的對(duì)象。
AbsolutePosition 設(shè)定元素的 position 屬性為“absolute”(絕對(duì))。
BackColor 設(shè)置或獲取當(dāng)前選中區(qū)的背景顏色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切換當(dāng)前選中區(qū)的粗體顯示與否。
BrowseMode 目前尚未支持。
Copy 將當(dāng)前選中區(qū)復(fù)制到剪貼板。
CreateBookmark 創(chuàng)建一個(gè)書(shū)簽錨或獲取當(dāng)前選中區(qū)或插入點(diǎn)的書(shū)簽錨的名稱。
CreateLink 在當(dāng)前選中區(qū)上插入超級(jí)鏈接，或顯示一個(gè)對(duì)話框允許用戶指定要為當(dāng)前選中區(qū)插入的超級(jí)鏈接的 URL。
Cut 將當(dāng)前選中區(qū)復(fù)制到剪貼板并刪除之。
Delete 刪除當(dāng)前選中區(qū)。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 設(shè)置或獲取當(dāng)前選中區(qū)的字體。
FontSize 設(shè)置或獲取當(dāng)前選中區(qū)的字體大小。
ForeColor 設(shè)置或獲取當(dāng)前選中區(qū)的前景(文本)顏色。
FormatBlock 設(shè)置當(dāng)前塊格式化標(biāo)簽。
Indent 增加選中文本的縮進(jìn)。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。
InsertFieldset 用方框覆蓋當(dāng)前選中區(qū)。
InsertHorizontalRule 用水平線覆蓋當(dāng)前選中區(qū)。
InsertIFrame 用內(nèi)嵌框架覆蓋當(dāng)前選中區(qū)。
InsertImage 用圖像覆蓋當(dāng)前選中區(qū)。
InsertInputButton 用按鈕控件覆蓋當(dāng)前選中區(qū)。
InsertInputCheckbox 用復(fù)選框控件覆蓋當(dāng)前選中區(qū)。
InsertInputFileUpload 用文件上載控件覆蓋當(dāng)前選中區(qū)。
InsertInputHidden 插入隱藏控件覆蓋當(dāng)前選中區(qū)。
InsertInputImage 用圖像控件覆蓋當(dāng)前選中區(qū)。
InsertInputPassword 用密碼控件覆蓋當(dāng)前選中區(qū)。
InsertInputRadio 用單選鈕控件覆蓋當(dāng)前選中區(qū)。
InsertInputReset 用重置控件覆蓋當(dāng)前選中區(qū)。
InsertInputSubmit 用提交控件覆蓋當(dāng)前選中區(qū)。
InsertInputText 用文本控件覆蓋當(dāng)前選中區(qū)。
InsertMarquee 用空字幕覆蓋當(dāng)前選中區(qū)。
InsertOrderedList 切換當(dāng)前選中區(qū)是編號(hào)列表還是常規(guī)格式化塊。
InsertParagraph 用換行覆蓋當(dāng)前選中區(qū)。
InsertSelectDropdown 用下拉框控件覆蓋當(dāng)前選中區(qū)。
InsertSelectListbox 用列表框控件覆蓋當(dāng)前選中區(qū)。
InsertTextArea 用多行文本輸入控件覆蓋當(dāng)前選中區(qū)。
InsertUnorderedList 切換當(dāng)前選中區(qū)是項(xiàng)目符號(hào)列表還是常規(guī)格式化塊。
Italic 切換當(dāng)前選中區(qū)斜體顯示與否。
JustifyCenter 將當(dāng)前選中區(qū)在所在格式化塊置中。
JustifyFull 目前尚未支持。
JustifyLeft 將當(dāng)前選中區(qū)所在格式化塊左對(duì)齊。
JustifyNone 目前尚未支持。
JustifyRight 將當(dāng)前選中區(qū)所在格式化塊右對(duì)齊。
LiveResize 迫使 MSHTML 編輯器在縮放或移動(dòng)過(guò)程中持續(xù)更新元素外觀，而不是只在移動(dòng)或縮放完成后更新。
MultipleSelection 允許當(dāng)用戶按住 Shift 或 Ctrl 鍵時(shí)一次選中多于一個(gè)站點(diǎn)可選元素。
Open 打開(kāi)。
Outdent 減少選中區(qū)所在格式化塊的縮進(jìn)。
OverWrite 切換文本狀態(tài)的插入和覆蓋。
Paste 用剪貼板內(nèi)容覆蓋當(dāng)前選中區(qū)。
PlayImage 目前尚未支持。
Print 打開(kāi)打印對(duì)話框以便用戶可以打印當(dāng)前頁(yè)。
Redo 重做。
Refresh 刷新當(dāng)前文檔。
RemoveFormat 從當(dāng)前選中區(qū)中刪除格式化標(biāo)簽。
RemoveParaFormat 目前尚未支持。
SaveAs 將當(dāng)前 Web 頁(yè)面保存為文件。
SelectAll 選中整個(gè)文檔。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 停止。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 從當(dāng)前選中區(qū)中刪除全部書(shū)簽。
Underline 切換當(dāng)前選中區(qū)的下劃線顯示與否。
Undo 撤消。
Unlink 從當(dāng)前選中區(qū)中刪除全部超級(jí)鏈接。
Unselect 清除當(dāng)前選中區(qū)的選中狀態(tài)。
一個(gè)簡(jiǎn)單的開(kāi)源編輯器
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
<style type="text/css">
body{ font-size:12px;}
#ed{ height:300px; width:800px; background-color:#fff }
.sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)}
.tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif);height:22px; display:inline-table;float:left; ;cursor: pointer; margin-top:8px; margin-left:5px; margin-right:2px; vertical-align:middle; line-height:20px;}
.span0_hover{background-position:-0px -2px;width:22px}
.span1_hover{background-position:-30px -2px;width:22px}
.span2_hover{background-position:-58px -2px;width:22px}
.span3_hover{background-position:-86px -57px;width:73px}
.span4_hover{background-position:-86px -28px;width:73px}
.span5_hover{background-position:-164px -2px;width:22px; background-color:#000000}
.span6_hover{background-position:-194px -2px;width:22px}
.span7_hover{background-position:-45px -192px;width:22px}
.span8_hover{background-position:-76px -192px;width:22px}
.span9_hover{background-position:-58px -247px;width:22px}
.span10_hover{background-position:-86px -247px;width:22px}
.span11_hover{background-position:-113px -247px;width:22px}
.span12_hover{background-position:-476px -192px;width:22px}
.span13_hover{background-position:-505px -192px;width:22px}
.span14_hover{background-position:-333px -247px;width:22px}
.span15_hover{background-position:-532px -192px;width:22px}
.span16_hover{background-position:-560px -192px;width:22px}
.span17_hover{background-position:-455px -247px;width:22px}
.span18_hover{background-position:-222px -2px;width:73px}
.span19_hover{background-position:-380px -2px;width:74px}
.span20_hover{background-position:-460px -2px;width:71px}
.span0{background-position:-0px -57px;width:22px}
.span1{background-position:-30px -57px;width:22px}
.span2{background-position:-58px -57px;width:22px}
.span3{background-position:-86px -57px;width:73px}
.span4{background-position:-86px -28px;width:73px}
.span5{background-position:-164px -57px;width:22px;background-color:#000000}
.span6{background-position:-194px -57px;width:22px}
.span7{background-position:-45px -84px;width:22px}
.span8{background-position:-76px -84px;width:22px}
.span9{background-position:-58px -140px;width:22px}
.span10{background-position:-86px -140px;width:22px}
.span11{background-position:-113px -140px;width:22px}
.span12{background-position:-476px -84px;width:22px}
.span13{background-position:-505px -84px;width:22px}
.span14{background-position:-333px -140px;width:22px}
.span15{background-position:-532px -84px;width:22px}
.span16{background-position:-560px -84px;width:22px}
.span17{background-position:-455px -140px;width:22px}
.span18{background-position:-222px -57px;width:73px}
.span19{background-position:-380px -57px;width:74px}
.span20{background-position:-460px -57px;width:71px}
.span0_active{background-position:-0px -28px;width:22px}
.span1_active{background-position:-30px -28px;width:22px}
.span2_active{background-position:-58px -28px;width:22px}
.span3_active{background-position:-476px -299px;width:22px}
.span4_active{background-position:-505px -299px;width:22px}
.ebody{ height:auto; width:760px; border:1px solid #999999}
.ebar{ width:100%; height:36px; background-color:#F0F2F5;};
.edit{ height:550px; width:100%; border:0px;}
.popupfont{ width:200px; height:auto; border:1px solid #7B9EBD; background-color:#F7F7F7; position:absolute;padding:3px; }
a.c1{ width:96%; height:auto; font-size:10px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c1:hover{width:96%; height:auto; font-size:10px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c2{ width:96%; height:auto; font-size:12px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c2:hover{width:96%; height:auto; font-size:12px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c3{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666 ;text-decoration:none;}
a.c3:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c4{ width:96%; height:auto; font-size:16px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c4:hover{width:96%; height:auto; font-size:16px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c5{ width:96%; height:auto; font-size:18px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c5:hover{width:96%; height:auto; font-size:18px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c6{ width:96%; height:auto; font-size:22px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c6:hover{width:96%; height:auto; font-size:22px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c7{ width:96%; height:auto; font-size:26px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c7:hover{width:96%; height:auto; font-size:26px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.n{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666;text-decoration:none; }
a.n:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
.textarea{ border:0px;display:none;}
.toolbarlayer{position:absolute;opacity:0.7;filter:alpha(opacity:70);background-color:#ffffff;height:36px}
.bottom{height:30px;width:100%;background-color:#F7F3F7;font-size:12px;}
.checkbox{margin-top:10px;margin-top/*\**/:6px\9;margin-left:20px;margin-left/*\**/:16px\9;}
.pp{height:auto; border:1px solid #D3D3D3; position:absolute;z-index:5;}
.ppt{
height:24px; width:100%; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090726/203207031.p.gif); font-size:12px; font-weight: bold; vertical-align:middle; line-height:24px;
}
</style>
</head>
<body>
<div id='ss'></div>
<div id='sss'></div>
<script type="text/javascript">
var Sys = (function(ua) {
var s = {};
s.IE = ua.match(/msie ([\d.]+)/) ? true: false;
s.Firefox = ua.match(/firefox\/([\d.]+)/) ? true: false;
s.Chrome = ua.match(/chrome\/([\d.]+)/) ? true: false;
s.IE6 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)) ? true: false;
s.IE7 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7)) ? true: false;
s.IE8 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)) ? true: false;
return s;
})(navigator.userAgent.toLowerCase());
Sys.IE6 && document.execCommand("BackgroundImageCache", false, true);
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function Each(list, fun) {
for (var i = 0, len = list.length; i < len; i++) {
fun(list[i], i);
}
};
var Css = function(e, o) {
if (typeof o == "string") {
e.style.cssText = o;
return;
}
for (var i in o)
e.style[i] = o[i];
};
var Attr = function(e, o) {
for (var i in o)
e.setAttribute(i, o[i]);
};
var $$ = function(p, e) {
return p.getElementsByTagName(e);
};
function create(e, p, fn) {
var element = document.createElement(e);
p && p.appendChild(element);
fn && fn(element);
return element;
};
function getTarget(e) {
e = e || window.event;
return e.srcElement || e.target;
};
function createtab(tri, tdi, arisetab, arisetr, arisetd, p) {
var table = p ? p.createElement("table") : create("table");
arisetab && arisetab(table);
var tbody = p ? p.createElement("tbody") : create("tbody");
for (var i = 0; i < tri; i++) {
var tr = p ? p.createElement("tr") : create("tr");
arisetr && arisetr(i, tr);
for (var j = 0; j < tdi; j++) {
var td = p ? p.createElement("td") : create("td");
arisetd && arisetd(i, j, td);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
};
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
}
};
var BindAsEventListener = function(object, fun, args) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
};
var CurrentStyle = function(element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
var Getpos = function(o) {
var x = 0,
y = 0;
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (( o = o . offsetParent ));
return {
'x': x,
'y': y
};
};
function addListener(element, e, fn) {
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);
};
function removeListener(element, e, fn) {
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn);
};
var Class = function(properties) {
var _class = function() {
return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
};
_class.prototype = properties;
return _class;
};
var Editer = new Class({
options: {
width: 890,
height: 700,
facebg: [{
bgimg: "-4px -4px",
title: "微笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220846596.p.gif"
},
{
bgimg: "-31px -4px",
title: "大笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220859814.p.gif"
},
{
bgimg: "-58px -4px",
title: "竊笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220911971.p.gif"
},
{
bgimg: "-85px -4px",
title: "眨眼",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
bgimg: "-112px -4px",
title: "鬼臉",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
bgimg: "-139px -4px",
title: "色色",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220951955.p.gif"
},
{
bgimg: "-167px -4px",
title: "暴牙",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220958111.p.gif"
},
{
bgimg: "-194px -4px",
title: "討厭",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/221004564.p.gif"
}],
fontsizedata: {
fontSize: ["字號(hào)1", "字號(hào)2", "字號(hào)3", "字號(hào)4", "字號(hào)5", "字號(hào)6", "字號(hào)7"],
fontname: ["宋體", "黑體", "楷體", "隸書(shū)", "幼圓", "Arial", "Georgia", "Verdana", "Helvetica"]
},
oninit: function() {}
},
initialize: function(container, data, b, options) {
this.container = container;
this._body = create("div", container);
this.toolbar = create("div", this._body); //工具欄
this.iframe = create("iframe", this._body); //編輯區(qū)
this.textarea = create("textarea", this._body); //顯示源代碼的框框
this.bottom = create("div", this._body); //底部
this.lightbox = b; //lightbox
this.original = create("input"); //顯示源代碼的按紐
this.ed = null;
this.isfocus = false;
this.option = {};
Extend(this.option, this.options);
Extend(this.option, options);
this.rang = null; //選中區(qū)
this.Fpop = null;
this.option.oninit();
this.toolbar.className = "ebar";
this._body.className = "ebody";
this.textarea.className = "textarea";
Css(this._body, {
width: this.option.width + "px",
height: this.option.height + "px"
});
Css(this.textarea, {
width: Sys.IE ? this.option.width - 2 + "px": this.option.width + "px",
height: Sys.IE ? this.option.height - 66 + "px": this.option.height - 70 + "px"
});
Attr(this.iframe, {
src: "about:blank",
width: Sys.IE ? this.option.width: this.option.width - 4,
height: Sys.IE ? this.option.height - 66 : this.option.height - 70
});
Attr(this.original, {
type: "checkbox",
className: "checkbox",
align: "top"
});
this.bottom.className = "bottom";
this.bottom.innerHTML = "<span>顯示源代碼</span>";
this.bottom.insertBefore(this.original, this.bottom.childNodes[0]);
this.ed = Sys.IE ? this.iframe.contentWindow.document: this.iframe.contentDocument;
this.ed.open();
var div = Sys.IE ? "<div></div>": "";
this.ed.write("<html><head><style>body{margin:5px;font-size:16px;word-wrap:break-word}</style></head><body id='my_body'>" + div + "</body></html>");
this.ed.close();
this.ed.contentEditable = true;
this.ed.designMode = "on"; //設(shè)置編輯區(qū)為可編輯
for (var i = 0, l = data.length; i < l; i++) {
var o = create("span", this.toolbar);
Attr(o, {
title: data[i].title,
active: false,
unselectable: "on"
});
o.className = "tag " + data[i].Class;
addListener(o, "mouseover", Bind(this, this.Changebgcolor, o, data[i].hover));
addListener(o, "mouseout", Bind(this, this.Changebgcolor, o, data[i].Class));
addListener(o, "click", Bind(this, this[data[i].action], o, data[i].args));
}
//////////////////////////生成工具欄
addListener(this.iframe.contentWindow, "focus", Bind(this,
function() {
this.isfocus = true;
}));
addListener(this.iframe.contentWindow, "blur", Bind(this,
function() {
this.isfocus = false;
}));
addListener(this.ed, 'mousedown', Bind(this, this.Show));
addListener(this.ed, 'mouseup', Bind(this, this.Show));
//////////////////////////這2個(gè)事件是來(lái)判斷光標(biāo)所在位置是否別編輯
addListener(this.original, 'click', Bind(this, this.Showoriginal, this.original)); //顯示源代碼
},
Changebgcolor: function(o, name, p) {
if (o.active) return;
o.className = "tag " + name;
},
Show: function() {
var spans = $$(this.toolbar, "span"),
Is;
var elm = [[spans[0], "Bold", "tag span0_active", "tag span0"], [spans[1], "Italic", "tag span1_active", "tag span1"], [spans[2], "Underline", "tag span2_active", "tag span2"], [spans[12], "InsertUnorderedList", "tag span3_active", "tag span12"], [spans[13], "InsertOrderedList", "tag span4_active", "tag span13"]];
for (var i = 0, l = elm.length; i < l; i++) {
Is = this.ed.queryCommandState(elm[i][1]);
elm[i][0].className = Is ? elm[i][2] : elm[i][3];
elm[i][0].active = Is;
}
},
Showoriginal: function(o) {
if (!this.toolbarlayer) {
this.toolbarlayer = create("div", document.body);
this.toolbarlayer.className = "toolbarlayer";
var pos = Getpos(this.toolbar);
Css(this.toolbarlayer, {
width: this.option.width + "px",
left: pos.x + "px",
top: pos.y + "px"
});
}
if (o.checked) {
this.iframe.style.display = "none";
this.textarea.style.display = "block";
this.toolbarlayer.style.display = "block";
this.textarea.value = this.ed.body.innerHTML;
}
else {
this.iframe.style.display = "block";
this.textarea.style.display = "none";
this.toolbarlayer.style.display = "none";
this.ed.body.innerHTML = this.textarea.value;
}
},
Exec: function(o, cmd, para) {
try {
this.ed.execCommand(cmd, false, para);
this.Show();
}
catch(err) {
return;
}
},
InsertImage: function(o) {
if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
this.rang = this.ed.selection.createRange();
}
this.lightbox.Show();
this.makebody(this.Imagepopoup, "350px", "插入圖片", "InsertImage", "Imagepopoup");
},
CreateLink: function(o) {
if (Sys.IE) this.rang = this.ed.selection.createRange();
this.lightbox.Show();
this.makebody(this.Linkpopoup, "350px", "插入連接", "CreateLink", "Linkpopoup");
},
Fontcolor: function(o) {
var self = this;
if (!this.fontcolorpopup) {
var color = new popoup({
width: "210px",
title: "顏色選擇"
});
this.fontcolorpopup = color.container;
var pos = Getpos(o);
Css(color.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
var bgcolor = ["00", "33", "66", "99", "CC", "FF", "00", "33", "66", "99", "CC", "FF"];
$$(color.container, "div")[1].appendChild(createtab(12, 18,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#333333"
});
},
null,
function(i, j, td) {
var color = i < 6 ? "#" + bgcolor[Math.floor(j / 6)] + bgcolor[Math.floor(j % 6)] + bgcolor[i] : "#" + bgcolor[Math.floor(j / 6) + 3] + bgcolor[Math.floor(j % 6)] + bgcolor[i - 6];
Attr(td, {
width: 10,
height: 10,
unselectable: "on"
});
td.style.backgroundColor = color;
addListener(td, 'click', Bind(self, self.Execa, color, "fontColor"));
addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble));
}))
}
else this.fontcolorpopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Expression: function(o) {
var self = this;
if (!this.facebgpopup) {
var expr = new popoup({
width: "190px",
title: "插入表情"
});
this.facebgpopup = expr.container;
var pos = Getpos(o);
Css(expr.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
$$(expr.container, "div")[1].appendChild(createtab(1, this.option.facebg.length,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#FFFFFF"
});
},
null,
function(i, j, td) {
Css(td, {
backgroundImage: "url(http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220510752.p.gif)",
backgroundPosition: self.option.facebg[j].bgimg
});
Attr(td, {
width: self.option.facebg[i].wl,
height: self.option.facebg[i].wl,
unselectable: "on"
});
addListener(td, 'click', Bind(self, self.Execa, self.option.facebg[j].src, "Expression"));
addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble))
}));
}
else this.facebgpopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Layout: function() {
var child = this.ed.body.childNodes;
for (var i = 0, l = child.length; i < l; i++) {
if (child[i].nodeName == "DIV" || child[i].nodeName == "P") child[i].style.textIndent = child[i].style.textIndent == "2em" ? "": "2em";
}
},
Fontsize: function(o) {
if (!this.fontsizepopup) {
var size = new popoup({
width: "210px",
title: "字號(hào)"
}),
a;
this.fontsizepopup = size.container;
var pos = Getpos(o);
Css(size.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
for (var i = 0, l = this.option.fontsizedata.fontSize.length; i < l; i++) {
a = create("a", $$(size.container, "div")[1]);
a.className = "c" + (i + 1);
a.setAttribute("href", "javascript:void(0);")
a.innerHTML = this.option.fontsizedata.fontSize[i];
addListener(a, "click", Bind(this, this.Execa, i, "fontSize"));
addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
}
} else this.fontsizepopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
FontName: function(o) {
if (!this.fontnamepopup) {
var name = new popoup({
width: "200px",
title: "字體"
}),
a;
this.fontnamepopup = name.container;
var pos = Getpos(o);
Css(name.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
for (var i = 0, l = this.option.fontsizedata.fontname.length; i < l; i++) {
a = create("a", $$(name.container, "div")[1]);
a.className = "n";
a.setAttribute("href", "javascript:void(0);");
a.innerHTML = this.option.fontsizedata.fontname[i];
addListener(a, "click", Bind(this, this.Execa, this.option.fontsizedata.fontname[i], "fontname"));
addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
}
} else this.fontnamepopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
makebody: function(o, w, t, f, n) {
if (!o) {
var self = this;
this[n] = new popoup({
width: w,
title: t
});
this[n].pos();
$$(this[n].container, "div")[1].innerHTML = "<div style=' margin-top:6px; margin-left:10px'><span >連接地址</span> <input style='width:200px;' type='text' /></div><div style='text-align:center; padding-top:15px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
this[n].elm = [$$(this[n].container, "input")[0], $$(this[n].container, "img")[0], $$(this[n].container, "img")[1]];
this[n].elm[0].focus()
addListener(this[n].elm[1], 'click', Bind(this, this.Execa, null, f));
addListener(this[n].elm[2], 'click',
function() {
self.lightbox.Close();
self[n].Close();
});
}
else with(this[n]) {
pos();
Show();
elm[0].value = "";
elm[0].focus();
}
},
Addtable: function() {
if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
this.rang = this.ed.selection.createRange();
}
this.lightbox.Show();
if (Sys.IE) this.rang = this.ed.selection.createRange();
if (!this.tablepopup) {
var self = this;
this.tablepopup = new popoup({
width: "300px",
title: "插入表格"
});
this.tablepopup.pos();
$$(this.tablepopup.container, "div")[1].innerHTML = "<div style='margin-left:30px; margin-top:7px;'>行數(shù)：<input style='width:50px; height:13px' type='text' /> 列數(shù)：<input style='width:50px;height:13px' type='text' /></div><div style=' margin-left:30px; margin-top:7px;'>表格的寬度：<input style='width:50px; height:13px' type='text' /> px</div><div style=' margin-left:30px; margin-top:7px;'>表行的高度：<input style='width:50px; height:13px' type='text' /> px<div style='text-align:center; margin-left:30px; margin-top:7px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
var o = $$(this.tablepopup.container, "input");
this.tablepopup.elm = [o[0], o[1], o[2], o[3], $$(this.tablepopup.container, "img")[0], $$(this.tablepopup.container, "img")[1]];
addListener(this.tablepopup.elm[4], 'click', Bind(this, this.Execa, null, "CreateTable"));
addListener(this.tablepopup.elm[5], 'click',
function() {
self.lightbox.Close();
self.tablepopup.Close();
});
}
else with(this.tablepopup) {
pos();
Show();
elm[0].focus();
}
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Hide: function(o) {
this.facebgpopup && (this.facebgpopup.style.display = "none");
this.fontsizepopup && (this.fontsizepopup.style.display = "none");
this.fontnamepopup && (this.fontnamepopup.style.display = "none");
this.fontcolorpopup && (this.fontcolorpopup.style.display = "none");
removeListener(this.ed, 'click', this.Fpop);
removeListener(document, 'mousedown', this.Fpop);
},
Bubble: function(e) {
if (Sys.IE) {
e.cancelBubble = true
} else {
e.stopPropagation()
}
},
Execa: function(num, stamp) {
var exec = {
fontname: function() {
this.fontnamepopup.style.display = "none";
this.ed.execCommand('FontName', false, num);
},
fontSize: function() {
this.fontsizepopup.style.display = "none";
this.ed.execCommand("FontSize", false, num + 1)
},
fontColor: function() {
this.fontcolorpopup.style.display = "none";
this.ed.execCommand("ForeColor", false, num);
},
CreateLink: function() {
this.lightbox.Close();
this.Linkpopoup.Close();
if (this.Linkpopoup.elm[0].value == "") return;
if (Sys.IE) {
this.rang.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
this.rang.parentElement().target = "_blank ";
}
else {
this.ed.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
this.rang = this.iframe.contentWindow.getSelection().getRangeAt(0);
this.rang.commonAncestorContainer.parentNode.target = "_blank ";
}
},
InsertImage: function() {
this.lightbox.Close();
this.Imagepopoup.Close();
if (this.Imagepopoup.elm[0].value == "") return;
Sys.IE ? this.rang.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value) : this.ed.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value);
},
Expression: function() {
this.facebgpopup.style.display = "none";
Sys.IE && (this.iframe.contentWindow.focus());
this.ed.execCommand("InsertImage", false, num);
},
CreateTable: function() {
this.lightbox.Close();
this.tablepopup.Close();
var o = this.tablepopup.elm,
p = null;
if (Sys.IE) {
this.rang.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
p = this.rang.parentElement();
}
else {
this.ed.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
p = this.iframe.contentWindow.getSelection().getRangeAt(0).commonAncestorContainer;
}
var tab = createtab(o[0].value, o[1].value,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#CCCCCC",
width: o[2].value
});
},
null,
function(i, j, td) {
td.height = o[3].value;
td.width = o[2].value / o[1].value;
td.style.backgroundColor = "#FFFFFF"
},
this.ed);
var imgs = p.getElementsByTagName("img");
for (var i = 0, l = p.childNodes.length; i < l; i++) {
if (imgs[i].src == "http://xxx.com/xxxxx.gif") {
p.replaceChild(tab, imgs[i])
}
}
p.insertBefore(this.ed.createElement("br"), tab.nextSibling);
}
};
Bind(this, exec[stamp])();
}
});
var popoup = new Class({
options: {
width: "200px",
title: "標(biāo)題"
},
initialize: function(options) {
this.container = create("div", document.body);
Extend(this.options, options);
this.title = this.options.title;
this.container.className = "pp";
this.container.style.width = this.options.width;
this.container.innerHTML = "<div class='ppt'><span style='margin-left:8px;'></span></div><div style='height:auto; width:auto; padding:7px; background-color:#FFFFFF'></div>";
this.w = this.container.offsetWidth;
this.h = this.container.offsetHeight;
$$(this.container, "span")[0].innerHTML = this.title;
},
pos: function() {
var str = "left:" + (Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) - this.w) / 2 + "px;top:" + ((Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight) - this.h) / 2 + document.documentElement.scrollTop) + "px"
Css(this.container, str);
},
Show: function() {
this.container.style.display = "";
},
Close: function() {
this.container.style.display = "none";
}
})
var LightBox = {
obj: null,
config: {
Color: "#fff",
Opacity: 80,
zIndex: 5
},
init: function(options) {
Extend(this.config, options || {});
Extend(this, this.config);
delete this.config;
this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
var str = "display:none; z-index:" + this.zIndex + ";left:0px;top:0px;position:fixed;width:100%;height:100%;background-color:" + this.Color + (Sys.IE ? ";filter : alpha(opacity:" + this.Opacity + ")": ";opacity :" + this.Opacity / 100);
Css(this.obj, str);
if (Sys.IE6) {
this.obj.style.position = "absolute";
var _self = this;
this._resize = function() {
_self.obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
_self.obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
};
this.obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>';
}
return this;
},
Show: function() {
if (Sys.IE6) {
this._resize();
addListener(window, "resize", this._resize);
}
this.obj.style.display = "block";
},
Close: function() {
this.obj.style.display = "none";
if (Sys.IE6) removeListener(window, "resize", LightBox._resize);
}
}
window.onload = function() {
var data = [{
Class: "span0",
hover: "span0_hover",
title: "加粗",
action: "Exec",
args: "bold"
},
{
Class: "span1",
hover: "span1_hover",
title: "斜體",
action: "Exec",
args: "Italic"
},
{
Class: "span2",
hover: "span2_hover",
title: "下劃線",
action: "Exec",
args: "Underline"
},
{
Class: "span3",
hover: "span3_hover",
title: "字號(hào)",
action: "Fontsize",
args: null
},
{
Class: "span4",
hover: "span4_hover",
title: "字體",
action: "FontName",
args: null
},
{
Class: "span5",
hover: "span5_hover",
title: "文字顏色",
action: "Fontcolor",
args: null
},
{
Class: "span6",
hover: "span6_hover",
title: "插入鏈接",
action: "CreateLink",
args: null
},
{
Class: "span7",
hover: "span7_hover",
title: "剪貼",
action: "Exec",
args: "Cut"
},
{
Class: "span8",
hover: "span8_hover",
title: "復(fù)制",
action: "Exec",
args: "Copy"
},
{
Class: "span9",
hover: "span9_hover",
title: "左對(duì)齊",
action: "Exec",
args: "JustifyLeft"
},
{
Class: "span10",
hover: "span10_hover",
title: "居中對(duì)齊",
action: "Exec",
args: "JustifyCenter"
},
{
Class: "span11",
hover: "span11_hover",
title: "右對(duì)齊",
action: "Exec",
args: "JustifyRight"
},
{
Class: "span12",
hover: "span12_hover",
title: "項(xiàng)目符號(hào)",
action: "Exec",
args: "InsertUnorderedList"
},
{
Class: "span13",
hover: "span13_hover",
title: "編號(hào)",
action: "Exec",
args: "InsertOrderedList"
},
{
Class: "span14",
hover: "span14_hover",
title: "插入表格",
action: "Addtable",
args: null
},
{
Class: "span15",
hover: "span15_hover",
title: "減少縮進(jìn)",
action: "Exec",
args: "Outdent"
},
{
Class: "span16",
hover: "span16_hover",
title: "增加縮進(jìn)",
action: "Exec",
args: "Indent"
},
{
Class: "span17",
hover: "span17_hover",
title: "清除樣式",
action: "Exec",
args: "RemoveFormat"
},
{
Class: "span18",
hover: "span18_hover",
title: "插入圖片",
action: "InsertImage",
args: null
},
{
Class: "span19",
hover: "span19_hover",
title: "插入表情",
action: "Expression",
args: null
},
{
Class: "span20",
hover: "span20_hover",
title: "自動(dòng)排版",
action: "Layout",
args: null
}];
new Editer($('ss'), data, LightBox.init());
}
</script>
</body
</html>
相關(guān)文章
javascript編程起步（第二課）...2007-01-01
JavaScript中window、doucment、body的解釋
JavaScript中window、doucment、body是什么意思呢，下面為大家做個(gè)介紹，不知道的朋友可以參考下2013-08-08
JavaScript中判斷對(duì)象類型的幾種方法總結(jié)
本篇文章是對(duì)JavaScript中判斷對(duì)象類型的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
幾種經(jīng)典排序算法的JS實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇幾種經(jīng)典排序算法的JS實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-03
客戶端腳本中常常出現(xiàn)的一些問(wèn)題和調(diào)試技巧
客戶端腳本中常常出現(xiàn)的一些問(wèn)題和調(diào)試技巧...2007-01-01
深入學(xué)習(xí)JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值
這篇文章主要介紹了深入學(xué)習(xí)JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07
JS 實(shí)現(xiàn)計(jì)算器詳解及實(shí)例代碼（一）
這篇文章主要介紹了JS 實(shí)現(xiàn)計(jì)算器詳解及實(shí)例代碼的相關(guān)資料,這里對(duì)實(shí)現(xiàn)計(jì)算器的思路及實(shí)現(xiàn)步驟進(jìn)行了一一詳解，需要的朋友可以參考下2017-01-01
使用JavaScript 實(shí)現(xiàn)對(duì)象 勻速/變速運(yùn)動(dòng)的方法
本篇文章是對(duì)JavaScript中實(shí)現(xiàn)對(duì)象勻速/變速運(yùn)動(dòng)的方法進(jìn)行了詳細(xì)的介紹。需要的朋友參考下2013-05-05
Javascript中indexOf()和lastIndexOf應(yīng)用方法實(shí)例
這篇文章主要介紹了JavaScript中的indexOf()和lastIndexOf()方法使用實(shí)例,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),有需要的朋友可以參考下。2016-08-08
Javascript基礎(chǔ)教程之關(guān)鍵字和保留字匯總
這篇文章主要介紹了Javascript基礎(chǔ)教程之關(guān)鍵字和保留字匯總,需要的朋友可以參考下2015-01-01