editor.js

xdHtmlEditor源码

/*---------------------------------------------------------------------------*\
|  Subject:       小小菜刀编辑器 HtmlEditor                                   |
|  Version:       2.0                                                         |
|-----------------------------------------------------------------------------|
|  QQ: 275171   http://www.1715.cn                                            |
|  blueidea.com ID: blgl0528 im286.com ID: blgl1984                           |
\*---------------------------------------------------------------------------*/

var CD = {};
CD.g = {};
CD.lang = {
    items : [
		 ["bold","0","19","0 0 0 2px;","","加粗"]
		,["italic","20","20","0","","斜体"]
		,["underline","40","20","0","","下划线"]
		,["-","320","3","-1px 3px 0 4px","","间隔线"]
		,["fontname","60","20","0 2px","","选择字体"]
		,["fontsize","80","21","0 2px","","字体大小"]
		,["forecolor","240","20","0 2px","","字体颜色"]
		,["backcolor","260","20","0 2px","","背景颜色"]
		,["-","320","3","-1px 3px 0 1px","","间隔线"]
		,["picture","322","22","0","","插入图片"]
		,["createlink","280","22","0","","增加链接"]
		,["-","320","3","-1px 4px 0 2px","","间隔线"]
		,["alignmode","427","21","0 4px 0 0","","对齐方式"]
		,["serial","449","22","0 4px 0 0","","编号"]
		,["indent","470","22","0 4px 0 0","","缩进"]
    ],
    font : [
		 ["宋体","宋体"]
		,["黑体","黑体"]
		,["楷体_GB2312","楷书"]
		,["幼圆","幼圆"]
		,["Arial","Arial"]
		,["Arial Black","Arial Black"]
		,["Times New Roman","Times New Roman"]
		,["Verdana","Verdana"]
    ],
    size : [
		 [1,"10px;line-height:12px;height:12px;","小"]
		,[2,"14px;line-height:16px;height:16px;","中"]
		,[4,"16px;line-height:18px;height:18px;","大"]
		,[5,"22px;line-height:24px;height:24px;","较大"]
		,[6,"30px;line-height:32px;height:32px;","最大"]
    ],
	color : [
		 ['000000'],['993300'],['333300'],['003300'],['003366'],['000080'],['333399'],['333333']
		,['800000'],['FF6600'],['808000'],['008000'],['008080'],['0000FF'],['666699'],['808080']
		,['FF0000'],['FF9900'],['99CC00'],['339966'],['33CCCC'],['3366FF'],['800080'],['999999']
		,['FF00FF'],['FFCC00'],['FFFF00'],['00FF00'],['00FFFF'],['00CCFF'],['993366'],['C0C0C0']
		,['FF99CC'],['FFCC99'],['FFFF99'],['CCFFCC'],['CCFFFF'],['99CCFF'],['CC99FF'],['FFFFFF']
	],
	alignmode : [
		 ["justifyleft","100","20","-3px 0 0 0"," 左对齐"]
		,["justifycenter","120","20","-3px 0 0 0"," 居中对齐"]
		,["Justifyright","140","20","-3px 0 0 0"," 右对齐"]
	],
	serial : [
		 ["insertorderedlist","160","20","-3px 0 0 0"," 数字编号"]
		,["insertunorderedlist","180","20","-3px 0 0 0"," 项目编号"]
	],
	indent : [
		 ["indent","220","20","-3px 0 0 0"," 向右缩进"]
		,["outdent","200","20","-3px 0 0 0"," 向左缩进"]
	]
};
CD.$ = function(i, win) {
	try {
		return ( win || window ).document.getElementById(i);
	}catch( e ) {return null;}
}
CD.$$ = function(name, doc){
    var doc = doc || document;
    return doc.createElement(name);
};
CD.event = {
    add : function(el, event, listener) {
        if (el.addEventListener){
            el.addEventListener(event, listener, false);
        } else if (el.attachEvent){
            el.attachEvent('on' + event, listener);
        }
    },
    remove : function(el, event, listener) {
        if (el.removeEventListener){
            el.removeEventListener(event, listener, false);
        } else if (el.detachEvent){
            el.detachEvent('on' + event, listener);
        }
    }
};
CD.IniEditor = function(d) {
	CD.func.loadStyle(d.root+'/images/editor.css');
	for(var i=0;i<d.id.length;i++){
		var config       = {};
		config.id         = d.id[i];
		config.use        = d.use[i];
		config.root       = d.root;
		config.codeMode   = true;
		config.filterMode = false;//开启过滤
		CD.g[d.id[i]]    = config;//保存数据
		CD.event.add(window, 'load', new Function('CD.create("'+d.id[i]+'")'));
	}
};
CD.create = function(id, mode) {
	var width = CD.$(id).style.width;
    var height = CD.$(id).style.height;
    var container = CD.$$('div');
	container.className = 'editor_container';
    container.style.width = width;
    container.style.height = height;
    CD.$(id).parentNode.insertBefore(container,CD.$(id));
	var toolbarDiv = CD.toolbar.create(id);
    container.appendChild(toolbarDiv);

    var iframe = CD.$$('iframe');
    iframe.className = 'editor_iframe';
    iframe.setAttribute("frameBorder", "0");
    var newTextarea = CD.$$('textarea');
    newTextarea.className = 'editor_textarea';
    newTextarea.style.display = 'none';
	
    var formDiv = CD.$$('div');
    formDiv.className = 'editor_form';
    formDiv.appendChild(iframe);
    formDiv.appendChild(newTextarea);
    container.appendChild(formDiv);

    var hideDiv = CD.$$('div');
    hideDiv.style.display = 'none';
    var maskDiv = CD.$$('div');
    maskDiv.className = 'editor_mask';
    CD.func.setOpacity(maskDiv, 50);
    document.body.appendChild(hideDiv);
    document.body.appendChild(maskDiv);
    CD.$(id).style.display = "none";
	
	var iframeWin = iframe.contentWindow;
    var iframeDoc = CD.func.getIframeDoc(iframe);
    iframeDoc.designMode = "On";
    var html = CD.func.getFullHtml(id);
    iframeDoc.open();
    iframeDoc.write(html);
    iframeDoc.close();
    if (!CD.g[id].codeMode) {
        newTextarea.value = CD.$(id).value;
        newTextarea.style.display = 'block';
        iframe.style.display = 'none';
    }

	var form = CD.$(id).parentNode;
	while (form != null && form.tagName != 'FORM') { form = form.parentNode; }
	if (form != null && form.tagName == 'FORM') {
		CD.event.add(form, 'submit', new Function('CD.func.setData("'+id+'")'));
		CD.event.add(form, 'reset', new Function('CD.func.Reset("'+id+'")'));
	}

    CD.g[id].container = container;
    CD.g[id].toolbarDiv = toolbarDiv;
    CD.g[id].formDiv = formDiv;
    CD.g[id].iframe = iframe;
    CD.g[id].newTextarea = newTextarea;
    CD.g[id].srcTextarea = CD.$(id);
    CD.g[id].hideDiv = hideDiv;
    CD.g[id].maskDiv = maskDiv;
    CD.g[id].iframeWin = iframeWin;
    CD.g[id].iframeDoc = iframeDoc;
    width = container.offsetWidth;
    height = container.offsetHeight;
    CD.g[id].width = width + 'px';
    CD.g[id].height = height + 'px';
    CD.func.resize(id,width,height);
    if(CD.$(id).value) iframeDoc.body.innerHTML = CD.$(id).value;
}

