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);
    };
};