[通过CKEditor 4中的API上传图像

Question

我正在使用Ckeditor 4上传图像。我想将图像发送到api，输出将是图像url。这是我的ckeditor：

HTML：

<textarea cols="80" rows="10" id="ckeditor1" name="ckeditor1" data-sample-short></textarea>

JS：

CKEDITOR.replace('ckeditor1', {
  height: 300,
  filebrowserImageUploadUrl: 'https://example.com/api/image/editor',
  filebrowserUploadMethod: 'form',             
  fileTools_requestHeaders: {
       'X-Requested-With': 'XMLHttpRequest',
       'access-token': 'token' 
  }
});

最后。它警告“图像源URL丢失”。因为我的API返回：

{image_url: "https://exmaple.com/image/image.png"}

有什么方法可以处理该对象，并将图像添加到ckeditor吗？

Answer 1

在这种情况下，尝试估算您的需求。

在这种情况下，您基本上拥有三个步骤：

1. 您在CKEditor中使用上载图像功能。
2. 您使用准备好的功能或外部图像处理API处理上传的图像服务器端。
3. [您返回带有对象的JSON响应：{image_url: ...absolute url to image...}。

我使用TinyMCE时也有类似的实现，因此基本上我要为上传指定URL，并具有一个服务器端功能来接收上传内容，将上传的文件移至特定的文件夹，然后继续进行较小的优化版本的上传图像，最后我只返回了带有图像绝对URL的JSON数组。接下来，我只是在TinyMCE初始化程序中处理函数的响应。我想它与CKEditor类似。

我的T​​inyMCE代码示例（用...减少了不相关的部分：]：

tinymce.init({
    ...
    plugins: '...imagetools...',
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        xhr.open('POST', 'https://www.example.com/images/upload');

        xhr.onload = function() {
            var json;

            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }

            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }

            success(json.location);
        };

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());

        xhr.send(formData);
    }
});

因此，基本上，它会将具有该文件位置的图像附加到编辑器。我知道它不是CKEditor，但是原理是相同的。希望对您有所帮助。