CKEditor 无法解析 JSON 响应。

Question

我有的东西：

1. Symfony2
2. 带Image和增强图像(也是image2)插件的CKEditor

我在官方网站上找到了有关将文件上传到服务器的信息:

示例-设置图像上传插件:

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

响应：文件上传成功。当文件成功上传时，预期JSON响应具有以下条目：

• uploaded – 设为1。
• fileName – 已上传文件的名称。
• url – 已上传文件的URL（经过URL编码）。

示例：

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

Symfony 返回 JSON 响应:

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

成功上传图片后，我看到：

并在JS控制台中显示错误：

  

资源被解释为文档，但传输的MIME类型为   应用程序/JSON：   "http://example.com/app_dev.php/dashboard/settings/upload/image?CKEditor=example_post_content&CKEditorFuncNum=1&langCode=en"。

但它必须像官方页面上的第二个编辑器一样工作。

我尝试返回Symfony的其他响应，如：

$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;

但是没有起作用。有任何想法吗？

更新

我通过使用答案解决了这个问题。最终的FCKeditor代码如下：

$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;

有人知道其他解决方案或者为什么使用 JSON 响应的解决方案无法工作吗？

- Max Lipsky

---

你能展示一下调用后端的JS代码吗？ - Carlos Granados

为什么 $return new JsonResponse 中有一个美元符号？ - chiliNUT

@chiliNUT 只是一个复制粘贴的错误。 - Max Lipsky

Answer 1

当您在内容中粘贴图像时，使用的是JSON响应，对于来自对话框的文件上传，必须使用正常的JavaScript响应。

- AlfonsoML

---

谢谢@AlfonsoML。我需要在响应内容中写什么？“normal javascript response”是什么意思？ - Max Lipsky

“正常响应”是您找到可行的响应。多年来一直如此，只有新的粘贴系统使用JSON响应。您可以在他们的文档http://docs.ckeditor.com/#!/guide/dev_file_browser_api-section-example-4以及任何其他说明如何在CKEditor中上传文件的网站中找到它。 - AlfonsoML

Answer 2

在他们的示例中，第二个编辑器中的内容与您在更新中输入的内容完全相同。

作为响应，他们有Content-Type: text/html和内容。

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

所以，很不可能有其他的解决方案。

- Eugene Tiurin

---

是的，这是真的，但我认为有其他解决方案，因为您可以直接访问CKEditor事件。 - Max Lipsky

如果你想知道为什么有一个“92”数字集合，请打开此文档进行阅读。 - dikirill