學習js線上html(富文本,所見即所得)編輯器_基礎知識
- WBOY原創
- 2016-05-16 17:46:141355瀏覽
你要的是所見即所得HTML編輯器，簡單來說需要幾個基本步驟：
1，需要一個可以編輯同時又可顯效果的編輯框。 textarea不行，它只能用來輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本。
你可以使用iframe來實現，修改iframe的designMode屬性使其可以被編輯。
複製程式碼 代碼如下:
<script>myEditer.document.designMode = 'on';</script>
這樣你就可以在這個iframe區域寫字了。
2，選取要新增樣式的文字。通常我們用WORD編輯一段文字的樣式時，通常是先打字，再編輯樣式。所以你需要一個選取要處理文字的方法。 JS的selection.createRange()可以選取文本，回傳一個對象，你可以透過存取該對象的text屬性來得到被選取的文本。
複製程式碼 代碼如下:
<script> <BR>myEditer.document.designMode = 'on'; <BR>function Bold(){ <BR>var sel = myEditer.document.selection.createRange(); <BR>alert(sel.text); <BR>} <BR></script>
3，改變被選取文字的樣式。 selection.createRange()選取文本，傳回一個對象，該物件有一個方法execCommand()，可以用來改變被選取文本的樣式。
複製程式碼 代碼如下:
<script> <BR>myEditer.document.designMode = 'on'; <BR>function Bold(){ <BR>var sel = myEditer.document.selection.createRange(); <BR>//alert(sel.text); <BR>sel.execCommand("Bold" ) <BR>} <BR></script>
execCommand()的常用用法：
字型--宋體、黑體、楷體等
execCommand ("fontname","",字體)
字號--字號大小
execCommand("fontsize","",字號)
加重
execCommand("Bold")
斜體
execCommand("Italic")
下劃線
execCommand("Underline")
刪除線
execCommand("StrikeThrough")
請問上左
execCommand("StrikeThrough")
」居左
execCommand("JustifyLeft") >居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪下
execCommand("Cut")
拷貝
execCommand("Copy ")
貼上
execCommand("Paste")
取消操作--IE5.0以後可以無限取消
execCommand("Undo")
重複操作
execCommand("Redo ")
把上面的每個用法用按鈕來實現，你就已經完成了一個簡單的可視文字編輯器。
document.execCommand()用法說明 程式碼如下:
Position 允許透過拖曳移動絕對定位的物件。
AbsolutePosition 設定元素的 position 屬性為「absolute」(絕對)。
BackColor 設定或取得目前選取區的背景顏色。
BlockDirLTR 目前尚未支援。
BlockDirRTL 目前尚未支援。
Bold 切換目前選取區的粗體顯示與否。
BrowseMode 目前尚未支援。
Copy 將目前選取區複製到剪貼簿。
CreateBookmark 建立一個書籤錨或取得目前選取區或插入點的書籤錨的名稱。
CreateLink 在目前選取區上插入超級鏈接，或顯示一個對話框允許使用者指定要為目前選取區插入的超級連結的 URL。
Cut 將目前選取區複製到剪貼簿並刪除之。
Delete 刪除目前選取區。
DirLTR 目前尚未支援。
DirRTL 目前尚未支援。
EditMode 目前尚未支援。
FontName 設定或取得目前選取區的字體。
FontSize 設定或取得目前選取區的字體大小。
ForeColor 設定或取得目前選取區的前景(文字)顏色。
FormatBlock 設定目前區塊格式化標籤。
Indent 增加選取文字的縮排。
InlineDirLTR 目前尚未支援。
InlineDirRTL 目前尚未支援。
InsertButton 用按鈕控制項覆蓋目前選取區。
InsertFieldset 用方框覆蓋目前選取區。
InsertHorizontalRule 用水平線覆蓋目前選取區。
InsertIFrame 用內嵌框架覆蓋目前選取區。
InsertImage 用影像覆蓋目前選取區。
InsertInputButton 用按鈕控制項覆蓋目前選取區。
InsertInputCheckbox 用複選框控制項覆蓋目前選取區。
InsertInputFileUpload 用檔案上載控制項覆寫目前選取區。
InsertInputHidden 插入隱藏控制會覆蓋目前選取區。
InsertInputImage 用影像控制項覆蓋目前選取區。
InsertInputPassword 用密碼控制項覆蓋目前選取區。
InsertInputRadio 以單選鈕控制裝置目前選取區。
InsertInputReset 用重置控制項覆蓋目前選取區。
InsertInputSubmit 用提交控制項覆蓋目前選取區。
InsertInputText 用文字控制項覆蓋目前選取區。
InsertMarquee 用空白字幕覆蓋目前選取區。
InsertOrderedList 切換目前選取區是編號清單還是常規格式化區塊。
InsertParagraph 用換行覆蓋目前選取區。
InsertSelectDropdown 以下拉方塊控制項覆寫目前選取區。
InsertSelectListbox 用列錶框控制項覆寫目前選取區。
InsertTextArea 以多行文字輸入控制項覆寫目前選取區。
InsertUnorderedList 切換目前選取區是項目符號清單還是常規格式化區塊。
Italic 切換目前選取區斜體顯示與否。
JustifyCenter 將目前選取區在所在格式化區塊置中。
JustifyFull 目前尚未支援。
JustifyLeft 將目前選取區所在格式化區塊左對齊。
JustifyNone 目前尚未支援。
JustifyRight 將目前選取區所在格式化區塊右對齊。
LiveResize 迫使 MSHTML 編輯器在縮放或移動過程中持續更新元素外觀，而不是只在移動或縮放完成後更新。
MultipleSelection 允許當使用者按住 Shift 或 Ctrl 鍵時一次選取多於一個站點可選元素。
Open 開啟。
Outdent 減少選取區所在格式化區塊的縮排。
OverWrite 切換文字狀態的插入和覆蓋。
Paste 用剪貼簿內容覆蓋目前選取區。
PlayImage 目前尚未支援。
Print 開啟列印對話方塊以便使用者可以列印目前頁。
Redo 重做。
Refresh 刷新目前文件。
RemoveFormat 從目前選取區中刪除格式化標籤。
RemoveParaFormat 目前尚未支援。
SaveAs 將目前 Web 頁面儲存為檔案。
SelectAll 選取整個文件。
SizeToControl 目前尚未支援。
SizeToControlHeight 目前尚未支援。
SizeToControlWidth 目前尚未支援。
Stop 停止。
StopImage 目前尚未支援。
StrikeThrough 目前尚未支援。
Subscript 目前尚未支援。
Superscript 目前尚未支援。
UnBookmark 從目前選取區中刪除全部書籤。
Underline 切換目前選取區的底線顯示與否。
Undo 撤銷。
Unlink 從目前選取區中刪除全部超級連結。
Unselect 清除目前選取區的選取狀態。
簡單的開源編輯器
複製程式碼複製程式碼複製程式碼複製程式碼複製碼
>
編輯器標題>
body{ 字體大小：12px;}
#ed{ height:300px;}寬度： 800px；背景顏色:#fff }
.sssss{ 背景圖片:url(http://www.zzsky.cn/build/images/20099493121.gif)}
.tag{ 背景圖片:url( http ://www.zzsky.cn/build/images/20099493121.gif);高度:22px;顯示：內聯表；浮動：左； ;遊標：指針；頂部邊距：8px；左邊距：5px；右邊距：2px；垂直對齊：中間；行高:20px;}
.span0_hover{背景位置:-0px -2px;寬度:22px} .span2_hover {背景位置：-58px -2px;寬度：22px}
.span3_hover{背景位置：-86px -57px;寬度：73px}
.span4_hover{x-8px;寬度： 73px}
.span5_hover{背景位置：-164px -2px;寬度：22px;背景顏色:#000000}
.span6_hover{背景位置:-194px -2px;.22px; span7_hover{背景位置:-45px -192px;寬度:22px}
.span8_hover {背景位置：-76px -192px;寬度：22px}
.span9_hover{背景位置：-58px -247px;
.span10_hover{背景位置：-86px -247px;寬度： 22px}
.span11_hover{背景位置:-113px -247px;寬度:22px}
.ss12_hover>.s12_h76px -px1221px寬度:22px}
.span13_hover{背景位置: -505px -192px;寬度:22px}
.span14_hover{背景位置:-333px -247px;寬度:22px} .span16_hover{背景位置:-560px -192px;寬度:22px}
.span17_hover{背景位置:-455px -247px;背景位置:-222px -2px;寬度：73px}
.span19_hover{背景位置：-380px -2px;寬度：74px}
.span20_hover{背景位置：-460px -2px;寬度：711px >.span0{背景-位置:-0px -57px;寬度:22px}
.span1{背景位置:-30px -57px;寬度:22px}
.span2{背景位置:-58px -57px;寬度:22px}
.span3{背景位置:-86px -57px;寬度:73px}
.span4{背景位置:-86px -28px;寬度:73px}
.span5{背景位置:-164ppx - 57px;寬度:22px;背景顏色:#000000}
.span6{背景位置:-194px -57px;寬度:22px}
.span7{背景位置:-45px -84px;寬度:22px }
.span8{背景位置:-76px -84px;寬度:22px}
.span9{背景位置:-58px -140px;寬度:22px}
.span10{背景位置:- 86px寬度140px; :22px}
.span11{背景位置:-113px -140px;寬度:22px}
.span12{背景位置:-476px -84px;寬度:22px}
. span13{背景位置: -84px;寬度:22px}
.span14{背景位置:-333px -140px;寬度:22px}
.span15{背景位置:-532px -84px;寬度:22px}
.span16{背景位置:-560px -84px;寬度:22px}
.span17{背景位置:-455px -140px;寬度:22px}
.span18{背景位置:-222px -57px}
.span18{背景位置:-222px -57px; .span19{背景位置:-380px -57px;寬度:74px}
.span20{背景位置:-460px -57px;寬度:71px}
.span0_active{背景位置:-0px -28px寬度: }
.span1_active{背景位置:-30px -28px;寬度:22px}
.span2_active{背景位置:-58px -28px ;寬度:22px}
.span3_{activepx -28px ;寬度:22px}
.span3_active{px:-476p ;寬度:22px}
.span4_active{背景位置:-505px -299px;寬度:22px}
.ebody{ 高度：汽車;寬度：760px；邊框：1px 實心}#99999999999999999999999999999999999999999999位>.寬度：100%;高度：36px；背景顏色：#F0F2F5;};
.edit{ 高度:550px;寬度：100%；邊框：0px;}
.popupfont{ 寬度：200px;高度：自動；邊框：1px實心#7B9EBD；背景顏色：#F7F7F7；位置：絕對；填充：3px； }
a.c1{ 寬度：96%;高度：自動；字體大小：10px；顯示：塊；邊框： 1px實體#F7F7F7；填滿：3px；顏色：#666666；文字裝飾：無；}
a.c1:hover{寬度：96%;高度：自動；字體大小：10px；邊框：1px實心#FFCF00；顯示：塊；背景顏色：#F7EBBD；填充：3px；顏色：#666666；文字裝飾：無；}
a.c2{ 寬度：96%;高度：自動；字體大小：12px；顯示：塊；邊框：1px 實心#F7F7F7；填充：3px；顏色：#666666；文字裝飾：無；}
a.c2:hover{寬度：96%;高度：自動；字體大小：12px；邊框：1px實心### FFCF00；顯示：區塊；背景顏色：#F7EBBD；填滿：3px；顏色：#666666；文字裝飾：無；}
a.c3{ 寬度：96%;高度：自動；字體大小：14px；顯示：塊；邊框：1px實心#F7F7F7；填充：3px；顏色：#666666；文字裝飾：無；}
a.c3:hover{寬度：96%;高度：自動；字體大小：14px；邊框：1px實心#FFCF00；顯示：塊；背景顏色：#F7EBBD；填滿：3px；顏色：#666666；文字裝飾：無；}
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;
}
var Sys = (function(ua) {
var s = {};
s.IE = ua.match(/msie ([d .] )/) ? true: false;
s.Firefox = ua.match(/firefox/([d.] )/) ? true: false; /([d.] )/) 嗎？ ;
s.IE6 = (s.IE && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] = = 6))
s.IE7 = (s .IE && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 7)) ? ; IE8 = (s.IE && ([/MSIE (d). 0/i.exec(navigator.userAgent)][0][1] == 8)) ? true: false >})(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
}
};
var Css = function(e, o) {
if (typeof o == "string") {
e.style.cssText = o;
回傳；
}
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(元素);
傳回元素；
};
函數 getTarget(e) {
e = e ||視窗.事件;
返回 e.srcElement || e.目標；
};
function createtab(tri, tdi, raisetab, raisetr, raisetd, p) {
var table = p ? p.createElement(“表”) : 創建(“表”);
arisetab && raisetab(表);
var tbody = p ? p.createElement("tbody") : 創建("tbody");
for (var i = 0; i var tr = p ? p.createElement("tr") : 創建("tr");
arisetr && raisetr(i, tr);
for (var j = 0; j var td = p ? p.createElement("td") : 創建("td");
arisetd && raisetd(i, j, td);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
回傳表；
};
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.getCompulatedStyle(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);
};
函數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) this.initialize.apply(this, 參數) : this;
};
_class.prototype = 屬性；
回傳_class;
};
var Editor = new Class({
var Editor = new Class({
選項: {
寬度: 890,
高度: 700,
facebg: [{
bgimg: "-4px -4px",
標題: "」,
微笑wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220846596.p.gif"
},
{
bgimg: "- 31px -4px",
標題: "大笑",
wl: 22,
src: "http://album.hi.csdn.net /app_uploads/wtcsy /20090719/220859814.p. gif"
},
{
bgimg: "-58px -4px",
title: "竊笑",
wl: 22,
src: "http笑",
wl: 22,
src: "http笑",
wl: 22,
src: "http笑",
wl: 22,
src: "http笑://album.hi.csdn.net/app_uploads/wtcsy/20090719/220911971.p.gif"
},
{
bgimg: "- 85px -4px" , <:4px>wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif "
},
{
title: "鬼臉",
wl: 22,
src: "http://album.hi.csdn. net/app_uploads/wtcsy/20090719 /220928549.p.gif"
},
{
bgimg: "-139px -4px",
title: "色色",
wl: 22 ,
title: "色色",
wl: 22 ,
src: " http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220951955.p.gif"
},
{
bgimg: " -167px -4px ",
, "暴牙",
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); //编辑区
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; //选中区
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 = "显示源代码";
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 ? "": "";
this.ed.write("" div "");
this.ed.close();
this.ed.contentEditable = true;
this.ed.designMode = "on"; //設定編輯區為可編輯
for (var i = 0, l = data.length; i var o = create(" span", this.toolbar);
Attr(o, {
標題: data[i].title,
活動: false,
不可選擇: "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 , "模糊", Bind(this,
function() {
this.isfocus = false;
}));
addListener(this.ed, 'mousedown', Bind(這個，這個。
addListener(this.ed, 'mouseup', Bind(this, this.Show));
/////////////////////////////這2個事件是來判斷地點所在位置是否其他編輯
addListener( this .original , '點擊', Bind(this, this.Showoriginal, this.original)); //來源顯示程式碼
},
Changebgcolor: function(o, name, p) {
if (o.active) return;
o.className = "標籤" 名稱;
},
顯示: function() {
var spans = $$(this.toolbar, "span"),
是;
var elm = [[spans[0], "粗體", "標籤span0_active", "標籤span0"], [spans[1], "斜體", "標籤span1_active", "標籤span1"], [spans[2]、「底線」、「標籤span2_active」、「標籤span2」]、[spans[12]、「InsertUnorderedList」、「標籤span3_active」、「標籤span12」]、[spans[13]、「InsertOrderedList ” ” ， “標籤span4_active”，" span13"]];
for (var i = 0, l = elm.length; i
elm[i][0].className = 是？ elm[i][2] : elm[i][3];
elm[i][0].active = 是;
}
},
Showoriginal: function(o) {
if (!this.toolbarlayer) {
this.工具列層= create("div", document.body);
this.toolbarlayer.className = "toolbarlayer";
var pos = Getpos(this.toolbar);
CSS(this.toolbarlayer, {
寬度: this.option.width "px",
左: pos.x "px",
上: pos.y "px"
});
}
if (o.checked) {
this.iframe.style.display = "none";
this.textarea.style.display = "區塊";
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) {
回傳;
}
},
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");
},
字型顏色: function(o) {
var self = this;
if (!this.fontcolorpopup) {
var color = new popoup({
寬度: "210px",
標題: "顏色選擇"
});
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,
自己: 0,
bgColor: "#333333"
});
},
null,
function(i , j, td) {
var color = i Attr(td, {
寬度: 10,
高度: 10 ,
不可選擇: "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 = "
连接地址
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 = "
行数： 列数：
表格的宽度： px
表行的高度： px "
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: "标题"
},
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 = "
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) - .w) /this.w) /this.w) /this.w) / 2 "px;top:" ((Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight) - this.h) / 2 document.documentElement.scrollTop) "px"
Css(this. str);
},
顯示: function() {
this.container.style.display = "";
},
關機: function() {
this. container.style.display = "none";
}
})
var LightBox = {
obj: null,
config: {
顏色: "#fff",
不透明度: 80,
zIndex: 5
},
init: function(options) {
Extend(this.config, options || {}); , this.config);
刪除this.config;
this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);無； z-index:" this.zIndex ";left:0px;top:0px;position:fixed;width:100%;height:100%;background-color:" this.Color (Sys.IE ? ";filter : alpha (不透明度:" this.Opacity ")": ";opacity :" this.Opacity / 100);
CSS(this.obj, str);
if (Sys.IE6) {
這個。 obj.style.position = "絕對";
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 = ' ;' ;
}
回傳這個；
},
顯示: function() {
if (Sys.IE6) {
this._resize(); (視窗, "調整大小", this._resize);
}
this.obj.style.display = "block";
},
關閉: 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"
},
{
類: "span1",
hover: "span1_hover",
title: "斜體",
action: "Exec",
args: "斜體"
},
{
Class: "span2",
hover: "span2_hover ",
標題：“底線”，
操作：“執行”，
參數：“下劃線”
}，
{
類別：“span3”，
懸停停: "span3_hover",
title: "字號",
action: "字體大小",
args: null
},
{
類別: "span4",
懸停：“span4_hover”，
標題：“字體”，
操作：“字體名稱”，
參數：null
}，
{
類別：“ span5 ”，
hover: "span5_hover",
title: "文字顏色",
action: "字體顏色",
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args： Class: "span6",
hover: "span6_hover",
title: "插入連結",
action: "CreateLink",
args: null
},
{
args: null
},
{
Class: "span7 ",
懸停：“span7_hover”，
標題：“剪切”，
操作：“執行”，
參數：“剪切”
} ，
{
類別: "span8",
hover: "span8_hover",
title: "複製",
action: "Exec",
args: "複製"
},
{
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: "🎜>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: "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: "縮排"
},
{
類別: "span17",
href: "span17_hover",
title: "清除樣式",
action: "Exec",
args: "RemoveFormat"
},
{
Class）Class span18" ,
hover: "span18_hover ",
title: "插入圖片",
action: "InsertImage",
args: null
}, { args: null }, { Class Class ( > Class: "span20", href: "span20_hover", title: "自動排版", action: "版面配置", args: null }]; 新編輯器($('ss'), data, LightBox.init()); } 腳本> 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: "标题"
},
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 = "
";
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) - .w) /this.w) /this.w) /this.w) / 2 "px;top:" ((Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight) - this.h) / 2 document.documentElement.scrollTop) "px"
Css(this. str);
},
顯示: function() {
this.container.style.display = "";
},
關機: function() {
this. container.style.display = "none";
}
})
var LightBox = {
obj: null,
config: {
顏色: "#fff",
不透明度: 80,
zIndex: 5
},
init: function(options) {
Extend(this.config, options || {}); , this.config);
刪除this.config;
this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);無； z-index:" this.zIndex ";left:0px;top:0px;position:fixed;width:100%;height:100%;background-color:" this.Color (Sys.IE ? ";filter : alpha (不透明度:" this.Opacity ")": ";opacity :" this.Opacity / 100);
CSS(this.obj, str);
if (Sys.IE6) {
這個。 obj.style.position = "絕對";
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 = ' ;' ;
}
回傳這個；
},
顯示: function() {
if (Sys.IE6) {
this._resize(); (視窗, "調整大小", this._resize);
}
this.obj.style.display = "block";
},
關閉: 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"
},
{
類: "span1",
hover: "span1_hover",
title: "斜體",
action: "Exec",
args: "斜體"
},
{
Class: "span2",
hover: "span2_hover ",
標題：“底線”，
操作：“執行”，
參數：“下劃線”
}，
{
類別：“span3”，
懸停停: "span3_hover",
title: "字號",
action: "字體大小",
args: null
},
{
類別: "span4",
懸停：“span4_hover”，
標題：“字體”，
操作：“字體名稱”，
參數：null
}，
{
類別：“ span5 ”，
hover: "span5_hover",
title: "文字顏色",
action: "字體顏色",
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args: null
},
{
args： Class: "span6",
hover: "span6_hover",
title: "插入連結",
action: "CreateLink",
args: null
},
{
args: null
},
{
Class: "span7 ",
懸停：“span7_hover”，
標題：“剪切”，
操作：“執行”，
參數：“剪切”
} ，
{
類別: "span8",
hover: "span8_hover",
title: "複製",
action: "Exec",
args: "複製"
},
{
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: "🎜>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: "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: "縮排"
},
{
類別: "span17",
href: "span17_hover",
title: "清除樣式",
action: "Exec",
args: "RemoveFormat"
},
{
Class）Class span18" ,
hover: "span18_hover ",
title: "插入圖片",
action: "InsertImage",
args: null
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn