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

    核心属性：

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

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

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

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

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

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

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

var editorIframe=(function(){function extend(target, source) {for (var obj in source) {target[obj] = source[obj];}return target;}function addEvent(element,eventName,fn){(element.attachEvent)? (element.attachEvent('on' + eventName,fn)): (element.addEventListener(eventName,fn,false));}function removeEvent(element,eventName,fn){(element.detachEvent)? (element.detachEvent('on' + eventName, fn)): (element.removeEventListener(eventName,fn,false));}
function editorIframe(options){var defaultoptions={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:"请输入",//placeholder
        parentContainer:document.body,//父容器
    };this.options=extend(defaultoptions,options)||{};this.render();
}
editorIframe.prototype={render:function(){//渲染页面
        var _this=this;// 编辑框渲染
        var iframeElement = 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);var iframeWindow = 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);//按钮渲染
            var sCommands=_this.options.operate;var divElement = document.createElement('div');for (var i in sCommands){var buttonElement = document.createElement('button');buttonElement.style.cssText = _this.options.buttonElementStyle;buttonElement.onclick = (function(sCommand,value){return function(){(function(sCommand,value){try{var returnValue = iframeWindow.document.execCommand(sCommand,false,value);}catch(e){}})(sCommand,value);};})(i,sCommands[i]);buttonElement.appendChild(document.createTextNode(i));divElement.appendChild(buttonElement);}var firstEl=_this.options.parentContainer.firstChild;//得到页面的第一个元素
            _this.options.parentContainer.insertBefore(divElement,firstEl);});_this.options.parentContainer.appendChild(iframeElement);},value:function(str){var iframeElement = document.querySelector('#iframe1');if(!str){return iframeElement.contentDocument.body.innerHTML;}else{iframeElement.contentDocument.body.innerHTML=str;}}
};return editorIframe;
})();

调用方法也很简单：

    

var defaultoptions={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",//placeholder
    parentContainer:document.querySelector("#container")//父容器
};
var edit=new editorIframe(defaultoptions);
edit.value("这是我写的第一个富文本编辑器");//赋值方法与jquery类似 传值为赋值 反之为获取

***更多属性请参照

document.execCommand 属性