Настройка tinymce с cloudinary в html и javascript
Я прочитал файл readme на https://github.com/cloudinary/cloudinary_tinymce, но до сих пор не могу понять, как это сделать. К тому же они делают это на Ruby on Rails, что на самом деле не помогает.
Мне действительно нужна конечная точка на стороне сервера? Он запрашивает только подписанный URL. Но мне это не нужно подписывать. Как мне сделать это только в JavaScript и HTML? Я не хочу ничего делать на своем сервере, кроме визуализации шаблонов.
edit: Я пробовал это с image_upload handler, и он загружается в мою учетную запись Cloudinary. Но он не даст мне URL-адрес изображения при успешной загрузке (я ожидаю получить что-то вроде 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);
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуйте "подделать" запрос POST для одного. Я все еще пытаюсь. Чтобы выяснить, почему документация «требует» POST-запроса. Пример PHP: https://www.tinymce.com/docs-3x//TinyMCE3x@Installation/ просто повторяет то, что отправляется на сервер POSTED. Плагин должен интерполировать содержимое опубликовал.
Вдохновленный вашим кодом, я смог решить эту проблему для себя. Недостаток заключался в том, что после анализа ответа secure_url из ответа нужно было вызвать и присвоить json в формате, требуемом TinyMCE. Ниже приведен код:
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);
}
Я попытался сделать это с помощью метода images_upload_handler, указанного в документации. Немного настроил параметры, и он загружается на мой облачный URL-адрес, но он не дает мне URL-адрес для изображения при успешной загрузке. См. Мою правку выше.