Javascript 如何在Trumbowyg中添加cloudinary参数上传插件

我正在我的项目中使用trumbowyg编辑器。从文档中，我知道我可以使用以下代码设置编辑器的图像上载内容

$('#editor')
.trumbowyg({
    btns: ['upload'],
    plugins: {
        // Add imagur parameters to upload plugin for demo purposes
        upload: {
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: {
                'Authorization': 'Client-ID xxxxxxxxxxxx'
            },
            urlPropertyName: 'data.link'
        }
    }
});

这在

imgur

上运行良好，但我想使用

cloudinary

服务器，而不是

imgur

有谁能指导我在使用

cloudinary

时如何使用

插件：{}

另外，我正在使用

dropzone.js

和

cloudinary

上传图像，这也可以正常工作。 以下是dropzone功能代码：

Dropzone.autoDiscover = true;
var myDropzone = new Dropzone(document.getElementById('image-upload'), {
  clickable: "#image-upload #btn-add",
  uploadMultiple: false,
  autoProcessQueue: true,
  acceptedFiles:'.jpg,.png,.jpeg,.gif',
  parallelUploads: 10,
  maxFilesize: 9,
  maxFiles: 10,
  url: 'https://api.cloudinary.com/v1_1/demo_project/image/upload',
  addedfile: function(file) {
    // console.log(file);
    new Noty({
      type: 'success',
      text: "Uploading...",
      timeout: false
    }).show();
    // myDropzone.processQueue();
  },
  success: function(file, response){
    new Noty({
      type: 'success',
      text: "Uploaded!",
      killer: true
    }).show();
    newImageArray.push({
      public_id: response.public_id,
      url: response.url,
      secure_url: response.secure_url
    });
    newImageArrayJSON = JSON.stringify(newImageArray);
    $imageStorage.val(newImageArrayJSON)
    $("#image-upload .image").html('<img src="' + response.secure_url + '">')
    $("#image-upload #btn-add").hide();
    $("#image-upload #btn-remove").show();
  }
});
myDropzone.on('sending', function (file, xhr, formData) {
  formData.append('api_key', 112233445566778);
  formData.append('timestamp', Date.now() / 1000 | 0);
  formData.append('upload_preset', 'mypreset');
});

Dropzone.autoDiscover=true；
var myDropzone=newdropzone（document.getElementById（'image-upload'）{
可点击：#图片上传#btn添加“，
uploadMultiple:false，
自动处理队列：true，
接受的文件：'.jpg、.png、.jpeg、.gif'，
并行上传：10，
最大文件大小：9，
最大文件数：10，
网址：'https://api.cloudinary.com/v1_1/demo_project/image/upload',
addedfile:函数（文件）{
//console.log（文件）；
新诺蒂({
键入：“成功”，
文字：“上传…”，
超时：false
}).show（）；
//myDropzone.processQueue（）；
},
成功：函数（文件、响应）{
新诺蒂({
键入：“成功”，
文字：“上传！”，
杀手：真的
}).show（）；
newImageArray.push({
public\u id:response.public\u id，
url:response.url，
安全url:response.secure\u url
});
newImageArrayJSON=JSON.stringify（newImageArray）；
$imageStorage.val（newImageArrayJSON）
$（“#image upload.image”）.html（“”）
$（“#图像上载#btn添加”）.hide（）；
$（“#图像上载#btn删除”）.show（）；
}
});
myDropzone.on（'sending'，函数（文件、xhr、formData）{
formData.append（'api_key'，11223344566778）；
formData.append（'timestamp'，Date.now（）/1000 | 0）；
append（'upload_preset'，'mypreset'）；
});

---

提前谢谢

我建议从我测试并为我工作的以下基本实现开始：

$('#editor').trumbowyg({
    btns: ['upload'],
    plugins: {
        upload: {
            serverPath: 'https://api.cloudinary.com/v1_1/demo_project/image/upload',
            fileFieldName: 'file',
            urlPropertyName: 'data.secure_url',
            data: [
                {name: 'api_key', value: '112233445566778'},
                {name: 'timestamp', value: Date.now() / 1000 | 0},
                {name: 'upload_preset', value: 'mypreset'}
            ],
            success: function (data) {
                console.log(data);
            },
            error: function (error) {
                console.log(error.responseText);
            }
        }
    }
});

---

您可以登录到您的Cloudinary帐户并修改您的上载预设，以根据不同的条件限制上载，就像您使用

dropzone.js

一样，例如，只允许上载特定格式等。

我建议从我测试并为我工作的以下基本实现开始：

$('#editor').trumbowyg({
    btns: ['upload'],
    plugins: {
        upload: {
            serverPath: 'https://api.cloudinary.com/v1_1/demo_project/image/upload',
            fileFieldName: 'file',
            urlPropertyName: 'data.secure_url',
            data: [
                {name: 'api_key', value: '112233445566778'},
                {name: 'timestamp', value: Date.now() / 1000 | 0},
                {name: 'upload_preset', value: 'mypreset'}
            ],
            success: function (data) {
                console.log(data);
            },
            error: function (error) {
                console.log(error.responseText);
            }
        }
    }
});

---

您可以登录到您的Cloudinary帐户并修改您的上载预设，以根据不同的条件限制上载，就像您使用

dropzone.js

一样，例如，只允许上载特定格式等。

这几乎完美地工作了80%，但这不会在上载后显示图像，因为docs说。它必须保存此图像，然后返回一个JSON响应，如下所示：{success:true，//如果上载失败，则必须为false url:}但我的响应是：{bytes:73201格式：“png”secure_url:“tags:[]url:”}这几乎可以完美地工作80%，但这在上载后不会显示图像，因为docs说。它必须保存此图像，然后返回如下JSON响应：{success:true，//如果上载失败，则必须为false url:}，但我的响应是：{bytes:73201 format:“png”secure_url:“tags:[]url:”}