contenteditable="true"元素过滤富文本样式

用contenteditable=”true”模拟输入框时，会发生连带样式一起复制到输入框的事情。
一开始想到的是输入框值发生变化时获取内容过滤样式在赋值的方法：

document.querySelector("div").addEventListener("input",function(e){
    this.innerHTML=this.innerText;
},false);

这样虽然能过滤样式，但是有很多问题，比如光标始终在首位、输入框不能插入表情、换行符失效等问题。
上网查了一下别人是怎么做的发现可以通过修改复制事件来过滤样式

function pasteFilter(e){
    e.preventDefault();
    var text = null;

    //得到剪贴板中的文本
    if(window.clipboardData && clipboardData.setData) {
        // IE
        text = window.clipboardData.getData('text');
    } else {
        text = (e.originalEvent || e).clipboardData.getData('text/plain');
    };
    if (document.body.createTextRange) {    
        if (document.selection) {
            textRange = document.selection.createRange();
        } else if (window.getSelection) {
            sel = window.getSelection();
            var range = sel.getRangeAt(0);

            // 创建临时元素，使得TextRange可以移动到正确的位置
            var tempEl = document.createElement("span");
            tempEl.innerHTML = "&#FEFF;";
            range.deleteContents();
            range.insertNode(tempEl);
            textRange = document.body.createTextRange();
            textRange.moveToElementText(tempEl);
            tempEl.parentNode.removeChild(tempEl);
        };
        textRange.text = text;
        textRange.collapse(false);
        textRange.select();
    } else {
        // Chrome之类浏览器
        document.execCommand("insertText", false, text);
    };
};