Tinymce文件命名导致图像在保存时被覆盖
Tinymce filenaming causes images to be overwritten when saved
在 PHP 项目上使用 TinyMce 编辑器创建工作日志。用户可以截取屏幕截图(例如 greenshot,截图工具)并将其粘贴到 Tinymce 编辑器中。 Tinymce 将截图命名为 mceclip0.png (pic1), mceclip1.png (pic2) 等。用户保存工作日志和图像被上传到具有这些名称的网络服务器上的文件夹中。到目前为止一切顺利。
当用户稍后要编辑此工作日志并粘贴新图像时he/she忘记添加,此图像将命名为...mceclip0.png (pic3).如果用户随后保存它,哦哦,工作日志的第一次初始创建的第一张图像将被覆盖。所以 pic1 现在看起来和 pic3 一样。
这是前两张图片添加时的样子:
然后用户想添加第三张图片,出现这种情况:
以下是使用的代码,来自 Tinymce。我试图根据文档更改参数,但没有成功。有人说这是解决
images_reuse_filename: true
但我不是这样的。如果我使用某个东西的剪切工具并将其保存到磁盘,它将被命名为“screenshot.png”。在 Tinymce 编辑器中,它无论如何都会更改为 mceclip0.png。
我想在“mceclip.png”名称后附加日期和时间,但我不知道该怎么做。这是一个解决方案吗?
提前致谢!
tinymce.init({
selector: 'textarea',
height: 600,
plugins: 'image code paste',
paste_data_images: true,
image_file_types: 'jpg,webp,png',
toolbar: 'undo redo | link image | code',
automatic_uploads: true,
images_upload_url: 'fileUpload.php',
images_reuse_filename: true,
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'fileUpload');
xhr.onload = function () {
var json;
if (xhr.status !== 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
似乎没有办法更改文件名,因为它是一个 blob 并且设置在 TinyMce-plugin 中的 clipboard.js 如果我理解正确的话。这意味着唯一可解决的方法(据我所知)是更改此服务器端。然后我创建了 unix 时间戳和文件名的串联,以使其唯一。
现在用户可以返回并编辑工作日志,添加屏幕截图而不覆盖现有屏幕截图。
在 PHP 项目上使用 TinyMce 编辑器创建工作日志。用户可以截取屏幕截图(例如 greenshot,截图工具)并将其粘贴到 Tinymce 编辑器中。 Tinymce 将截图命名为 mceclip0.png (pic1), mceclip1.png (pic2) 等。用户保存工作日志和图像被上传到具有这些名称的网络服务器上的文件夹中。到目前为止一切顺利。
当用户稍后要编辑此工作日志并粘贴新图像时he/she忘记添加,此图像将命名为...mceclip0.png (pic3).如果用户随后保存它,哦哦,工作日志的第一次初始创建的第一张图像将被覆盖。所以 pic1 现在看起来和 pic3 一样。
这是前两张图片添加时的样子:
然后用户想添加第三张图片,出现这种情况:
以下是使用的代码,来自 Tinymce。我试图根据文档更改参数,但没有成功。有人说这是解决
images_reuse_filename: true
但我不是这样的。如果我使用某个东西的剪切工具并将其保存到磁盘,它将被命名为“screenshot.png”。在 Tinymce 编辑器中,它无论如何都会更改为 mceclip0.png。
我想在“mceclip.png”名称后附加日期和时间,但我不知道该怎么做。这是一个解决方案吗?
提前致谢!
tinymce.init({
selector: 'textarea',
height: 600,
plugins: 'image code paste',
paste_data_images: true,
image_file_types: 'jpg,webp,png',
toolbar: 'undo redo | link image | code',
automatic_uploads: true,
images_upload_url: 'fileUpload.php',
images_reuse_filename: true,
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'fileUpload');
xhr.onload = function () {
var json;
if (xhr.status !== 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
似乎没有办法更改文件名,因为它是一个 blob 并且设置在 TinyMce-plugin 中的 clipboard.js 如果我理解正确的话。这意味着唯一可解决的方法(据我所知)是更改此服务器端。然后我创建了 unix 时间戳和文件名的串联,以使其唯一。
现在用户可以返回并编辑工作日志,添加屏幕截图而不覆盖现有屏幕截图。