【发布时间】：2011-12-17 01:37:42
【问题描述】：
我意识到我可能完全错了，但这是我的问题......
我正在使用 jQuery 来获取使用 ajax 的填充表单（用于编辑内容）。这个表单有一个我用 CKEditor 替换的文本区域。当您通过下拉列表选择要编辑的条目时，开始此操作。然后它从数据库中提取适当的信息并填充表单，该表单被发回，我的代码放入一个 div 中。
我首先在静态页面上使用 jQuery+ajax 提取数据以填充字段的表单。但这不会用 textarea 内容更新 CKEditor。所以我让 ajax 返回整个表单而不仅仅是数据，我的 jQuery 将表单放到页面上。这在您第一次选择要编辑的内容时有效，但是如果您随后更改正在编辑的内容，CKEditor 不会替换 textarea，并且我收到一个 javascript 错误提示：
i.contentWindow 为空
在我的 ckeditor.js 文件中。
这是我的脚本（之所以有这么多被注释掉的部分是因为我尝试了很多东西来让它工作......）：
<script type="text/javascript">
//$(document).ready(textEditor());
$("select#news").change(function(){
if ($(this).val() != "NULL"){
$.ajax({
url: "/?r=Content_News_Edit",
global: false,
type: "POST",
data: {news_id : $("option:selected",this).attr('value')},
dataType: "html",
async:false,
success: function(data){
$("div#fillContent").html(data);
/* //create jquery object from the response html
var $response=$(data);
//query the jq object for the values
$("input#news_id").val($response.filter("div#news_id").text());
$("input#news_heading").val($response.filter("div#news_heading").text());
$("input#news_body").text($response.filter("div#news_body").text());
*/
textEditor();
}
});
}
});
function textEditor(){
var instance = CKEDITOR.instances['news_body'];
if(instance){
instance.destroy();
}
instance = null;
CKEDITOR.replace( 'news_body',{
height : "600",
width : "550",
filebrowserBrowseUrl : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
};
</script>
非常感谢您的帮助。
已解决
终于想通了。这是我的代码：
<script type="text/javascript">
$("select#news").change(function(){
if ($(this).val() != "NULL"){
$.ajax({
url: "/?r=Content_News_Edit",
global: false,
type: "POST",
data: {news_id : $("option:selected",this).attr('value')},
dataType: "html",
async:false,
success: function(data){
//create jquery object from the response html
var $response=$(data);
//query the jq object for the values
$("input#news_id").val($response.filter("div#news_id").text());
$("input#news_heading").val($response.filter("div#news_heading").text());
$("input#news_body").text($response.filter("div#news_body").text());
var instance = CKEDITOR.instances['news_body'];
instance.setData($response.filter("div#news_body").text())
}
});
}
});
CKEDITOR.replace( 'news_body',{
height : "600",
width : "550",
filebrowserBrowseUrl : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
我将表单移回调用 ajax 方法的页面，并立即将 textarea 替换为 CKEditor。然后，ajax 运行，我将 CKEditor 实例放入一个变量中。我不得不这样做，否则我会收到一条错误消息“CKEDITOR.instances.news_body 未定义”。无论如何，然后我只是使用该变量来设置 CKEditor 实例中的数据。数据更改工作正常，并保存到数据库中。希望这对其他人有帮助。
另外，我发现@PanJanek 在How to add data to CKEditor using JQuery 上的这个答案大部分是准确的，并投票支持他的答案，因为原作者在 2 小时后用 PanJanek 的答案回答了他自己的问题，并添加了“F5”...... - .-
【问题讨论】：