總所周知的easyui的tab組件在創建選項卡的時候，動態的加載內容有兩種方式，即content和href。使用content的時候一般都是使用iframe的方式嵌入一個頁面，適用於小型項目，也易於它人去查看你的源代碼，不利於代碼保護，這種方式使用簡單，一般不會出現什么問題。在使用href方式的時候，卻有不少的問題需要注意.
例如如下：有兩個html頁面，tab.htm為tab選項卡頁面，kind.htm頁面為tab動態加載調用的頁面，里面使用了富文本編輯器
tab.html源碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標題頁</title>
<script src="js/kindeditor/kindeditor-all.js" type="text/javascript"></script>
<script src="js/kindeditor/lang/zh_CN.js" type="text/javascript"></script>
<link href="js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<script src="js/easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<link href="js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="easyui-tabs">
<div data-options="iconCls:'icon-reload',href:'kind.htm'">
</div>
</div>
</body>
</html>
kind.htm源碼如下：
<script type="text/javascript">
var editor;
$(function() {
window.setTimeout(function() {
editor = KindEditor.create('#note', {
width : '680px',
height : '300px',
items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink' ],
uploadJson : '/fileController/upload',
fileManagerJson : '/fileController/fileManage',
allowFileManager : true
});
}, 1);
});
</script>
<div class="easyui-layout" data-options="fit:true,border:false">
<div data-options="region:'center',border:false" title="" style="overflow: hidden;">
<form id="form" method="post">
<table class="table table-hover table-condensed">
<tr>
<th>
編號
</th>
<td>
<input name="id" type="text" class="span2" value="8c130179-b86d-4da2-9028-f819619216ff"
readonly="readonly">
</td>
<th>
BUG名稱
</th>
<td>
<input name="name" type="text" placeholder="請輸入BUG名稱" class="easyui-validatebox span2"
data-options="required:true" value="zsdcasdasdasd">
</td>
</tr>
<tr>
<th>
BUG類型
</th>
<td>
<select name="typeId" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">
<option value="0">錯誤</option>
<option value="1" selected="selected">功能</option>
</select>
</td>
<th>
瀏覽服務器附件
</th>
<td>
<button type="button" class="btn" onclick="fileManage();">
瀏覽服務器</button>
</td>
</tr>
<tr>
<th>
BUG描述
</th>
<td colspan="3">
<textarea name="note" id="note" cols="50" rows="5">kindeditor</textarea>
</td>
</tr>
</table>
</form>
</div>
</div>
當你運行tab.htm頁面以后你會發現雖然kind.htm頁面的內容都載入進來了，但是富本文編輯器失效了.
這時候的解決方法如下：在kind.htm頁面中用panel組件將所有的內容包起來即可，或者在tab.htm頁面中的tab中創建一個panel，然后將panel組件的內容使用href動態加載，地址指上kind.htm頁面即可.（PS：小菜鳥一枚，為什么會這樣如果有大蝦看到了這且知道原因請不吝賜教！）
解決的后的代碼如下：
1.tab.htm頁面使用panel解決：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無標題頁</title>
<script src="js/kindeditor/kindeditor-all.js" type="text/javascript"></script>
<script src="js/kindeditor/lang/zh_CN.js" type="text/javascript"></script>
<link href="js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<script src="js/easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<link href="js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="easyui-tabs">
<div data-options="iconCls:'icon-reload'">
<div class="easyui-panel" title="My Panel"
style="height:700px;"
data-options="href:'kind.htm',noheader:true,fit:true,height:700">
</div>
</div>
</div>
</body>
</html>
2：kind.htm頁面用panel包含：
<script type="text/javascript">
var editor;
$(function() {
window.setTimeout(function() {
editor = KindEditor.create('#note', {
width : '680px',
height : '300px',
items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink' ],
uploadJson : '/fileController/upload',
fileManagerJson : '/fileController/fileManage',
allowFileManager : true
});
}, 1);
});
</script>
<div class="easyui-panel" title="My Panel"
style="height:700px;"
data-options="noheader:true,fit:true,height:700">
<div class="easyui-layout" data-options="fit:true,border:false">
<div data-options="region:'center',border:false" title="" style="overflow: hidden;">
<form id="form" method="post">
<table class="table table-hover table-condensed">
<tr>
<th>
編號
</th>
<td>
<input name="id" type="text" class="span2" value="8c130179-b86d-4da2-9028-f819619216ff"
readonly="readonly">
</td>
<th>
BUG名稱
</th>
<td>
<input name="name" type="text" placeholder="請輸入BUG名稱" class="easyui-validatebox span2"
data-options="required:true" value="zsdcasdasdasd">
</td>
</tr>
<tr>
<th>
BUG類型
</th>
<td>
<select name="typeId" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">
<option value="0">錯誤</option>
<option value="1" selected="selected">功能</option>
</select>
</td>
<th>
瀏覽服務器附件
</th>
<td>
<button type="button" class="btn" onclick="fileManage();">
瀏覽服務器</button>
</td>
</tr>
<tr>
<th>
BUG描述
</th>
<td colspan="3">
<textarea name="note" id="note" cols="50" rows="5">kindeditor</textarea>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>