Tinymce图片拖拽上传失效及移动端上传无选图窗口问题求助

Hey there! Let's work through your TinyMCE image upload issues step by step:

The main issue with your current drag-and-drop setup is that you're trying to grab the file from a hidden <input type="file"> element, which doesn't get populated when you drag-and-drop an image. Instead, you should use the blobInfo.blob() method provided by TinyMCE to access the dragged file directly.

Here's the corrected images_upload_handler code, with improved error handling too:

tinymce.init({
  selector: 'textarea',
  menubar: false,
  plugins: 'image emoticons',
  toolbar: 'image emoticons',
  forced_root_block: '',
  branding: false,
  statusbar: false,
  image_dimensions: false,
  image_description: false,
  paste_data_images: true,
  setup: function (editor) {
    editor.on('change', function () {
      editor.save();
    });
  },
  images_upload_handler: function (blobInfo, success, failure) {
    var formData = new FormData();
    // Use blobInfo to get the dragged/uploaded file (preserve original filename)
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    formData.append('test_id', id);

    $.ajax({
      url: 'url.php',
      type: "post",
      data: formData,
      processData: false,
      contentType: false,
      success: function (data) {
        success(data);
      },
      error: function (xhr) {
        console.log(blobInfo);
        console.log(xhr.status);
        // Notify TinyMCE the upload failed (critical for user feedback)
        failure('Upload failed with status: ' + xhr.status);
      }
    });
  },
});

Key fixes:

• Replaced $('input[type=file]')[0].files[0] with blobInfo.blob() (added blobInfo.filename() to keep the original file name)
• Added a call to failure() in the error handler so TinyMCE knows to show an upload error to the user

If the image picker won't pop up on mobile, try these targeted fixes:

• Use HTTPS: Most modern mobile browsers block file system access for HTTP sites. If testing locally, use a tool to create an HTTPS tunnel (like ngrok) to mimic production conditions.
• Optimize TinyMCE for mobile: Add the mobile plugin and adjust toolbar settings for better mobile behavior:

  plugins: 'image emoticons mobile',
  toolbar_mode: 'floating', // Or 'sliding' for a more compact mobile toolbar
  

• Check for CSS interference: Custom styles might hide the file input or make it unclickable. Verify your CSS isn't overriding TinyMCE's default button styles (especially z-index or opacity values).
• Add a custom file picker callback: For more reliable mobile file selection, define a callback that explicitly creates an image-only input:

  file_picker_callback: function(callback, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*'); // Restrict to image files
  
    input.onchange = function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.onload = function() {
        var id = 'blobid' + (new Date()).getTime();
        var blobCache = tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);
        callback(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };
  
    input.click();
  }
  

• Debug JavaScript errors: Use remote debugging (like Chrome DevTools for Android) to check if any console errors are blocking the file picker from triggering.

Hope these fixes get your image uploads working smoothly on both desktop and mobile!

内容的提问来源于stack exchange，提问作者tuo