[初学者自学五]富文本编辑器

// JS编辑器 
// @version beta 0.1
// @date 2010-03-21
// @author goodNess
// @blog http://www.cnblogs.com/goodness2010/
// @email goodNess2010@126.com
var co = co || {};
co.Root = 'http://www.cnblogs.com/images/cnblogs_com/goodness2010/238089/';  // 图片的根目录
// 浏览器判断
co.browser = (function(ua) {
    var b = {
        msie: /msie/.test(ua) && !/opera/.test(ua),
        opera: /opera/.test(ua),
        safari: /webkit/.test(ua) && !/chrome/.test(ua),
        firefox: /firefox/.test(ua),
        chrome: /chrome/.test(ua)
    };
    var vMark = '';
    for(var i in b) {
        if(b[i]) { vMark = /(?:safari|opera)/.test(i) ? 'version' : i; break; }
    }
    b.version = vMark && RegExp('(?:'+ vMark +')[\\/: ]([\\d.]+)').test(ua) ? RegExp.$1 : 0;

    b.ie = b.msie;
    b.ie6 = b.msie && parseInt(b.version) == 6;
    b.ie7 = b.msie && parseInt(b.version) == 7;
    b.ie8 = b.msie && parseInt(b.version) == 8;
    return b;
})(window.navigator.userAgent.toLowerCase());

// ie6图片强制缓存
try {
    co.browser.ie6 && document.execCommand('BackgroundImageCache', true, false);
} catch(ex) {};

// 获取ID对象
co.getId = function(id) { return document.getElementById(id); };

// 获取对象
co.get = function(node) {
    return typeof(node) == 'string' ? document.getElementById(node) : node;
};

// 创建DOM对象
co.append = function(parentNode, tag, attributes) {
    var o = document.createElement(tag);
    if(attributes && typeof(attributes) == 'string') {
        o.className = attributes;
    } else {
        co.setProperties(o, attributes);
    }
    co.get(parentNode).appendChild(o);
    return o;
};

// 遍历数组
co.foreach = function(arr, callback) {
    for(var i = 0, l = arr.length; i < l; i++) {
        arr[i] = callback(arr[i]);
    }
    return arr;
};

// 设置属性
co.DIRECT_ATTRIBUTE_MAP_ = {
    'cellpadding': 'cellPadding',
    'cellspacing': 'cellSpacing',
    'colspan': 'colSpan',
    'rowspan': 'rowSpan',
    'valign': 'vAlign',
    'height': 'height',
    'usemap': 'useMap',
    'frameborder': 'frameBorder',
    'type': 'type'
};

co.setProperties = function(element, properties) {
    var val;
    for(var key in properties) {
        val = properties[key];
        if(key == 'style') {
            element.style.cssText = val;
        } else if(key == 'class') {
            element.className = val;
        } else if(key == 'for') {
            element.htmlFor = val;
        } else if(key in co.DIRECT_ATTRIBUTE_MAP_) {
            element.setAttribute(co.DIRECT_ATTRIBUTE_MAP_[key], val);
        } else {
            element[key] = val;
        }
    }
    return element;
};

// 属性扩展
co.extend = function(destination, source) {
    for(var property in source) {
        destination[property] = source[property];
    }
    return destination;
};

// 获取元素绝对位置
co.getPos = function(o) {
    for(var _pos = {x: 0, y: 0}; o; o = o.offsetParent) {
        _pos.x += o.offsetLeft;
        _pos.y += o.offsetTop;
    }
    return _pos;
};

// 设置透明度
co.setOpacity = function(e, opac) {
    if(co.browser.ie) {
        e.style.filter = "alpha(opacity=" + opac*100 + ")";
    } else {
        e.style.opacity = opac;
    }
}

// 事件绑定
co.addEvent = function(el, type, fn) {
    el.addEventListener ? el.addEventListener(type, fn, false) : 
    el.attachEvent('on' + type, function() { fn.call(el); })
};

co.target = function(e) {
    return e ? e.target : event.srcElement;
}

// 禁止冒泡
co.cancelBubble = function(e) {
    if(e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
};

/**
 * 抽象单类工厂
 * @method create(cfg{必须有一个唯一的id标识})
 */
var newFactory = function() {
    var coll = {};
    return {
        create: function(fn, cfg, content/* POP_Body*/) {
            if(coll[cfg.id]) {
                return coll[cfg.id];
            } else {
                var win = fn(cfg, content); 
                coll[cfg.id] = win;
                return win;
            }
        }
    }
}();

/**
 *  ---------------------------------- PopUp窗口辅助类 -----------------------------
 *    config:
 *    id: 容器id
 *    title: 容器标题
 *  container: 容器class
 *    concss: 标题内容样式
 *    heacss: 标题外部样式
 *    bodcss: 容器内容样式
 *    chicss: 内容子列表样式
 *    content: 子列表内容
 *  @describe clicking on an element with the unselectable attribute set to on does not destroy the current selection if one exists.
 */
var popUp = {};

popUp.create = function(config, body) {
    this.container = co.append(document.body, 'div', config['container']);
    this.container.id = config.id;
    var _head = '<div class="' + config.heacss + '"><span class="' + config.concss + '">' + config.title +'</span></div>';
    var _body = '<div class="' + config.bodcss + '">';
    _body += (body || '');
    _body += '</div>';
    this.container.innerHTML = _head + _body;
    return this.container;
};

/*--------------------------------- ColorPicker辅助组件(单独提出.松耦合) -------------------------------------------*/
var ColorPicker = {
    create: function() {
        // 定义变量
        var cl = ['00', '33', '66', '99', 'CC', 'FF'], a, b, c, d, e, f, i, j, k, T;
        // 创建整个外围容器
        this.win = co.append(document.body, 'div');
        this.win.id = 'colorPicker';
        // 创建head
        var h = '<div class="colorhead"><span class="colortitle">颜色选择</span></div>';
        // 创建body [6 x 6的色盘]
        h += '<div class="colorbody"><table cellspacing="0" cellpadding="0"><tr>';
        for(i = 0; i < 6; ++i) {
            h += '<td><table class="colorpanel" cellspacing="0" cellpadding="0">';
            for(j = 0, a = cl[i]; j < 6; ++j) {
                h += '<tr>';
                for(k = 0, c = cl[j]; k < 6; ++k) {
                    b = cl[k];
                    e = k == 5 && i != 2 && i != 5 ? ';border-right:none;' : '';
                    f = j == 5 && i < 3 ? ';border-bottom:none': '';
                    d = '#' + a + b + c;
                    T = co.browser.ie ? '&nbsp;': ''
                    h += '<td unselectable="on" style="background: ' + d + e + f + '" title="' + d + '">' + T + '</td>'; /* 切记设置unselectable='on'*/
                }
                h += '</tr>';
            }
            h += '</table></td>';
            if(cl[i] == '66') h += '</tr><tr>';
        }
        h += '</tr></table></div>';
        this.win.innerHTML = h;
        return this.win;
    }
};

/*--------------------------------- 编辑器基类 -----------------------------------------*/
var editor = function(id, bardata, options) {
    this.container = co.getId(id);
    this.bardata = bardata;
    this.currActive = null;
    this.bookmark = null;
    co.extend(this, this.setOptions(options));
    // 创建框架结构
    this.createStruct();
    // 创建快照书签
    co.browser.ie && this.saveBookMark();
};