CD.func = {
    getIframeDoc : function(iframe) {
        var win = iframe.contentWindow;
        var doc = null;
        if (iframe.contentDocument) {
            doc = iframe.contentDocument;
        } else {
            doc = win.document;
        }
        return doc;
    },
    getFullHtml : function(id) {
        var html = '<html>';
        html += '<head>';
        html += '<title>editor</title>';
		html += '<style type="text/css">';
        html += 'body {';
        html += '    font-family: Verdana;';
        html += '    font-size:12px;';
        html += '    margin:2px;';
        html += '    background-color:#ffffff;';
        html += '}</style>';
        html += '</head>';
        html += '<body>';
        html += '</body>';
        html += '</html>';
        return html;
    },
    getBrowser : function() {
        var browser = false;
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf("msie") > -1) browser = true;//IE浏览器
        return browser;
    },
    setOpacity : function(el, opacity) {
        if (CD.browser) {
            el.style.filter = (opacity == 100) ? "" : "gray() alpha(opacity=" + opacity + ")";
        } else {
            el.style.opacity = (opacity == 100) ? "" : "0." + opacity.toString();
        }
    },
	ClickHandle : function(e){	
		var o = e.srcElement || e.target;
		if(o.id.indexOf('_editor_source')!=-1 || o.id.indexOf('_toolbar')!=-1 || !o.id) return false;
		var v  = o.id.split('_');if(v[2]=="-" ||!v[2]) return false;
		var k  =0;
		for (var i=0;i<CD.lang["items"].length;i++){
			k = i;if(CD.lang["items"][i][0]==v[2]) break;
		}
		var t = o.getAttribute("para") ? o.getAttribute("para") : o.parentNode.getAttribute("para");
		CD.func.fHide(v[0],k);//关闭所有下拉菜单
		if(o.type !="button") CD.func.SavePos(v[0]);//保存光标
		if("bold,italic,underline,-".indexOf(v[2])!=-1){
			CD.func.execCommand(v[0],v[2],t);
		}else{
			if(!t){
				CD.func.fDisp(v[0]+"_"+k+"_prompt");//显示下拉
			}else if(t=="createlink"){
				CD.func.CreateLink(v[0]);
			}else if(t=="InsertImage"){
				CD.func.InsertImage(v[0]);
			}else{
				CD.func.execCommand(v[0],v[2],t);
			}
		}
	},
    execCommand : function(id, cmd, value) {
		if("alignmode serial indent".indexOf(cmd)!=-1){
			cmd = value;value = false;
		}
		CD.func.fHide(id);
		try {
			CD.g[id].iframeDoc.execCommand(cmd,false,!value ? false : value);
        } catch(e) {}
    },
	CreateLink : function(id){
		var u = CD.$(id+"_url").value;
		if(!u || u=="http://") return false;
		u = !(( u.indexOf("://") > 1 ) || (u.indexOf(":\\") > 1)) ? "http://" + u : u;