學(xué)習(xí)js在線html(富文本,所見即所得)編輯器

更新時間：2012年12月18日 16:47:35 作者：

需要一個可以編輯同時又可顯效果的編輯框。textarea不行，它只能用來輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本,本文介紹所見即所得編輯器實現(xiàn)原理

你要的是所見即所得HTML編輯器，簡單來說需要幾個基本步驟：

1，需要一個可以編輯同時又可顯效果的編輯框。textarea不行，它只能用來輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本。
你可以使用iframe來實現(xiàn)，修改iframe的designMode屬性使其可以被編輯。

復(fù)制代碼代碼如下:

<iframe id="myEditer" width="100%" height="150px"></iframe> 
<script>myEditer.document.designMode = 'on';</script>

這樣你就可以在這個iframe區(qū)域里寫字了。

2，選中要添加樣式的文字。通常我們用WORD編輯一段文字的樣式時，一般是先打字，再編輯樣式。所以你需要一個選中要處理文本的方法。JS的selection.createRange()可以選中文本，返回一個對象，你可以通過訪問該對象的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()選中文本，返回一個對象，該對象有一個方法execCommand()，可以用來改變被選中文本的樣式。

復(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","",字體)
字號--字號大小
execCommand("fontsize","",字號)
加重
execCommand("Bold")
斜體
execCommand("Italic")
下劃線
execCommand("Underline")
刪除線
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷貝
execCommand("Copy")
粘貼
execCommand("Paste")
取消操作--IE5.0以后可以無限取消
execCommand("Undo")
重復(fù)操作
execCommand("Redo")

把上面的每個用法用按鈕來實現(xiàn)，你就已經(jīng)完成了一個簡單的可視文本編輯器。
document.execCommand()用法說明

復(fù)制代碼代碼如下:

Position 允許通過拖曳移動絕對定位的對象。 
AbsolutePosition 設(shè)定元素的 position 屬性為“absolute”(絕對)。 
BackColor 設(shè)置或獲取當(dāng)前選中區(qū)的背景顏色。 
BlockDirLTR 目前尚未支持。 
BlockDirRTL 目前尚未支持。 
Bold 切換當(dāng)前選中區(qū)的粗體顯示與否。 
BrowseMode 目前尚未支持。 
Copy 將當(dāng)前選中區(qū)復(fù)制到剪貼板。 
CreateBookmark 創(chuàng)建一個書簽錨或獲取當(dāng)前選中區(qū)或插入點的書簽錨的名稱。 
CreateLink 在當(dāng)前選中區(qū)上插入超級鏈接，或顯示一個對話框允許用戶指定要為當(dāng)前選中區(qū)插入的超級鏈接的 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 增加選中文本的縮進。 
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ū)是編號列表還是常規(guī)格式化塊。 
InsertParagraph 用換行覆蓋當(dāng)前選中區(qū)。 
InsertSelectDropdown 用下拉框控件覆蓋當(dāng)前選中區(qū)。 
InsertSelectListbox 用列表框控件覆蓋當(dāng)前選中區(qū)。 
InsertTextArea 用多行文本輸入控件覆蓋當(dāng)前選中區(qū)。 
InsertUnorderedList 切換當(dāng)前選中區(qū)是項目符號列表還是常規(guī)格式化塊。 
Italic 切換當(dāng)前選中區(qū)斜體顯示與否。 
JustifyCenter 將當(dāng)前選中區(qū)在所在格式化塊置中。 
JustifyFull 目前尚未支持。 
JustifyLeft 將當(dāng)前選中區(qū)所在格式化塊左對齊。 
JustifyNone 目前尚未支持。 
JustifyRight 將當(dāng)前選中區(qū)所在格式化塊右對齊。 
LiveResize 迫使 MSHTML 編輯器在縮放或移動過程中持續(xù)更新元素外觀，而不是只在移動或縮放完成后更新。 
MultipleSelection 允許當(dāng)用戶按住 Shift 或 Ctrl 鍵時一次選中多于一個站點可選元素。 
Open 打開。 
Outdent 減少選中區(qū)所在格式化塊的縮進。 
OverWrite 切換文本狀態(tài)的插入和覆蓋。 
Paste 用剪貼板內(nèi)容覆蓋當(dāng)前選中區(qū)。 
PlayImage 目前尚未支持。 
Print 打開打印對話框以便用戶可以打印當(dāng)前頁。 
Redo 重做。 
Refresh 刷新當(dāng)前文檔。 
RemoveFormat 從當(dāng)前選中區(qū)中刪除格式化標(biāo)簽。 
RemoveParaFormat 目前尚未支持。 
SaveAs 將當(dāng)前 Web 頁面保存為文件。 
SelectAll 選中整個文檔。 
SizeToControl 目前尚未支持。 
SizeToControlHeight 目前尚未支持。 
SizeToControlWidth 目前尚未支持。 
Stop 停止。 
StopImage 目前尚未支持。 
StrikeThrough 目前尚未支持。 
Subscript 目前尚未支持。 
Superscript 目前尚未支持。 
UnBookmark 從當(dāng)前選中區(qū)中刪除全部書簽。 
Underline 切換當(dāng)前選中區(qū)的下劃線顯示與否。 
Undo 撤消。 
Unlink 從當(dāng)前選中區(qū)中刪除全部超級鏈接。 
Unselect 清除當(dāng)前選中區(qū)的選中狀態(tà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: ["字號1", "字號2", "字號3", "字號4", "字號5", "字號6", "字號7"], 
fontname: ["宋體", "黑體", "楷體", "隸書", "幼圓", "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個事件是來判斷光標(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: "字號" 
}), 
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: "字號", 
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: "左對齊", 
action: "Exec", 
args: "JustifyLeft" 
}, 
{ 
Class: "span10", 
hover: "span10_hover", 
title: "居中對齊", 
action: "Exec", 
args: "JustifyCenter" 
}, 
{ 
Class: "span11", 
hover: "span11_hover", 
title: "右對齊", 
action: "Exec", 
args: "JustifyRight" 
}, 
{ 
Class: "span12", 
hover: "span12_hover", 
title: "項目符號", 
action: "Exec", 
args: "InsertUnorderedList" 
}, 
{ 
Class: "span13", 
hover: "span13_hover", 
title: "編號", 
action: "Exec", 
args: "InsertOrderedList" 
}, 
{ 
Class: "span14", 
hover: "span14_hover", 
title: "插入表格", 
action: "Addtable", 
args: null 
}, 
{ 
Class: "span15", 
hover: "span15_hover", 
title: "減少縮進", 
action: "Exec", 
args: "Outdent" 
}, 
{ 
Class: "span16", 
hover: "span16_hover", 
title: "增加縮進", 
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: "自動排版", 
action: "Layout", 
args: null 
}]; 
new Editer($('ss'), data, LightBox.init()); 
} 
</script> 
</body 
</html>