TinyMCE：上传前重命名图像文件名

Question

我一直在为此苦苦挣扎。

我设置了 tinyMCE 以便用户可以上传图片，我将 images_reuse_filename 设置为 true，我有一个自定义 images_upload_handler，并且我将 images_reuse_filename 设置为是的。

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

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

我正在使用 tinyMCE 让用户能够创建电子邮件模板，我想他们会想要在许多模板中使用一些图像，例如徽标，headers。

当页面加载时，我用现有图片填充 image_list。

问题当然是blobid1587911717487.png对用户没有意义。而且我不想浪费我的数据库 space 和一个无关的 table 来存储 tinyMCE 的 title。

我想做的是捕获原始文件名，根据 validFilenameChars 函数检查它，然后将文件名呈现给用户以防 s/he 想要更改它，然后将其传递在 images_upload_handler.

的火车下方

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

我会包括代码，但是剥离 non-relevant 代码的代码来呈现问题的核心是一件很痛苦的事，而且，如果您非常熟悉 tinyMCE，我会认为你知道我在说什么，不需要我的代码。

如果你 think/know 能弄明白并想要代码，让我知道。

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

我正在使用 Version: 5.2.1 的 tinyMCE

另外，tinyMCE是一个非常强大的free html编辑器，我觉得我在找一个gift-horse 嘴里这么说，但是 wtf 结束了？他们怎么会错过用户上传的图片，这些图片随后会包含在他们的 image_list 中，并且可能需要合理的名称？只有我吗？或许。 TinyMCE 对我来说基本上是一个黑盒子，所以不知道他们的内部决定。所以...如果您知道另一个 html 编辑器可以用来代替 tinyMCE，即 open-source，让我知道。

此外，新文档 tinyMCE 也做得很好！爱他们。

Answer 1

我想出了一个 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);
}

Answer 2

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

进行如下设置。

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;

TinyMCE：上传前重命名图像文件名

TinyMCE: Rename Image File Name Before Upload

tinymce

PHP 代码：