TinyMCE 文件拖拽上传功能详解及实现方法
TinyMCE 编辑器默认支持图片拖拽上传，但对于其他文件类型，需要额外配置和插件支持。本文将详细介绍如何实现 TinyMCE 的文件拖拽上传功能。
问题描述
许多用户在使用 TinyMCE 时，发现其仅支持图片拖拽上传，而其他文件类型（如文档、压缩包等）无法通过拖拽上传。 尝试使用 images_upload_handler 和 file_picker_callback 等 API 也未能成功。
解决方案
实现 TinyMCE 的通用文件拖拽上传功能，需要以下步骤：
-
自定义插件或事件处理器: TinyMCE 默认不支持所有文件类型的拖拽上传，需要创建自定义插件或利用
setup选项中的事件处理器来监听和处理拖拽事件。 -
服务器端处理: 无论使用自定义插件还是事件处理器，都需要服务器端配合处理上传的文件。服务器端需要能够接收、验证和保存上传的文件。
-
前端代码示例 (使用事件处理器): 下面是一个简单的示例，演示如何使用
setup选项中的drop事件来处理文件拖拽上传：
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('drop', function(e) {
e.preventDefault();
var files = e.dataTransfer.files;
if (files && files.length > 0) {
for (var i = 0; i < files.length; i++) {
uploadFile(files[i]); // 调用自定义的上传函数
}
}
});
}
});
function uploadFile(file) {
// 构建FormData对象
var formData = new FormData();
formData.append('file', file);
// 使用fetch或XMLHttpRequest上传文件到服务器
fetch('/upload_url', { // 替换为你的上传地址
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// 处理服务器返回的数据，例如插入文件链接到编辑器
editor.insertContent(`${file.name}`);
})
.catch(error => {
console.error('上传失败:', error);
});
}
注意: /upload_url 需要替换成你的服务器端文件上传处理接口的 URL。 uploadFile 函数中的代码需要根据你的服务器端接口进行调整。
通过以上方法，可以扩展 TinyMCE 的功能，使其支持各种文件类型的拖拽上传。 具体实现需要根据你的服务器端环境和需求进行调整，但基本思路保持一致。
