ckfinder returned in ajax call

I'm using jQuery UI tabs in AJAX mode, so when I click on a tab it loads the tab contents from a URL. I have one tab which contains a CKFinder control in the html that's returned by the AJAX call. After loading the tab contents it calls CKFinder.create() and it overwrites the body element of the whole page with the CKFinder control. Usually the CKFinder control creates an iframe and puts itself inside, but it seems that the whole page gets replaced with the contents of the iframe. The same thing happens in version 2.0.1 and 2.2.1. Does anybody have any suggestions?

Thu, 05/10/2012 - 20:19

djackson

Joined: 15/09/2011

Posts: 6

Re: ckfinder returned in ajax call

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.6.1.js"></script>
    <script type="text/javascript" src="ckfinder/ckfinder.js"></script>
    <script type="text/javascript">
        //<!-- 
        function addck() 
        {
            $("#finderdiv").html("Add ckfinder here:<br><script type='text/javascript'>var finder = new CKFinder();var ckfinder = finder.create();</script>");
        }
        //-->
    </script>
</head>
<body>
<button onclick="addck();">Add CKFinder</button>
<div id="finderdiv"></div>
</body>
</html>

Thu, 05/10/2012 - 20:58

djackson

Joined: 15/09/2011

Posts: 6

Re: ckfinder returned in ajax call

I found that using .appendTo() instead of .create() fixes the problem.

var finder = new CKFinder();
finder.basePath = "/ckfinder/";
// Append CKFinder to <div id="container">
finder.appendTo( "container" );

Fri, 05/11/2012 - 09:26

Anna

Joined: 14/12/2010

Posts: 1369

Re: ckfinder returned in ajax call

Glad to see that you managed to fix the problem. Thanks for posting your solution, I am sure other developers struggling with this issue will be glad to use it!

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!