我在jquery中一起使用ckeditor和datatable时遇到问题。
此问题的历史记录 -
我使用datatable显示表，该数据表有两个文本列，一个日期列和一个转换为ckeditor实例的textarea。当我从数据库加载此表时，数据很好并且按预期工作。但是当我向该数据表添加一行时，将重置textarea中作为ckeditor实例的现有文本或数据。通过我的分析，我发现当我添加一行时，数据表中的fnAddRow（）重绘表，除非它被禁用。让表重绘自己没问题，但是痛苦是为什么ckeditor中的文本被重置的原因。
以下是摘录 -
数据表定义 -
var config = {
"bJQueryUI": true,
"bAutoWidth": true,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bPaginate": false,
"bDestroy": false,
"aoColumnDefs": [
{ "sType": "html", "aTargets": [ 0,1,3 ] },
{"sWidth": "350px", "aTargets": [ 4 ] },//,
{"sWidth": "100px", "aTargets": [ 3 ] },//,
{"sWidth": "165px", "aTargets": [ 2 ] },//,
{"sWidth": "165px", "aTargets": [ 1 ] },//,
{"sWidth": "165px", "aTargets": [ 0 ] }//,
//{"sWidth": "15%", "aTargets": [ 3 ] },
//{"sWidth": "15%", "aTargets": [ 2 ] },
//{"sWidth": "15%", "aTargets": [ 1 ] },
//{"sWidth": "15%", "aTargets": [ 0 ] },
],
"oLanguage": {
"sEmptyTable": "No data available"
},
"bRetrieve": true,
"fnDrawCallback": function( oSettings ) {
//$( ".documents").ckeditor(planningeditorConfig);
alert('table redrawn..');
}
};
var oTable = $(".datatable").dataTable(config);
将行添加到现有表的函数 -
$("#add-planning-row").click( function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData( [ "", "", "", "", ""] );
var nRow = oTable.fnGetNodes( aiNew[0] );
nRow.className = " planningRow "+nRow.className;
var aData = oTable.fnGetData(nRow);
var jqTds = $(">td", nRow);
var loopIndexValue = parseInt($("#loopIndexValue").val());
var html = "<input type=\"text\" value=\""+aData[0]+"\" name=\"projectPlanning["+loopIndexValue+"].eftName\" class=\"planningField\" >"
+ "<input type=\"hidden\" value=\"${project.id}\" name=\"projectPlanning["+loopIndexValue+"].projectId\" class=\"planningField\" />"
+ "<input type=\"hidden\" value=\"added through ui\" name=\"projectPlanning["+loopIndexValue+"].description\" class=\"planningField\" />"
+ "<input type=\"hidden\" value=\"plan for ${project.name}\" name=\"projectPlanning["+loopIndexValue+"].name\" class=\"planningField\" />";
var comboHtml = " <select class=\"combobox\" name=\"projectPlanning["+loopIndexValue+"].itemStatus.id\" id=\"projectPlanning"+loopIndexValue+".itemStatus.id\" class=\"planningField\" > "+
" <option value=\"1\">New</option> "+
" <option value=\"2\">On Track</option> "+
" <option value=\"3\">Minor Impact</option> "+
" <option value=\"4\">Major Impact</option> "+
" <option value=\"5\">Complete</option> "+
" </select> ";
jqTds[0].innerHTML = html;
jqTds[1].innerHTML = "<input type=\"text\" value=\""+aData[1]+"\" name=\"projectPlanning["+loopIndexValue+"].item\" class=\"planningField\" >";
jqTds[2].innerHTML = "<input type=\"text\" value=\""+aData[2]+"\" name=\"projectPlanning["+loopIndexValue+"].itemDate\" class=\"datepicker planningField \" >";
jqTds[3].innerHTML = comboHtml;
jqTds[4].innerHTML = "<textarea type=\"text\" value=\"\" name=\"projectPlanning["+loopIndexValue+"].document\" class=\"documents planningField \" >"+aData[4]+"</textarea>";
$("#loopIndexValue").val(loopIndexValue+1);
$( ".datepicker" ).datepicker();
$( ".combobox" ).combobox();
$( ".documents").ckeditor(planningeditorConfig);
nEditing = nRow;
} );
HTML表格 -
<div id="planning-tab" class="planning-content">
<div class="ui-dialog-buttonset">
<input id="delete-planning-row" type="button" class="button" value="Delete planning item" />
<input id="add-planning-row" type="button" class="button" value="Add planning item" />
</div>
<table id="planning-list" class="datatable" style="width: 1024px;">
<thead>
<tr>
<td> EFT </td>
<td> Item </td>
<td> Date </td>
<td> Status </td>
<td> Document </td>
</tr>
</thead>
<tbody>
<c:set value="0" var="loopIndexValue" ></c:set>
<c:forEach items="${project.projectPlanning}" var="planning" varStatus="status">
<tr class="planningRow">
<td>
<input value="<ctg:capitalize text="${planning.eftName}" />" name="projectPlanning[${status.index}].eftName" class="planningField planningEftName"/>
<input type="hidden" value="${planning.id}" name="projectPlanning[${status.index}].id" class="planningField" />
<input type="hidden" value="${planning.name}" name="projectPlanning[${status.index}].name" class="planningField" />
<input type="hidden" value="${planning.description}" name="projectPlanning[${status.index}].description" class="planningField" />
<input type="hidden" value="${project.id}" name="projectPlanning[${status.index}].projectId" class="planningField" />
<%-- <input type="hidden" value="${planning.document}" name="projectPlanning[${status.index}].document" class="planningField" /> --%>
</td>
<td>
<input value="${planning.item}" name="projectPlanning[${status.index}].item" class="planningField planningItem" />
</td>
<td>
<input value="<fmt:formatDate pattern="MM/dd/yyyy" value="${planning.itemDate}" />" name="projectPlanning[${status.index}].itemDate" class="datepicker planningField"/>
</td>
<td>
<form:select path="projectPlanning[${status.index}].itemStatus.id" items="${projectStatuses}" itemLabel="name" itemValue="id" cssClass="combobox planningField" />
</td>
<td>
<%-- <form:textarea class="ckeditor" id="ckeditorPlan" name="projectPlanning[${status.index}].document" path="document" rows="1" cols="20" /> --%>
<%-- <textarea class="ckeditor" id="ckeditorPlan" name="projectPlanning[${status.index}].document" rows="1" cols="20" >${planning.document}</textarea> --%>
<textarea contenteditable="true" name="projectPlanning[${status.index}].document" rows="1" cols="20" class="documents planningField planningDocument">${planning.document}</textarea>
</td>
</tr>
</c:forEach>
</tbody>
</table>
非常感谢任何帮助。感谢
答案 0 :(得分：1)
嗯..我试着自己解决这个问题。这似乎很简单，但经过论坛和所有cr * p后很难猜到。好的..解决方案是重置或销毁现有的ckeditor实例并重新创建它。以下是代码段 -
JQUERY方法 -
function resetCkEditors(){
//alert("reseting editors.");
for(var i in CKEDITOR.instances) {
/* editor = CKEDITOR.instances[i]
editor.destroy();
editor = null; */
var editorNm = CKEDITOR.instances[i].name;
editor = CKEDITOR.instances[i];
if(editorNm.indexOf('projectPlanText') != -1)
{
editor.destroy();
editor = null;
}
}
}
$("#add-planning-row").click( function (e) {
resetCkEditors(); // -- THIS IS IMPORTANT AND MAKE SURE YOU ARE NOT DESTROYING ALL THE CKEDITOR INSTANCES OTHER THAN THE ONE IN THE DATATABLE
e.preventDefault();
var aiNew = oTable.fnAddData( [ "", "", "", "", ""] );
var nRow = oTable.fnGetNodes( aiNew[0] );
nRow.className = " planningRow "+nRow.className;
var aData = oTable.fnGetData(nRow);
var jqTds = $(">td", nRow);
var loopIndexValue = parseInt($("#loopIndexValue").val());
var html = "<input type=\"text\" value=\""+aData[0]+"\" name=\"projectPlanning["+loopIndexValue+"].eftName\" class=\"planningField\" >"
+ "<input type=\"hidden\" value=\"${project.id}\" name=\"projectPlanning["+loopIndexValue+"].projectId\" class=\"planningField\" />"
+ "<input type=\"hidden\" value=\"added through ui\" name=\"projectPlanning["+loopIndexValue+"].description\" class=\"planningField\" />"
+ "<input type=\"hidden\" value=\"plan for ${project.name}\" name=\"projectPlanning["+loopIndexValue+"].name\" class=\"planningField\" />";
var comboHtml = " <select class=\"combobox\" name=\"projectPlanning["+loopIndexValue+"].itemStatus.id\" id=\"projectPlanning"+loopIndexValue+".itemStatus.id\" class=\"planningField\" > "+
" <option value=\"1\">New</option> "+
" <option value=\"2\">On Track</option> "+
" <option value=\"3\">Minor Impact</option> "+
" <option value=\"4\">Major Impact</option> "+
" <option value=\"5\">Complete</option> "+
" </select> ";
jqTds[0].innerHTML = html;
jqTds[1].innerHTML = "<input type=\"text\" value=\""+aData[1]+"\" name=\"projectPlanning["+loopIndexValue+"].item\" class=\"planningField\" >";
jqTds[2].innerHTML = "<input type=\"text\" value=\""+aData[2]+"\" name=\"projectPlanning["+loopIndexValue+"].itemDate\" class=\"datepicker planningField \" >";
jqTds[3].innerHTML = comboHtml;
jqTds[4].innerHTML = "<textarea id=\"projectPlanText-["+loopIndexValue+"]\" type=\"text\" value=\"\" name=\"projectPlanning["+loopIndexValue+"].document\" class=\"documents planningField planningDocument\" >"+aData[4]+"</textarea>";
$("#loopIndexValue").val(loopIndexValue+1);
$( ".datepicker" ).datepicker();
$( ".combobox" ).combobox();
$( ".documents").ckeditor(planningeditorConfig); // -- THIS LINE IS IMPORTANT TO SET THE TEXTAREA TO CKEDITOR INSTANCES WITHOUT WHICH ONLY THE NEW ROW WILL HAVE THE CKEDITOR INSTANCE AND REST WILL BE TURNED BACK TO TEXTAREA
nEditing = nRow;
} );