H5富文本编辑器原理解析：

核心属性：

1、contentEditable="true"; //属性规定是否可编辑元素的内容

2、window.document.designMode ="On";//让整个页面都可以编辑，通常会把要编辑的文档放在一个<iframe>元素中，而这个元素就充当了一个超级的编辑框.

3、iframeWindow.document.execCommand(sCommand,false,value);

当一个HTML文档切换到设计模式designMode时，文档对象暴露execCommand方法，该方法允许运行命令来操纵可编辑区域的内容。

大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用

execCommand() 将影响当前活动的可编辑元素

我使用的是闭包 的方式实现的一个简易的富文本编辑器 组件。只对外开放一个全局变量 editorIframe 避免内部变量被污染。

vareditorIframe=(function(){functionextend(target, source) {for(varobjinsource) {target[obj] = source[obj];}returntarget;}functionaddEvent(element,eventName,fn){(element.attachEvent)? (element.attachEvent('on'+ eventName,fn)): (element.addEventListener(eventName,fn,false));}functionremoveEvent(element,eventName,fn){(element.detachEvent)? (element.detachEvent('on'+ eventName, fn)): (element.removeEventListener(eventName,fn,false));}functioneditorIframe(options){vardefaultoptions={operate:{'backColor':'red','bold':'true','copy':'','delete':'true','italic':'true','underline':'',},//*.....操作功能 //editBox:1,iframeElementStyle:"width:400px;height:300px;border:1px solid #999",//编辑器样式buttonElementStyle:"",//按钮样式iframeSrc:"about:blank",//iframe 链接placeholder:"请输入",//placeholderparentContainer:document.body,//父容器 };this.options=extend(defaultoptions,options)||{};this.render();}editorIframe.prototype={render:function(){//渲染页面var_this=this;// 编辑框渲染variframeElement =document.createElement('iframe');iframeElement.setAttribute("id","iframe1");iframeElement.style.cssText=this.options.iframeElementStyle;iframeElement.src=this.options.iframeSrc;addEvent(iframeElement,'load',function(){removeEvent(iframeElement,'load',arguments.callee);variframeWindow = iframeElement.contentWindow;iframeWindow.document.open();iframeWindow.document.writeln('<p><span>'+_this.options.placeholder+'</span></p>');iframeWindow.document.close();(iframeWindow.document.designMode)?(iframeWindow.document.designMode='On'):(iframeWindow.document.body.contentEditable=true);//按钮渲染varsCommands=_this.options.operate;vardivElement =document.createElement('div');for(variinsCommands){varbuttonElement =document.createElement('button');buttonElement.style.cssText= _this.options.buttonElementStyle;buttonElement.onclick = (function(sCommand,value){return function(){(function(sCommand,value){try{varreturnValue = iframeWindow.document.execCommand(sCommand,false,value);}catch(e){}})(sCommand,value);};})(i,sCommands[i]);buttonElement.appendChild(document.createTextNode(i));divElement.appendChild(buttonElement);}varfirstEl=_this.options.parentContainer.firstChild;//得到页面的第一个元素_this.options.parentContainer.insertBefore(divElement,firstEl);});_this.options.parentContainer.appendChild(iframeElement);},value:function(str){variframeElement =document.querySelector('#iframe1');if(!str){returniframeElement.contentDocument.body.innerHTML;}else{iframeElement.contentDocument.body.innerHTML=str;}}};returneditorIframe;})();

调用方法也很简单：

vardefaultoptions={operate:{'bold':'true','copy':'','delete':'true','italic':'true','underline':''},//*.....操作功能 //editBox:1,iframeElementStyle:"width:400px;height:300px;border:1px solid #999;margin:12px 0",//编辑器样式buttonElementStyle:"",iframeSrc:"about:blank",//iframe 链接placeholder:"placeholder",//placeholderparentContainer:document.querySelector("#container")//父容器};varedit=neweditorIframe(defaultoptions);edit.value("这是我写的第一个富文本编辑器");//赋值方法与jquery类似 传值为赋值 反之为获取

***更多属性请参照

document.execCommand 属性