js編輯器插件

使用js實作一款簡單的編輯器插件，可以實作文字的編輯，圖檔的上傳操作。

/**
 * 自定義編輯器
 * @param {Object} id      編輯區
 * @param {Object} control 操作區
 */
function insertImg(id, control, dataparams, fun){
    this.bigBox  = document.getElementById(id),
    this.handles = document.getElementById(control),
    this.handle  = this.handles.children[],
    this.handleChildt  = this.handle.children[],
    this.gethtml = this.handles.children[],
    param = dataparams,
    funs = fun,
    this.init()
}
insertImg.prototype = {
    init:function(){

        this.edit();      //編輯操作
        this.getResult(); //編輯操作

    },
    pasteHandler:function() {
        var that = this;
        /**
         * 監控粘貼(ctrl+v),粘貼過來的替換多餘的html代碼，隻保留<br>
         */
        setTimeout(function() {

            var content = that.innerHTML;
            valiHTML = ["br"];
            content = content.replace(/_moz_dirty=""/gi, "").replace(/\[/g, "[[-").replace(/\]/g, "-]]").replace(/<\/ ?tr[^>]*>/gi, "[br]").replace(/<\/ ?td[^>]*>/gi, "&nbsp;&nbsp;").replace(/<(ul|dl|ol)[^>]*>/gi, "[br]").replace(/<(li|dd)[^>]*>/gi, "[br]").replace(/<p [^>]*>/gi, "[br]").replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]").replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]").replace(/<[^>]*>/g, "").replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]").replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");

            if(!$.browser.mozilla) {

                content = content.replace(/\r?\n/gi, "<br>");

            }

            that.innerHTML = content;
        }, )
    },
    _insertimg:function(str) {
        /*
         * 鎖定編輯器中滑鼠光标位置。
         */
        var selection = window.getSelection ? window.getSelection() : document.selection;

        var range = selection.createRange ? selection.createRange() : selection.getRangeAt();

        if(!window.getSelection) {

            this.bigBox.focus();

            var selection = window.getSelection ? window.getSelection() : document.selection;

            var range = selection.createRange ? selection.createRange() : selection.getRangeAt();

            range.pasteHTML(str);

            range.collapse(false);

            range.select();

        } else {

            this.bigBox.focus();

            range.collapse(false);

            var hasR = range.createContextualFragment(str);

            var hasR_lastChild = hasR.lastChild;

            while(hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {

                var e = hasR_lastChild;

                hasR_lastChild = hasR_lastChild.previousSibling;

                hasR.removeChild(e)

            }

            range.insertNode(hasR);

            if(hasR_lastChild) {

                range.setEndAfter(hasR_lastChild);

                range.setStartAfter(hasR_lastChild)

            }

            selection.removeAllRanges();

            selection.addRange(range)

        }

    },
    enterkey:function() {
        /*
         * 監控按enter鍵和空格鍵，如果按了enter鍵，則取消原事件，用<BR/ >代替。
         */
        e = event.keyCode;

        if(e ==  || e == ) {

            var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

            event.returnValue = false; // 取消此事件的預設操作 

            if(document.selection && document.selection.createRange) {

                var myRange = document.selection.createRange();

                myRange.pasteHTML('<br />');

            } else if(window.getSelection) {

                var selection = window.getSelection();

                var range = window.getSelection().getRangeAt();

                range.deleteContents();

                var newP = document.createElement('br');

                range.insertNode(newP);

            }

        }
    },
    edit:function() {
        var that = this;
        //複制粘貼以及回車換行操作
        this.bigBox.onkeydown = this.enterkey;
        this.bigBox.onpaste = this.pasteHandler;

        //上傳圖檔
        this.handleChildt.onchange = function() {
            that.upLoadIMg();
        }
    },
    getResult:function() {
        //擷取需要的結果
        var that = this;
        this.gethtml.onclick = function() {
            $(that.bigBox).find('br').remove(); //去除br  
            var html = that.bigBox.innerHTML;
            //正則修改img為自己想要的格式
            var reg = /<img src="(.*?)" dataUrl="(.*?)">/ig;
            //需要送出的内容
            param.content = html.replace(reg, '##@[email protected]##').replace(/\s/g, "");
            param.title = $.trim($('.titles').val())
            param.topicid = $('#topicid option:selected').val()
            $.post(param.saveData,param,function(data){
                var data = JSON.parse(data)
                if(data.code == '10000'){
                    //确認完回調
                    if(funs){
                        funs();
                    }
                }
            })
        }

    },
    upLoadIMg:function() {
        //插入圖檔
        var that = this;
        if(that.handleChildt.files[] != undefined){
            //構造form表單上傳  
            var as = new FormData();  
            as.append("uploadfile",that.handleChildt.files[]); //參數uploadfile
            $.ajax({  
                url:param.upImgSrc,  
                xhrFields:{  
                    withCredentials:true  
                },
                type: "POST",  
                cache: false,  
                data: as,  
                processData: false,  
                contentType:false,
                success: function (result) {
                    alert()
                    var data = JSON.parse(result);
                    if(data.code == '10000'){  
                        that.bigBox.focus();
                        var img_url = '<img src="https://p5.gexing.com/'+data.data.url+'" dataUrl="'+data.data.url+'">';
                        that._insertimg(img_url);
                    }else{  
                        alert('上傳失敗！')  
                    }  
                }  
            })  
        }
    }
}
           

/**
         * [insertImgs 初始化編輯器]
         * @type {Object} editCont  編輯器
         * @type {Object} handle   操作控制按鈕
         * @type {Object} params   參數
         * @type {Object} function  成功後的回調函數
         */
        var insertImgs = new insertImg('editCont','handle',params,function(){
            //儲存成功後的事件

        });
           

<div id="editCont" contenteditable="true" class="editbox" style="width: 400px;height: 700px;border: 1px solid #ccc;padding:10px;float: left;overflow: auto;">
</div>
<div style="padding: 20px 16px;text-align:center;" id="handle">
            <form action="" id="add_file_form" class="loadImgBox" method="post" enctype="multipart/form-data">
                <span>上傳圖檔</span>
                <input id="uploaderInput" class="weui-uploader__input" name="uploadfile" type="file" accept="image/jpeg,image/jpg,image/png" multiple="">  
            </form>
            <input class="btn j_btn" style="margin-left:50px;" type="button" name="submit" value="儲存">
        </div>