I am new to using ckEditor (but not FCKEditor) and if this question has already been answered I apologize (I looked but couldn't find it).
My page has a div that is updated using ajax based on button clicks elsewhere on the page. This div contains either plain text (for reading) or a ckeditor textarea (for editing).
The first time ckEditor is invoked (on a button click) it works exactly the way I want it to; but after that it always returns an error.
My page includes the link to ckeditor, the buttons and the actions to perform on the button clicks.
The call to ajax returns the contents of the updateable div including a textarea, like this
The button click invokes the ajax call and the ckEditor, like this:
As I say, this works perfectly the first time, but not again.
My suspicion is that clicking the button a second time (or changing the contents of the div to read-only content) does not unload or destroy the instance of ckEditor that has been created and that I cannot start another instance. Is this reasonable or have I missed something?
So... do I have to "destroy" the instance or ckEditor after every use or can I re-use it after the first use. And how would I do either of those?
Thanks very much
Reg
My page has a div that is updated using ajax based on button clicks elsewhere on the page. This div contains either plain text (for reading) or a ckeditor textarea (for editing).
The first time ckEditor is invoked (on a button click) it works exactly the way I want it to; but after that it always returns an error.
My page includes the link to ckeditor, the buttons and the actions to perform on the button clicks.
The call to ajax returns the contents of the updateable div including a textarea, like this
<tr class="Entries"> <td class="Labels" title="Enter your message, using any of the formatting options offered above" ><br /><br /><br />Message</td> <td class="Entries"> <textarea class="jquery_ckeditor" cols="200" id="editor1" name="editor1" rows="10"></textarea> </td> </tr>
The button click invokes the ajax call and the ckEditor, like this:
function NewMessage() {
$.ajax({
url: "wc.dll?CMProcess~NewMessage~&sk=3160DWRT922008&sh=210&NoCache="+new Date().getTime(),
dataType:"html",
error: function (req,sttext) { alert(sttext+" : " +req) },
success: function(req) {
$("#MessageContent").html(req);
// Initialize the editor.
$('.jquery_ckeditor').ckeditor(config);
}
} )
}As I say, this works perfectly the first time, but not again.
My suspicion is that clicking the button a second time (or changing the contents of the div to read-only content) does not unload or destroy the instance of ckEditor that has been created and that I cannot start another instance. Is this reasonable or have I missed something?
So... do I have to "destroy" the instance or ckEditor after every use or can I re-use it after the first use. And how would I do either of those?
Thanks very much
Reg
Re: Second Time with jQuery Doesn't Work
If it makes a difference, the editor is being shown/hidden. Anyone know what can cause this? TIA.
Re: Second Time with jQuery Doesn't Work
Re: Second Time with jQuery Doesn't Work
Hi all,
This is pretty much why http://api.jquery.com/live/ was invented. The problem is that you are trying to do something pretty complex. You'll need to work the code out for yourselves because it's not something I will just post out.
I will explain the process you need to follow though.
Ajax load your form into a div on the page using jquery.load or jquery.ajax.
As you have already shown in your example so far, let the success function load CKEditor into the textarea or div which you want to edit.
Create a function which calls CKEDITOR.instances.id-attribute-of-your-textare-atag.updateElement(); just before the form is submitted. jQuery form plugin is useful for this but has a small learning curve.
Once the form has been submitted successfully, call CKEDITOR.instances.id-attribute-of-your-textarea-tag.destroy(); to remove the editor instance, then in the same function, get the original code re-evalutated by the browser again (Sort of like a loop.)
The problem is that javascript isn't re-evaluated after an ajax event unless you specify so. You can do it with $(document).ajaxStop() functions and you can do it with the more suitable jQuery.live to bind the event permanently (I think.)
Ajaxing HTML forms can be a massive pain in the back side when you have to re-evaluate a whole mess of code again.
In your function NewMessage() example, I'd say that you maybe need to pass req to it like :
function NewMessage(req) { your stuff here }Re: Re: Second Time with jQuery Doesn't Work
I've been pouring over every internet reference I could find over this problem. Although I have found several other instances of the problem stated elsewhere, notably StackOverflow, none of the solutions presented have worked in my case. I am replying to this discussion thread because the symptoms raelehman has described also describe what I am going through.
Like others, I am instantiating CKEditor 4 from within a jQuery dialog box. I have gotten to the point where the first time I open the dialog window, the CKEditor works as expected. I can even open it using various methods, including javascript on load, anonymous functions, by functions using the open: method within the dialog code, or even by simply inserting a class="ckeditor" attribute within the textarea itself.
On close, I have used:
CKEDITOR.remove()
and while these seem to destroy the CKEDITOR instantiation, because when I test for the existence of the object node in javascript, when I load the form back into my open dialog box, low and behold the CKEditor is still attached to my textarea.
Now, getting back to the topic of this thread, the first time I open the dialog window, the ckeditor works well. When I close the window, then reopen it, however, the CKEditor text field has no focus, and no amount of css z-index will make it better. It seems that I can get to a point where I can create a new working instance, but the problem is I can't get rid of the old instance. So, I end up having CKEditor instances stacked vertically in the dialog window. The newest one has focus, but the previous "old" instances do not. What good is that, anyway? I want one CKEditor in my form, not two or more.
Now, to address the fellow who posted above me. I actually went through the trouble to create a form string, and get the form as an XML string value using a jquery ajax get, and the form works ok (very slow loading process, though). But, guess what, the CKEditor instance created "remotely" still has no focus. So, I put in a lot of work, and no gain on the CKEditor end, and quite a bit of performance loss.
I have no solution, except to say that I cannot find a solution, even where numerous solutions are given, and claims of success.
For me, the only sure-shot method is to refresh the parent page upon closing my jquery dialog box.
It's funny that you state
It's funny that you state that you have tried to use the CKEDITOR.remove and even link to its documentation where it states that it shouldn't be used to try to destroy an editor instance because that's not its goal and then you claim that it doesn't work.
Re: It's funny that you state
You are missing the forest for the trees. What I said was I tried many methods, with the goal of being able to open a dialog window multiple times, and not losing the ability to enter text in the CKEditor window. You do realize that's the subject of this thread?
My working code.
This now works for me in all the major browsers:
$('#gbFormBox').dialog({
modal: true,
title: 'Guestbook form for ' + $('#gbform').prop('title'),
position: ['center','center'],
width: dWidth,
height: dHeight,
autoOpen: false,
open: function(event,ui){
if(! $( "#editor" ).ckeditor()){
setTimeout(function(){
CKEDITOR.replace( 'editor', { toolbar : 'Basic' });
},50);
}
termsLoad();
},
close: function(){
CKEDITOR.instances['editor'].updateElement();
CKEDITOR.instances['editor'].setData('');
}
});
$('#gbFormBox').dialog('open');
popgnologist, what is the key to mkae it work?
HI popgnologist,
I have similar problems, and lots of the clicks do work for the second time. Mostly I solved it by anchoring it to the main page such as:
$("body").on("click", "a.paginate_button", function () {
instead of using
$("a.paginate_button").click( function(){
This is called event delegation.
But it is a different situation for modal popup or for a thrid party widget.
What is the key to make yours work?
Thanks,