TinyMCE：在上传之前重命名图像文件名答案

【问题标题】：TinyMCE: Rename Image File Name Before UploadTinyMCE：在上传之前重命名图像文件名
【发布时间】：2020-04-30 19:45:15
【问题描述】：

我一直在努力解决这个问题。

我已经设置了 tinyMCE，以便用户可以上传图像，我将 images_reuse_filename 设置为 true，我有一个自定义 images_upload_handler，我将 images_reuse_filename 设置为 true。

在我的自定义上传处理程序中，我console.dir blobInfo（上传处理程序具有签名(blobInfo, success, failure)，我想我是从文档中得到的）

问题是blobInfo.filename 是一个我无法看到设置文件名的函数。

我正在使用 tinyMCE 让用户能够创建电子邮件模板，并且我认为他们会希望在许多模板中使用一些图像，例如徽标、标题。

当页面加载时，我用他们现有的图像填充image_list。

问题当然是blobid1587911717487.png 对用户来说毫无意义。而且我不想用一个无关的表来浪费我的数据库空间来存储 tinyMCE 的title。

我想要做的是捕获原始文件名，对照validFilenameChars 函数检查它，然后将文件名呈现给用户以防他/他想要更改它，然后将其传递到更远的火车中images_upload_handler.

哦，当用户调整图像大小时，我需要处理。

我会包含代码，但剥离不相关代码的代码以呈现问题的核心是一件很痛苦的事情，而且，如果您非常熟悉 tinyMCE，我想您知道我在做什么'正在谈论并且不需要我的代码。

如果您认为/知道您可以弄清楚并想要代码，请让我知道。

我花了很多时间试图解决这个问题，我们将不胜感激。

我正在使用 tinyMCE 的 Version: 5.2.1

另外，tinyMCE 是一个非常强大的免费 html 编辑器，我觉得我说这话是在寻找礼物马，但是 wtf 结束了吗？他们怎么会错过用户上传的图片，然后这些图片将包含在他们的image_list 中，并且可能需要合理的名称？只有我吗？也许。 TinyMCE 在很大程度上对我来说是一个黑匣子，所以不知道他们的内部决定。所以...如果您知道另一个可以用来代替 tinyMCE 的开源 html 编辑器，请让我知道。

另外，在新文档 tinyMCE 上做得很好！爱他们。

【问题讨论】：

Michael - 我们确实为您的整个问题提供了一个名为 MoxieManager 的解决方案，但它不是免费或开源产品。您所描述的问题并不像您所注意到的那样容易解决。
迈克尔——不建议你买任何东西。图片管理是个大问题，不像上传图片那么简单。如果 MoxieManager 不能满足您的需求，当然还有其他选择。

标签： tinymce

【解决方案1】：

当使用“图像工具”编辑上传的文件时，它可以防止创建新副本。它仅在您上传新文件时创建。

进行以下设置。

tinymce.init({
            paste_data_images: false,
            images_reuse_filename: true,
            automatic_uploads: true,
            images_upload_handler: function (blobInfo, success, failure, progress) {
                                
                var  formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                
                $.ajax({
                    type:'POST',
                    url:  'ajax.upload.php',
                    data: formData,
                    dataType: 'json',
                    cache:false,
                    contentType: false,
                    processData: false,
                    success:function(r){
                        if (r.error) {
                            alert("r.error");
                        } else if (r.message) {
                            success(r.message.location);
                        }                        
                    },
                    complete: function (jqXHR,exception) {
                       $('.tox-dialog__busy-spinner').hide();
                    },
                    error: function (jqXHR,exception) {
                        
                    }
                });
                
            }  
  });

PHP 代码：

 // Yüklenecek dosya adı, yüklenen dosyaların adlarında var ise mevcut ad kullanılır.
    if( $_SESSION['TEMP_UPLOADED_IMAGES'][$handle_normal->file_src_name] === true ){
        
        // Dosya zaten mevcut ise otomatik olarak yeniden adlandırmayı devre dışı bırakır. Bu durumda mevcut dosya isimleri var ise üzerine yazılır.
        $handle_normal->file_overwrite = true;
        
             
        
        // Yüklenecek dosyanın adı mevcut adıyla kullanılır. Yeni adlandırma yapılmaz.
        $random_file_name = $handle_normal->file_src_name_body;
    } else {
        // Yüklenecek dosya rastgele adlandırılır.
        $random_file_name = $vd->randomNumbers(10));
    }

此代码将在每次文件上传时运行。（上传后）

$_SESSION['TEMP_UPLOADED_IMAGES'][$handle_normal->file_dst_name] = true;

【讨论】：

【解决方案2】：

我想出了一个 hack-around，它需要 2 个帖子到服务器，一个上传图像，然后，另一个将重命名服务器上的文件。然后我将新位置传递给success 函数。我的代码也有点老套，但我只是在概念验证之后。

function (blobInfo, success, failure) {
    var self = this;
    var xhr = new XMLHttpRequest();

    xhr.withCredentials = false;
    xhr.open('POST', self.imagesUploadUrl);

    xhr.onload = function () {

        var json = JSON.parse(xhr.responseText);

        // I have a DTO on the server that separates out the filename
            from the path and file extension
        var filename = prompt('If you plan on reusing this image in other templates, rename the file so that it\'s easily recognizable in your images list', json.filename);

        if (filename && filename !== json.filename) {
            json.filename = filename;

            axios.post(self.imageRenameUrl, json)
                .then(function (r) {
                    var renamedImage = r.data;
                    success(renamedImage.location);
                })
        }
        else {
            success(filename);
        }
    };

    var formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    xhr.send(formData);
}

【讨论】：