javascript - 如何在 Trumbowyg 中添加云参数以上传插件
问题描述
我在我的项目中使用 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
server 而不是imgur
.
任何人都可以指导我plugins:{}
在使用时需要做cloudinary
什么吗?
我也正在使用dropzone.js
withcloudinary
上传图片,这也可以正常工作。这是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');
});
提前致谢!
解决方案
我建议从以下我测试并为我工作的基本实现开始:
$('#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
,例如只允许特定格式的上传等。
推荐阅读
- reactjs - 如何禁用材质 ui css 类并强制使用内联样式
- google-cloud-functions - Google Cloud Functions 对其他 GCP API 的身份验证
- java - Child RecyclerView 不会在内部滚动
- firebase - Firestore:如何添加文档和子集合文档
- java - Spring Strict Transport Security (HSTS) 配置不起作用
- c# - 使用具有 Null 字段的 Group by 查询 DataContext 的正确方法
- sql - 如何在 SQL Server 的字符串列中生成连续数字
- delphi - XML 文档可以与运行时包一起使用吗
- powershell - 正则表达式
- python-3.x - 如何从通过输入功能输入的列表中删除非唯一元素?