CKEditor 无法解析 JSON 响应

Posted 2023-02-16

【中文标题】CKEditor 无法解析 JSON 响应

【英文标题】：CKEditor can not parse JSON response

【发布时间】：2016-01-16 18:36:44

【问题描述】：

我有什么：

Symfony2 带有Image 和Enhanced Image (also image2) 插件的CKEditor

我在official site找到了关于上传文件到服务器的信息：

示例 — 设置图片上传插件：

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

响应：文件上传成功当文件上传时 成功然后带有以下条目的 JSON 响应是 预期：

已上传 - 设置为 1。 fileName – 上传文件的名称。 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 控制台报错：

资源被解释为 Document 但以 MIME 类型传输 应用程序/json： “http://example.com/app_dev.php/dashboard/settings/upload/image?CKEditor=example_post_content&CKEditorFuncNum=1&langCode=en”。

但它必须像在 official page 上一样工作（请参阅第二个编辑器）

我试图从 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;

但不起作用。有什么想法吗？

更新

我使用answer 解决了这个问题。最终的 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 响应的解决方案不起作用？

【问题讨论】：

能否展示调用后端的js代码？

为什么$return new JsonResponse中有美元符号

@chiliNUT 只是复制粘贴错误

【参考方案1】：

仅当您将图像粘贴到内容中时才会使用 JSON 响应，对于从对话框上传文件，您必须使用正常的 javascript 响应

【讨论】：

感谢@AlfonsoML。我需要在响应内容中写什么？这是什么意思——正常的 javascript 响应？

“正常响应”是您发现有效的响应。多年来一直如此，只有新的粘贴系统使用 JSON 响应。例如，您可以在他们的文档docs.ckeditor.com/#!/guide/… 和任何其他解释如何在 CKEditor 中上传文件的站点中找到这一点

【参考方案2】：

他们在第二个编辑器中 example 中的内容与您在 UPDATE 中输入的内容完全相同。

作为回应，他们有Content-Type: text/html，内容是

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

因此，不太可能有其他解决方案。

【讨论】：

是的，确实如此，但我认为还有其他解决方案，因为您可以直接访问 CKEditor 事件。

如果您问为什么要设置“92”数字，请打开此doc 了解它。