如果像上一篇文章使用基于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=">
<script type="text/javascript" src=">
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('');
}