我的目标是使用tinyMCE图像插件将图像文件直接上传到html内容区域。由于安全性和跨浏览器功能,我希望这使用文件上传控件。
我像这样设置TinyMCE:
tinyMCE.init({
selector: '.html-content',
menubar: false,
statusbar: false,
toolbar: 'undo redo | image',
plugins: 'image',
file_browser_callback: this.getSystemFile
});
getSystemFile的函数定义如下:
function getSystemFile(field_name, url, type, win) {
function upload($fileField, toUpload) {
var self = this;
var formData = new FormData($fileField.find('form')[0]);
$.ajax({
url: '/storage/creator_upload',
type: 'POST',
data: formData,
processData: false,
cache: false,
contentType: false,
dataType: 'json',
success: function(json) {
if (json.errors) {
console.log(json.errors);
} else {
for (var i = 0; i < toUpload.length; i++) {
var file = toUpload[i];
var upload = {
descriptionTitle: '',
description: '',
lastModifiedDate: file.lastModifiedDate,
urls: json[i].urls,
displayName: file.name,
uploadLocation: json[i].location + json[i].extension,
location: json[i].urls.source,
type: file.type
};
if (upload.type.match('image.*')) {
$fileField.val(upload.location);
} else {
console.log('Not an Image');
}
}
}
}
});
}
var $fileField = $(win.document.getElementById(field_name));
if ($fileField.find('form .form-image-upload').length > 0) {
$fileField.find('form .form-image-upload')[0].reset();
} else {
$fileField.html('<form action="" class="form-horizontal form-image-upload" method="POST" enctype="multipart/form-data"><input type="file" name="files" style="display:none;"/></form>');
var toUpload = [];
$fileField.change(':file', function(event) {
var fileSelection = event.target.files;
for (var i = 0; i < fileSelection.length; i++) {
var file = fileSelection[i];
if (file.size > BcoreGlobal.maximumUploadSize) {
console.log('File exceeds the maximum upload size');
return false;
}
toUpload.push(file);
}
return upload($fileField, toUpload);
});
}
$fileField.find(':file').click();
}
虽然这有效,而且我能够上传文件,但我希望有更好的方法可以在tinyMCE中使用内置的filepicker类型,而不是附加新的表单。