Как добавить облачные параметры для загрузки плагина в Trumbowyg

Question

Я использую редактор 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,

Может кто-нибудь, пожалуйста, руководство, что я должен делать с plugins:{} когда используешь 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');
});

Заранее спасибо!

Answer 1

Я бы посоветовал начать со следующей базовой реализации, которую я протестировал и работал для меня:

$('#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Например, разрешить загрузку только определенных форматов и т. д.