File upload TinyMce如何使用拖放上传多个图像
我有个问题,似乎找不到解决办法。我正在尝试上传多个图像,并将其放在编辑器中。但我没有找到一个选项来负责多个文件上传。有人能告诉我是否有这种可能性吗?如何解决这个问题 这是我的电话号码。组件TinyMCE 5.7.1File upload TinyMce如何使用拖放上传多个图像,file-upload,drag-and-drop,tinymce-5,File Upload,Drag And Drop,Tinymce 5,我有个问题,似乎找不到解决办法。我正在尝试上传多个图像,并将其放在编辑器中。但我没有找到一个选项来负责多个文件上传。有人能告诉我是否有这种可能性吗?如何解决这个问题 这是我的电话号码。组件TinyMCE 5.7.1 tinymce.init({ selector: 'textarea.fullEditor', plugins: ['link', 'image', 'code'], toolbar: 'undo redo | image code | alignleft a
tinymce.init({
selector: 'textarea.fullEditor',
plugins: ['link', 'image', 'code'],
toolbar: 'undo redo | image code | alignleft aligncenter alignright alignjustify',
automatic_uploads: true,
file_picker_types: 'image',
relative_urls: false,
remove_script_host : true,
document_base_url : "/",
convert_urls : true,
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/admin/location/attachment/' + inputId.value);
xhr.onload = function () {
var json;
json = JSON.parse(xhr.responseText);
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status + ' ' + json.message);
return;
}
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('form[file]', blobInfo.blob(), blobInfo.name());
formData.append('form[_token]', inputToken.value);
xhr.send(formData);
},
setup: function (editor) {
editor.on('change', function () {
this.save();
});
editor.on('PostRender', function() {
var container = editor.getContainer();
var uiContainer = document.querySelector('body > .tox.tox-tinymce-aux');
container.parentNode.appendChild(uiContainer);
});
editor.on('NodeChange', function (e) {
if (e.element.tagName === "IMG") {
e.element.setAttribute("data-src", e.element.currentSrc);
e.element.setAttribute("class", 'lazy-image');
}
});
editor.on('submit', function(e) {
this.save();
let content = new DOMParser().parseFromString(this.getContent(), 'text/html').body.childNodes[0];
let imageElements = content.querySelectorAll('img');
imageElements.forEach(c=> c.removeAttribute('src'));
this.setContent(content.innerHTML);
});
editor.on('init', function(e) {
let content = new DOMParser().parseFromString(this.getContent(), 'text/html').body.childNodes[0];
let imageElements = content.querySelectorAll('img');
imageElements.forEach(c=> c.setAttribute('src',c.getAttribute('data-src')));
this.setContent(content.innerHTML);
});
},
file_picker_callback: function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(file.name, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
cb(blobInfo.blobUri(), {title: file.name});
};
reader.readAsDataURL(file);
};
input.click();
},
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});