原生手写富文本编辑器组件

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 属性