H5富文字編輯器原理解析：

    核心屬性：

    1、contentEditable="true"; //屬性規定是否可編輯元素的內容

  2、window.document.designMode = "On";//讓整個頁面都可以編輯，通常會把要編輯的文件放在一個<iframe>元素中，而這個元素就充當了一個超級的編輯框.

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

   大多數命令影響文件的選擇（粗體，斜體等），而其他命令插入新元素（新增連結）或影響整行（縮排）。當使用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類似 傳值為賦值 反之為獲取

***更多屬性請參照