做网站是先买域名还是,网站开发 视频存储,海兴网站建设,中国广告网//所有的图标用的字符#xff0c;以后可以换成网上的css-icon图标库的图标#xff0c;再设置一下css样式即可简单的使用 //这里所有的标签元素都是直接获取#xff0c;没有使用委托#xff0c;如果使用委托性能会更好#xff0c;这里只做了简单的清理#xff0c;让内存回…//所有的图标用的字符以后可以换成网上的css-icon图标库的图标再设置一下css样式即可简单的使用 //这里所有的标签元素都是直接获取没有使用委托如果使用委托性能会更好这里只做了简单的清理让内存回收
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml langUTF-8/html
htmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8/link typetext/css hrefpublic/css/test.css relstylesheet/script typetext/javascript srccommon.js/scripttitle制作富文本的测试页面/titlestyle typetext/css#containerIframe{width: 600px;height: 600px;margin: 0 auto;margin-top: 10px;font-size: 1em;border: 1px solid #ccc;}#containerIframe #toolbar {height: 30px;background-color: #C0C0C0;width: 100%;}#toolbar a{margin-right: 2px;margin-left: 5px;line-height: 1.95em;font-size: 0.875em;}#toolbar a:link{text-decoration: none;color: #333333;}#heading{list-style: none;margin: 0;padding: 0;font-size: 1em;position: relative;top: 0px;left: 55px;width: 30px;background-color: #ccc;}#heading li{width: 25px;height: 20px;text-align: center;}.clear {clear:both;}/style/headbodydiv idcontainerIframediv idtoolbara hrefJavascript:void(0) data-typeB title字符加粗B/aa hrefJavascript:void(0) data-typeI stylefont-style:italic title斜体I/aa hrefJavascript:void(0) data-typeU styletext-decoration:underline title字符下划线U/aa hrefJavascript:void(0) data-typeH title标题H/aa hrefJavascript:void(0) data-typeleft title字符居左左/aa hrefJavascript:void(0) data-typecenter title字符居左中/aa hrefJavascript:void(0) data-typeright title字符居右右/aa hrefJavascript:void(0) data-typeP title插入段落P/aa hrefJavascript:void(0) data-typeindent title缩进文本缩/aa hrefJavascript:void(0) data-typeoutdent title减少缩进凸/aa hrefJavascript:void(0) data-typeforecolor title文本颜色色/aa hrefJavascript:void(0) data-typeremoveformat title删除粘贴样式清理/aa hrefJavascript:void(0) data-typecreatelink title创建URLURL/aa hrefJavascript:void(0) data-typeunlink title删除URL删除URL/aa hrefJavascript:void(0) data-typeollist title有序排列有序/aa hrefJavascript:void(0) data-typelilist title无序排列无序/aa hrefJavascript:void(0) data-typeimage title插入图片图片/aul idheading styledisplay:none;lia hrefJavascript:void(0) data-typeh1h1/a/lilia hrefJavascript:void(0) data-typeh2h2/a/lilia hrefJavascript:void(0) data-typeh3h3/a/lilia hrefJavascript:void(0) data-typeh4h4/a/lilia hrefJavascript:void(0) data-typeh5h5/a/li/ul/div iframe namerichedit styleheight:100%;width:100%; src frameborder0 allowTransparenctytrue idedit scrollingno/iframe input typesubmit namesubmit1 value提交 / /divscript typetext/javascript//获取到iframe框架var editdocument.getElementById(edit);//这句是获取到iframe框架下的文档document或window,兼容IEeditPaneedit.contentDocument|| edit.contentWindow.document;editPane.designModeon;editPane.open();editPane.write(p colorblack size0.7 classeditor编辑区/p);editPane.close();//工具标签var toolbardocument.getElementById(toolbar);//获取工具标签下面所有的a标签var atoolbar.getElementsByTagName(a);var headingdocument.getElementById(heading);for(var i0,lena.length;ilen;i){//循环得到特征data-type的值switch(a[i].getAttribute(data-type)){case B: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(Bold,false,null);});break;case I: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(italic,false,null);}); break;case U: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(underline,false,null);}); break;case H: EventUtil.addHandler(a[i],click,function(){if(heading.style.displaynone){heading.style.displayblock;}else{heading.style.displaynone;}//循环H标签的菜单点击谁则相应的设置成谁var haheading.getElementsByTagName(a);for(var j0,lengha.length;jleng;j){switch(ha[j].getAttribute(data-type)){case h1: EventUtil.addHandler(ha[j],click,function(){var formateditPane.queryCommandValue(formatBlock);console.log(format);if(format.toLowerCase()p){editPane.execCommand(formatBlock,false,h1);}else{editPane.execCommand(formatBlock,false,p);}heading.style.displaynone;});break;case h2: EventUtil.addHandler(ha[j],click,function(){var formateditPane.queryCommandValue(formatBlock);if(format.toLowerCase()p){editPane.execCommand(formatBlock,false,h2);}else if(format.toLowerCase()h1 || format.toLowerCase()h3 ||format.toLowerCase()h4||format.toLowerCase()h5){editPane.execCommand(formatBlock,false,h2);}else{editPane.execCommand(formatBlock,false,p);}heading.style.displaynone;});break; case h3: EventUtil.addHandler(ha[j],click,function(){var formateditPane.queryCommandValue(formatBlock);if(format.toLowerCase()p){editPane.execCommand(formatBlock,false,h3);}else{editPane.execCommand(formatBlock,false,p);}heading.style.displaynone;});break;case h4: EventUtil.addHandler(ha[j],click,function(){var formateditPane.queryCommandValue(formatBlock);if(format.toLowerCase()p){editPane.execCommand(formatBlock,false,h4);}else{editPane.execCommand(formatBlock,false,p);}heading.style.displaynone;});break;case h5: EventUtil.addHandler(ha[j],click,function(){var formateditPane.queryCommandValue(formatBlock);if(format.toLowerCase()p){editPane.execCommand(formatBlock,false,h5);}else{editPane.execCommand(formatBlock,false,p);}heading.style.displaynone;});break;}}hanull;}); break;case left: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(JustifyLeft,false,null);}); break; case center: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(JustifyCenter,false,null);}); break; case right: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(JustifyRight,false,null);}); break; case P: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(insertparagraph,false,p);}); break; //增加缩进 case indent: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(indent,false,null);}); break; //减少缩进 case outdent: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(outdent,false,null);}); break;//为字体设置颜色这里只设置了红色以后可以像h标签一样添加case forecolor: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(forecolor,false,red);}); break;//清除粘贴过来的样式和自己设置的模式 case removeformat: EventUtil.addHandler(a[i],click,function(){//首先获取到范围内的p元素标签有多少个var peditPane.getElementsByTagName(p);//循环p元素for(var l0,lengp.length;lleng;l){//检查P元素下面是否有子节点if(p[l].children.length0){//循环子节点for(var a0,lenggp[l].children.length;alengg;a){//获取子节点的名称是否等于spanif(p[l].children[a].tagName.toLowerCase()span){//检查span是否有style特征如果有则删除stylevar attp[l].children[a].getAttribute(style);if(att){p[l].children[a].removeAttribute(style);}//继续循环因为清理时一般都会按多次这里就是多次清理continue;}else{editPane.execCommand(removeformat,false,span);}}//如果没有子节点则直接清理p标签的style}else{if(p[l].getAttribute(style)){p[l].removeAttribute(style);}}}editPane.execCommand(removeformat,false,style);pnull;}); break; //创建文本的urlcase createlink: EventUtil.addHandler(a[i],click,function(){var resultprompt(输入你的本地URL或外链,);if(result !null){editPane.execCommand(createlink,false,result);}}); break; //清除url连接case unlink: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(unlink,false,null);}); break;//有序排列 case ollist: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(insertorderedlist,false,null);}); break; //无序排列 case lilist: EventUtil.addHandler(a[i],click,function(){editPane.execCommand(insertunorderedlist,false,null);}); break;//插入图片占时只能插入图片的URL本地上传用xrh还未做case image: EventUtil.addHandler(a[i],click,function(){var resultprompt(输入你的图片连接,);if(result !null){editPane.execCommand(insertimage,false,result);}}); break; }}//模拟将iframe框架中格式化的文本赋值给表单的字段以便存入数据库var buttondocument.getElementsByName(submit1)[0];EventUtil.addHandler(button,click,function(){var texteditPane.body.innerText;console.log(text);});editnull;toolbarnull;anull;/script/body
/html//最后实现的样式
