CKEditor can not parse JSON response

Question

What I have:

Symfony2
CKEditor with Image and Enhanced Image (also image2) addons

I found information about uploading files to server on official site:

Example — Setting Up Image upload plugin:

config.extraPlugins = 'uploadimage';
config.imageUploadUrl = '/uploader/upload.php?type=Images';

Response: File Uploaded Successfully When file is uploaded successfully then JSON response with the following entries is expected:

uploaded – Set to 1.

fileName – Name of uploaded file.

url – URL to a uploaded file (URL-encoded).

Example:

{
    "uploaded": 1,
    "fileName": "foo.jpg",
    "url": "/files/foo.jpg"
}

Symfony returns JSON responce:

return new JsonResponse(
            array(
                'uploaded'  => '1',
                'fileName'  => $image->getName(),
                'url'       => $image->getWebPath()
            )
        );

After successfully uploaded an image I see:

And error in JS console:

Resource interpreted as Document but transferred with MIME type application/json: "http://example.com/app_dev.php/dashboard/settings/upload/image?CKEditor=example_post_content&CKEditorFuncNum=1&langCode=en".

But it must be working like on the official page (see second editor)

I tried to return other response from Symfony, like:

$response = new Response();
        $response->headers->set('Content-Type', 'application/json');

        $response->setContent(
            json_encode(
            array(
                'uploaded'  => '1',
                'fileName'  => $image->getName(),
                'url'       => $image->getWebPath()
            )
        ));

        return $response;

but not works. Any idea?

UPDATE

I resolved the problem by using answer. Final FCKeditor code look like:

$response = new Response();

$response->headers->set('Content-Type', 'text/html');

$content = "<script type=\"text/javascript\">\n";
$content .= "window.parent.CKEDITOR.tools.callFunction(1, '".$image->getWebPath()."', '' );\n";
$content .= "</script>";

$response->setContent($content);

return $response;

Does anyone know another solution or why solution with JSON response doesn't work?

Eugene Tiurin Eugene Tiurin · Accepted Answer · 2015-11-05T14:42:43

What they have in their example in the second editor works exactly the same as you put in your UPDATE.

In response they have Content-Type: text/html and content is

<script type="text/javascript">
  window.parent.CKEDITOR.tools.callFunction("92", "\/userfiles\/images\/side-nav.jpg", "");
</script>

So, there's unlikely to be another solution.

CKEditor can not parse JSON response

2 Answers