Question

我已经在https://github.com/cloudinary/cloudinary_tinymce阅读了自述文件，但仍然无法理解如何操作。而且他们在Ruby on Rails上做到了，这并没有什么帮助。

我真的需要做服务器端端点吗？它只要求签名的URL。但我不需要签名。我如何在JavaScript和HTML中单独完成？除了渲染模板之外，我不想在我的服务器内做任何事情。

编辑：我尝试使用image_upload handler并将其上传到我的Cloudinary帐户。但它不会给我成功上传图片的网址（我希望得到类似https://res.cloudinary.com/strova/image/upload/v1527068409/asl_gjpmhn.jpg的内容）。这是我的代码：

images_upload_handler: function (blobInfo, success, failure) {
            var xhr, formData;

            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', 'https://api.cloudinary.com/v1_1/strova/upload');

            xhr.onload = function () {
                var json;

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

                json = JSON.parse(xhr.responseText);



                success(json.location);
            };

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

            xhr.send(formData);
        }

Answer 1

尝试“伪造”一个POST请求。我还在努力。找出文档“需要”POST请求的原因。 PHP示例：https://www.tinymce.com/docs-3x//TinyMCE3x@Installation/只回显了POSTED到服务器的内容。插件必须插入发布的内容。

Answer 2

受您代码的启发，我能够为自己解决这个难题。缺少的部分是在解析响应之后，需要以TinyMCE所需的格式调用响应中的secure_url并将其分配给json。以下是代码：

images_upload_handler: function (blobInfo, success, failure) {
            var xhr, formData;

            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;

//restricted it to image only using resource_type = image in url, you can set it to auto for all types 

            xhr.open('POST', 'https://api.cloudinary.com/v1_1/<yourcloudname>/image/upload');

            xhr.onload = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    var url = response.secure_url; //get the url 
                    var json = {location: url}; //set it in the format tinyMCE wants it
                    success(json.location);
                }
            };

            formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            formData.append('upload_preset', '<YourUnsignedUploadPreset>');

            xhr.send(formData);
        }

在html和javascript中使用cloudinary设置tinymce

2 个答案: