running ckeditor from an ajax application

Hello All,
i have a web application i wrote that is using a basic WYSIWYG editor. i try to implement ckeditor and have the following problem:

my application is fully ajax, that's mean that every page request is done via ajax and then parsed. iv'e tried the ckeditor for php example (that was running ok when not in ajax mode) but of course it's not running under the ajax since the php code is parsed to <script... > tags that ajax can not read in any way.

is there any method that may work for this situation?

btw, i read the examples for ajax with the create and remove buttons but that won't help me in this case since only when loading the ajax page i know what and how many wysiwyg frames to load

Sun, 04/24/2011 - 11:26

typeof

Joined: 24/04/2011

Posts: 99

Re: running ckeditor from an ajax application

Ajax should handle <script> with no problem.

See the trivial example

1.html

// include jQuery
<script src="js/jquery-1.4.2.min.js"></script>

<script>
  $(function() {
     // load 2.html into div #my
     $("#my").load("2.html")
  });
</script>

<div id="my"></div>

2.html

<script>
   alert("hello!")
</script>

When you open 1.html, it executes AJAX call to the 2.html. As you will see the script from 2.html is normally executed (just as in case of a normal, non-AJAX request) and the alert is shown.

Please post more details on your problem.

Sun, 05/01/2011 - 08:37

shaidy

Joined: 21/04/2011

Posts: 3

Re: running ckeditor from an ajax application

Hi
thanks for the reply. i'm not very familiar with jquery but i perform all my ajax calls with XML HTTP and i absolutly can't use <script> inside the response.

here is how i call the ajax call:

<script type="text/javascript">
function reloadPage(pageName,formName,refreshElem) {
   xmlHttp=GetXmlHttpObject();
   xmlHttp.onreadystatechange=stateChanged;
   function stateChanged() {
      if (xmlHttp.readyState==4) {
         document.getElementById(refreshElem).innerHTML=xmlHttp.responseText;
         undimm();
      }
   }
   var url='';
   if (formName) {
      var x=document.getElementById(formName);
      for (var i=0;i<x.length;i++) {
         x.elements[i].value = x.elements[i].value.replace(/&/g,"%26");
         url += x.elements[i].name+'='+x.elements[i].value+'&';
      }
   }
   if (url) changeFieldValue('txt',url);
   xmlHttp.open("POST",encodeURI(pageName),true);
   xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
   xmlHttp.send(url);
}

in the response i can't use <script> tags

Sun, 05/01/2011 - 10:51

typeof

Joined: 24/04/2011

Posts: 99

Re: running ckeditor from an ajax application

Oh, I see.

I'd really recommend you to use jQuery, you don't have to know much more about it than I included in 1.html.

Anyway, in case you prefer to go hard way you may want to try http://brightbyte.de/page/Loading_script_tags_via_AJAX - the runScript function is probably what you want.

Sun, 05/01/2011 - 11:35

shaidy

Joined: 21/04/2011

Posts: 3

Re: running ckeditor from an ajax application

Hi
Thanks!!

about jquery - i have my suggestions about loading this amount of code for nothing but i do my best.

iv'e tried the solutions that you have posted and it seems to be better, but now i get this error:

ReferenceError: Can't find variable: CKEDITOR

this is probably because the script in the code does not like the <script type="text/javascript" src="/ezadmin3/ckeditor/ckeditor.js?t=B37D54V"></script> and can't parse it.

is there any way to install this code before calling the ajax?

Sun, 05/01/2011 - 12:10

typeof

Joined: 24/04/2011

Posts: 99

Re: running ckeditor from an ajax application

@ jQuery - well, it doesn't have to be necessarily so heavy solution...

There is something called "Google Libraries API" - if you use jquery hosted there it will be downloaded once and cached for a year or so (see http://paulirish.com/2009/caching-and-g ... aries-api/) and will be also shared with other apps that use jQuery this way.

I sent you a private message regarding your AJAX problem.