实现一个简易的富文本编辑器(二)：给富文本添加自定义事件

var Event = {
//    _cachePool : {}, 处理函数缓存池不要写在该对象内，因为原型链继承会让子类共享引用类型数据。
    fire : function(type, msg) {
        var fns;
        if(!(fns = this._cachePool[type])) {
            return;
        }
        var len = fns.length;
        for(var i = 0, fn; i < len; i++) {
            fn = fns[i];
            fn.call(this, msg);
        }
    },
    on : function(type, callback) {
        if(!this._cachePool[type]) {
            this._cachePool[type] = [];
        }
        this._cachePool[type].push(callback);
    },
    un : function(type, callback) {
        var fns = this._cachePool[type];
        if(fns) {
            this._cachePool[type] = fns.filter(function(item){//注意兼容，一些低版本Array没有过滤函数
                return item !== callback;
            });
        }
    }
};

.editorOut {
    border:1px solid #ccc;
    width:200px;
    height:200px;
    position:relative;
}
.editorTool {
    margin:2px;
    width:100%;
}
.editorFoot {
    margin:2px;
    width:100%;
    position:absolute;
    bottom:0;
}

.editorOut button {
    height:20px;
    width:20px;
    margin:1px;
    border:0px solid #fff;
    cursor:pointer;
    overflow:hidden;
}
.editorOut button.bold{
    background:url(./imgs.svg) 0px 0px;
    background-size:140px 40px;
}
.editorOut button.bold:hover {
    background:url(./imgs.svg) 0px -20px;
    background-size:140px 40px;
}

EditorProto = {
    _create : function(id) {
        var editor = this._createEditor(id);
        var tool = this._createTool();
        var button = this._createCommandBtn();
        var foot = this._createFoot();
        var printBtn = this._createPrintBtn();
        this.printBtn = printBtn;
        tool.appendChild(button);
        foot.appendChild(printBtn);
        editor.insertBefore(tool, editor.firstChild);
        editor.appendChild(foot);
        return editor;
    },
    _createEditor : function(id) {
        var editor = document.getElementById(id);
        editor.className = "editorOut";
        editor.contentEditable = true;
        return editor;
    },
    _createTool : function() {
        var tool = document.createElement("div");
        tool.contentEditable = false;
        tool.className = "editorTool";
        return tool;
    },
    _createCommandBtn : function() {
        var button = document.createElement("button");
        button.className = "bold";
        button.title = "加粗";
        button.onclick = function(e) {
            document.execCommand("bold", false, null);
        };
        return button;
    },
    _createFoot : function() {
        var tool = document.createElement("div");
        tool.contentEditable = false;
        tool.className = "editorFoot";
        return tool;
    },
    _onbeforeSubmit : function(e, scope, callback) {
        scope.fire(‘beforesubmit‘, e);
    },
    _onaftersubmit : function(e, scope, callback) {
        scope.fire(‘aftersubmit‘, e);
    },
    _createPrintBtn : function() {
        var button = document.createElement("input"),
            that = this;
        button.type="button"
        button.value = "点击写出";
        button.onmousedown = function(e) {
            that._onbeforeSubmit(e, that);
        };
        button.onmouseup = function(e) {
            that._onaftersubmit(e, that);
        };
        return button;
    }
};

var copyIf = function(sub, sup, config) {
    for(var p in sup) {
        if(!sub[p]) {
            sub[p] = sup[p];//拷贝
        }
    }
}

copyIf(EditorProto, Event);//将Event对象拷贝给EditorProto

function Editor(id) {
    this._cachePool = {};//事件处理函数的缓存池不能放到原型里
    this._create(id);//new 操作构造器的时候，创建编辑器实例
};
Editor.prototype = EditorProto;//原型链继承

<div id="editor">print...</div>
<div id="s"></div>

var editor = new Editor("editor");
editor.on("beforesubmit", function() {console.log("beforesubmit");});
editor.on("aftersubmit", function() {console.log("aftersubmit");});

var s = new Editor("s");
s.on("beforesubmit", function() {console.log("s的提交前事件");});