Hello everybody!
I have built a page where I use AJAX on a click on a button to execute a php code in a remote page, with this code containing as instance of CK editor.
Example:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script> [...] function loadXMLedition(lk) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttpedition=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttpedition=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttpedition.onreadystatechange=function() { if (xmlhttpedition.readyState==4 && xmlhttpedition.status==200) { document.getElementById("divaffichage04edition").innerHTML=xmlhttpedition.responseText; } else { document.getElementById("divaffichage04edition").innerHTML="Erreur"; } } xmlhttpedition.open("GET","ajax/fileparameter.php?lk="+lk,true); xmlhttpedition.send(); } </script> [...] <a href="javascript:loadXMLedition("aparameter")">blbakba</a> [...] <div id="divaffichage04edition"> </div>
Re: Using CKed in a PHP page loaded with AJAX
Re: Using CKed in a PHP page loaded with AJAX
What you must do is to create an ajax stop event that triggers instantiating CKEditor once the ajax request has successfully completed.
Avoid using the CKEditor API to do the actual ajaxing if you can. It's very poor for that. No sync switch and a too short time out.
Thanks,
Zanpakutō
Re: Using CKed in a PHP page loaded with AJAX
So you suggest that I change this code like this :
Re: Using CKed in a PHP page loaded with AJAX
Basically, what I'm saying is that instead of using : http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ajax.html to do your ajax requests, use something like : http://api.jquery.com/jQuery.ajax/ because as you can see, the options in the CKEditor API don't include switches such as async and timeout. Both of those switches are very important if you don't create an event system (Because sometimes an event system is just bloat) And you want to make sure that you give a busy server enough time to respond. My tests have revealed to me that CKEditor's ajax request time out is too short to load large amounts of data from a busy server, has no way that I can see to lengthen the timeout and is therefore unsuitable for my needs because I want to guarantee that the server is given a fair chance to respond.
The way you can apply CKEditor to content you load using ajax can work like this :
The page loads as normal, ckeditor.js is included in the document but nothing is replaced.
A user clicks an edit button you have created in order to edit something.
The button's default action is prevented (Or # is used as the url.)
An ajax request is made. ajax start event is fired.
ajax success/fail event is fired. You deal with the fail event if there was one or you wait for the ajax stop event.
The next event is the ajax stop event. This means all ajax events have now stopped and the requested content to load has finished loading into the DOM.
Once the ajax stop event has fired, you can then replace a tag contained within the ajax loaded content, with a CKEditor instance using CKEditor replace.
Things to look out for include if the user just clicks away from an editor instance without submitting the form. In that case you need to manually destroy the unused but still existing CKEditor instance. And restart the whole process again correctly if further ajax requests are to be made.
Editor paths in your config are important and should be absolute urls and not relative.
You also need to figure out a way to perform the ajax submit on the form for it to work in a professional way.
What you are trying to do is extremely difficult and you are really going to need to fully understand how ajax works and several parts of the CKEditor API, in order to pull it off smoothly.
Good luck.
Thanks,
Zanpakutō