开发iframe富文本编辑器的一点体会.docxVIP

Javascript开发iframe富文本编辑器的一点体会前段时间有个需求是开发富文本编辑器，这个之前随做过，但看了需求，发现有些地方还需google就把遇到的问题记录一下。写这篇文章时用的TinyMCE编辑器就很强大，但毕竟是第三方的，项目也考虑了这些，如果做些自定义的东西不太方便。 1. 判断光标位置的元素（或者选中的部分）的样式。光标位置改变的时候更新工具栏对应按钮的样式。什么情况下光标的位置会改变呢？是键盘方向键和鼠标点击，于是就判断键盘事件和鼠标事件来执行光标移动的处理。 a. 获得光标位置或选中元素：首先getSelection，创建range。然后获得元素，获取到元素之后就可以或得样式、tagName等等，做更多的操作,运行代码： 复制代码 代码如下:!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head title/title meta http-equiv=Content-Type content=text/html; charset=UTF-8 style type=text/css p{width:600px;text-align: left;text-indent:2em;line-height:20px;font-size:12px} textarea{width:600px;height:100px;font-size:12px;overflow:auto} /style /head body span style=display:block;height:150px; font-size:12px;line-height:150%信息/span script type=text/javascript function createEditor(){ variframe = document.createElement(iframe); iframe.id = iframe; iframe.frameBorder = 1; iframe.width = 400; iframe.height = 200; document.body.appendChild(iframe); return iframe; } var bind = function(element,eventType,fn,useCapture){ useCapture = useCapture || false; if(arguments.length 3){ return true }; if(window.addEventListener){ element.addEventListener(eventType, fn, useCapture); }else{ element.attachEvent(on+eventType,fn, useCapture); } } //from 司徒正美 varcss = document.defaultView ? function(el,style){ return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) } : function(el,style){ style = style.replace(/\-(\w)/g, function($, $1){ return $1.toUpperCase(); }); return el.currentStyle[style]; } function bindEditor(){ variframe = createEditor(); varifr_win = iframe.contentWindow; varifr_doc = ifr_win.document; vareditorContent = span style=font-family: 黑体; font-weight: bold;阿四大四大四/span大span style=font-style: italic; text-decoration: underline;四大四大打算/span打打span style=font-style: italic; color: #ff0000;双打萨斯/span大师; ifr_doc.designMode=On;//可编辑 ifr_doc.contentEditable = true; ifr_doc.open(); ifr_doc.writeln(htmlheadstyle type=text/cssbody{padding:10px;margin:0;font-