学习js在线html(富文本,所见即所得)编辑器 |
|
本文标签：编辑器,在线编辑器,js编辑器 你要的是所见即所得HTML编辑器，简单来说需要几个基本步骤： 1，需要一个可以编辑同时又可显效果的编辑框 。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本 。 你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑 。 复制代码 代码如下: <iframe id="myEditer" width="100%" height="150px"></iframe> <script>myEditer.document.designMode = on;</script> 这样你就可以在这个iframe区域里写字了 。 2，选中要添加样式的文字 。通常我们用WORD编辑一段文字的样式时，一般是先打字，再编辑样式 。所以你需要一个选中要处理文本的方法 。JS的selection.createRange()可以选中文本，返回一个对象，你可以通过访问该对象的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()选中文本，返回一个对象，该对象有一个方法execCommand()，可以用来改变被选中文本的样式 。 复制代码 代码如下: <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") 重复操作 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 清除当前选中区的选中状态 。 一个简单的开源编辑器 复制代码 代码如下: <!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); //编辑区 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 = "<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"; //设置编辑区为可编辑 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个事件是来判断光标所在位置是否别编辑 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;>行数：<input style=width:50px; height:13px type=text /> 列数：<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: "标题" }, 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: "复制", 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> |
