在 TinyMCE 中，你如何处理上传到服务器然后在编辑器中删除的图像？

Question

我通过拖放和图像上传对话框将图像上传到使用 TinyMCE 的服务器。它们以不同的命名约定保存，但它有效。

如果用户删除了 post，我可以进行后端检查并删除关联的图像。

但是TinyMCE如何处理以下几种情况删除的图片呢？

编辑时上传了一张图片。它会立即保存在服务器上，甚至在保存 post 之前。如果用户决定删除他们正在编辑的 post 中的图像怎么办。已经上传的图片怎么删除？
如果用户返回并编辑 post 并删除图像怎么办？ TinyMCE 如何处理已经在服务器上的图像？
或者如果 post 从未保存并且用户向其中添加了图像怎么办？它们会立即保存在服务器上。它们是如何被删除的？

人们只是忍受服务器上多余的、未使用的图像吗？

谢谢，

道格

Answer 1

TinyMCE 并非旨在直接解决此类图像管理和上传边缘情况。它们可以（并且应该被管理）但是使用内置功能这样做超出了 TinyMCE 的范围。

确保您不会留下孤立文件的一种方法是在文档本身提交保存之前不要将它们上传到您的服务器。您讨论的许多极端情况都可以通过更改 automatic_uploads 设置来解决。

将图像添加到 TinyMCE 时，它会作为 base64 编码的 blob 内联添加到内容中 URL。您可以选择配置将该图像上传到您的数据库，之后图像标签的 src 会更新为图像的远程数据库位置。

但是，如果您关闭 automatic_uploads，则只有在调用 editor.uploadImages() 时才会上传图片。这可以允许用户在创建内容时向内容添加和删除图像，但只有他们的内容（和图像）的最终版本才能保存到数据库中。

这里有更多信息：

https://www.tiny.cloud/docs/configure/file-image-upload/#automatic_uploads

https://www.tiny.cloud/docs/general-configuration-guide/upload-images/

如果最终用户加载包含图像（已保存到数据库）的现有内容，但从内容中删除该图像，然后重新保存内容，解决此问题的一种方法是解析内容加载到编辑器中，并对所有包含的媒体资产进行 list/array/object，然后在保存时将其与内容中的资产进行比较。然后您可以使用该列表相应地更新数据库。 TinyMCE 没有提供一种特定的方法来做到这一点，因为有很多不同的方法可以实现这种行为。

另一种选择是使孤立的控制服务器维护成为与编辑过程完全分开的任务。一种方法是运行在解析内容并查找孤立图像文件的服务器上执行定期安排的后台维护任务。

Answer 2

处理图片上传：

tinymce.init({
  images_upload_handler: function (blobInfo, success, failure) {
    formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    //here make your post to upload the file, heres an example with axios
    axios.post("http://myurl.com/upload", formData)
      .then((response){
         //response should have the path for the image uploaded
         //if everything is fine, call success() with the path for the image
         success(response.image_path); //or whatever your variable name
      })
}

要删除图像：

添加用于读取按键事件的设置事件
确认您选择了图片
然后调用您的服务器删除图片 src

tinymce.init({
  setup(editor) {
    editor.on("keydown", function(e){
      if ((e.keyCode == 8 || e.keyCode == 46) && tinymce.activeEditor.selection) {
         var selectedNode = tinymce.activeEditor.selection.getNode();
         if (selectedNode && selectedNode.nodeName == 'IMG') {
            var imageSrc = selectedNode.src;
            //here you can call your server to delete the image
         }

       }
    });
   }
}

在 TinyMCE 中，你如何处理上传到服务器然后在编辑器中删除的图像？

In TinyMCE how do you deal with images uploaded to the server and then deleted in the editor?

tinymce