如果像上一篇文章使用基于Jquery的可视化编辑器 Xheditor 那样设置的话，访问页面时会加载70多k的jquery文件和50多k的xheditor文件，为了追求页面默认加载的性能提升，其实这些文件完全可以在编辑的时候异步加载的，下面是操作步骤：

1，需要用到一个异步加载js文件并执行的函数

function getJsFile(url, callBack){

var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Msxml2.XMLHTTP');

XH.open('get',url,true);

XH.onreadystatechange = function(){

if(XH.readyState == 4 && XH.status == 200){ if(window.execScript) window.execScript(XH.responseText);

else eval.call(window, XH.responseText);

eval(callBack);

}

}

XH.send('');

}

第一个参数url为js路径，第二个回调函数是加载完js之后的操作

2，由于我采用js初始化编辑器的方式，并且我把初始化的内容统一放到一个js文件以便以后统一更改样式，所以我异步加载的时候会加载三个文件。使用以下代码：

function callback(){ };

var is_load;

is_load = false;

function loads(){

if(!is_load){

getJsFile('/js/jquery-1.4.2.min.js','callback');

getJsFile('/js/editor/xheditor-en.min.js','callback');

getJsFile('js/editor/editor.js','callback');

is_load = true;

}

}; 回调函数留空，变量is_open判断是否已经加载过，防止重复加载

3，在textera框外面加一层span ,onclick="loads()"

大功告成了，只要一点击textarea就会调用js并且执行

不过有一点需要注意的是，由于xheditor默认是根据 页面这一条语句去判断插件所在的位置，由于采用异步加载所以网页头部没放这一行，解决的方法是在插件目录在建一个js文件，叫xheditor-autoload.js,刚好把上面那个 getJsFile()函数放进去，然后在放到页面头部位置： ，大小不到1k，算可以接受。

使用方法

1. 下载xhEditor最新版本。
下载地址：http://code.google.com/p/xheditor/downloads/list

2. 解压压缩文件，将其中的xheditor.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录

3. 在相应html文件的</head>之前添加
<script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script>
<script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>

4.
方法1：在textarea上添加属性： class="xheditor {skin:'default'}"，前面主参数也可以是xheditor-mini和xheditor-simple，分别加载迷你和简单工具栏，后面详细参数可以省略
方法2：在您的页面初始JS代码里加上： $('#elm1').xheditor();
$('#elm1').xheditor()；
例如：
$({
$('#elm1').xheditor()；
});
相应的删除编辑器的代码为
$('#elm1').xheditor(false)；
重要说明：2种初始化方法只能选择其中一种，不能混合使用，优先级分别是：方法1>方法2，例如用了方法1，方法2就无法使用了
更多帮助信息，请查看在线帮助：http://code.google.com/p/xheditor/wiki/Help
或者参考demos文件夹中的演示页面
建议使用wizard.html初始化代码生成向导来生成适合你的代码。

由于各个浏览器对js代码的异步执行函数的支持不一样

window.execScript() 只支持IE浏览器

eval() 虽然支持各个浏览器，但是却不能在全局执行

解决的方法是利用javascript里面有一个改变上下文环境的关键字with .

把GetJsFile方法改成如下：

function getJsFile(url, callBack){
var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Msxml2.XMLHTTP');
XH.open('get',url,true);
XH.onreadystatechange = function(){
if(XH.readyState == 4 && XH.status == 200){
with ( window )eval(XH.responseText);
//if(window.execScript) window.execScript(XH.responseText);
//else eval.call(window, XH.responseText);
with ( window )eval(callBack);
}
}
XH.send('');
}