I realize I am probably doing this completely wrong, but here is my issue…
I am using jQuery to grab a populated form (for editing content) using ajax. This form has a textarea that I am replacing with CKEditor. The thing that starts this is when you select the entry you want to edit through a drop-down list. It then pulls the appropriate information from the database and populates the form, which is sent back and my code puts into a div.
I first had the form on the static page with the jQuery+ajax pulling the data to populate the fields. But this would not update the CKEditor with the textarea content. So then I made the ajax return the entire form instead of just the data, and my jQuery put the form onto the page. This works the first time you select something to edit, but if you then change what you are editing, the CKEditor does not replace the textarea, and I get a javascript error saying:
i.contentWindow is null
in my ckeditor.js file.
Here is my script (the reason there are so many commented out parts is because I tried a lot of things to get this to work…):
<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>
Help is greatly appreciated.
SOLVED
Finally figured it out. Here is my code:
<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>
I moved the form back to the page that called the ajax method and and replaced the textarea with the CKEditor right away. Then, the ajax runs, and I put the CKEditor instance into a variable. I HAD to do this, or else I would get an error saying “CKEDITOR.instances.news_body is not defined.” Anyway, then I just used the variable to set the data within the CKEditor instance. Data changes work fine, and saves to the database fine. Hope this helps someone else.
Also, I found this answer mostly accurate at How to add data to CKEditor using JQuery by @PanJanek, and voted his answer up, because the original author answered his own question 2 hours later with PanJanek’s answer, with an added “F5″… -.-
(Placing the answer here so this can be closed.)
Finally figured it out. Here is my code:
I moved the form back to the page that called the ajax method and and replaced the textarea with the CKEditor right away. Then, the ajax runs, and I put the CKEditor instance into a variable. I HAD to do this, or else I would get an error saying “CKEDITOR.instances.news_body is not defined.” Anyway, then I just used the variable to set the data within the CKEditor instance. Data changes work fine, and saves to the database fine. Hope this helps someone else.
Also, I found this answer mostly accurate at How to add data to CKEditor using JQuery by @PanJanek, and voted his answer up, because the original author answered his own question 2 hours later with PanJanek’s answer, with an added “F5″… -.-