日期:2014-05-16  浏览次数:20628 次

[菜鸟自学五]富文本编辑器
看到精华区有个富文本编辑器.自己参考着样式也写了一个.由于时间有限BUG不可避免.希望大家提出好的建议.如果有时间我会再重构一次.

代码下载和具体细节请参考
http://www.cnblogs.com/goodness2010/archive/2010/03/25/1695241.html

由于代码较长分两次发
程序源码上半部
JScript code

// 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;