Safari Jquery Ajax Destroy and Replace Bug

A Jquery ajax call grabs a textarea and it's contents. After the new HTML has been inserted into the DOM, the following JS is run to initialize the CKeditor:

if(CKEDITOR.instances['wysiwygeditor']) {
   CKEDITOR.instances['wysiwygeditor'].destroy(true);
}
CKEDITOR.replace( 'wysiwygeditor');

On IE8, IE9, FireFox everything works fine. But in Safari it only works the first time. The second time the Jquery Ajax call is made, the CKeditor WYSIWYG area is blank. If you click the "Source" button, you see that the new HTML source, confirming that the new textarea has been properly been associated with CKEditor, but for some reason, the WYSIWYG area is not properly refreshing. If you click the "Source" button a second time, the WYSIWYG area is now properly displaying the expected content. The challenge is, to my clients, it appears as though the CKEditor is not working, this second time around.

I noticed that on this second attempt, Safari reports "One error in opening the page. For more information, choose Window >Activty"

Looking at "Window>Activity" I see that http://mywebsite.com/ckeditor/contents.css fails to load, and reports "cancelled". I'm assuming this is why the CKEditor is failing to display the content properly. At any level, it appears the CKEditor is failing on Safari.

This has been tested on 3.6.1 and 3.6.2, and the results are the same. Any thoughts? Thanks kindly. I'm more than willing to trouble shoot if this helps CKeditor compatibility on Safari.

Thu, 01/05/2012 - 14:05

Anna

Joined: 14/12/2010

Posts: 1369

Re: Safari Jquery Ajax Destroy and Replace Bug

It would be most helpful if you could report this issue on our Development site, as described here. This will make the problem easier to track and investigate. Thanks!

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!

Thu, 01/05/2012 - 15:00

togglemedia

Joined: 11/03/2008

Posts: 4

Re: Safari Jquery Ajax Destroy and Replace Bug

Thanks for the heads up Anna. Will do. I suppose I was initially interested to see if there were any workarounds that might be out there. I spent a while trying to come up with my own, to no avail.

Wed, 01/25/2012 - 13:54

dsyers

Joined: 25/01/2012

Posts: 1

Re: Safari Jquery Ajax Destroy and Replace Bug

I have managed to find a workaround for this that I have tested as working in IE, FF, Safari and Chrome.

The workaround is to wrap the replace statement in a setTimeout command with a 0 second delay - this fixes the issue with webkit browsers of the WYSIWIG side not loading, but can cause a very slight delay.

Below is a copy of my editor function, as I generate my areas in PHP and load with Ajax:

   public function editor($name, $value = "", $config = array(), $events = array())
   {
      $attr = "";
      foreach ($this->textareaAttributes as $key => $val) {
         $attr.= " " . $key . '="' . str_replace('"', '&quot;', $val) . '"';
      }
      $out = "<textarea name=\"" . $name . "\"" . $attr . ">" . htmlspecialchars($value) . "</textarea>\n";
      if (!$this->initialized) {
         $out .= $this->init();
      }

      $_config = $this->configSettings($config, $events);

      $txtHash = md5(time() . rand(0,1000));
      
      $js = $this->returnGlobalEvents();
      $js .= "if (!CKEDITOR.dws".$txtHash.") {";
      $js .= "CKEDITOR.dws".$txtHash."=true;";
      $js .= "if (CKEDITOR.instances['".$name."']) { try{ CKEDITOR.instances['".$name."'].destroy(true); delete CKEDITOR.instances['".$name."']; } catch(e) {}; }";
      if (!empty($_config))
         $js .= "setTimeout('CKEDITOR.replace(\"".$name."\", ".$this->jsEncode($_config).");',0);";
      else
         $js .= "setTimeout('CKEDITOR.replace(\"".$name."\");',0);";
      $js .= "setTimeout(\"delete CKEDITOR.dws".$txtHash.";\",2000);";
      $js .= "}";

      $out .= $this->script($js);

      if (!$this->returnOutput) {
         print $out;
         $out = "";
      }

      return $out;
   }

If you are wondering why my function also has

$js .= "if (!CKEDITOR.dws".$txtHash.") {";

Is because when loading from Ajax some browsers need the scripts running, and others do it automatically, this just prevents the code from being run twice.

*edit*

I have also added this to the bug report (http://dev.ckeditor.com/ticket/8641)