TinyMCE编辑器邮件图片显示异常及拖拽功能咨询

Let's break down your two issues and walk through actionable solutions for each:

1. Images Not Displaying in Outlook/Gmail (Only Working in Internal Work Email) #

Root Cause #

Right now, you're using Data URIs (data:image/png;base64,...) to embed images in your email content. Most mainstream email clients (Gmail, Outlook, Yahoo, etc.) block or don't support Data URIs for security and performance reasons—this is why your images only show up in your internal work email (which likely has more relaxed security filters).

Fixes #

You have two reliable options to get images showing across all clients:

Option A: Host Images on Your Server & Use Absolute URLs

Store uploaded images on your public web server, then reference them with full, publicly accessible URLs in your email.

1. Modify TinyMCE's File Upload Logic
   Update your file_picker_callback to upload images to a server directory instead of using Data URIs:

   file_picker_callback: function(callback, value, meta) {
       if (meta.filetype == 'image') {
           $('#upload').trigger('click');
           // Use .off() to avoid duplicate event handlers
           $('#upload').off('change').on('change', function() {
               var file = this.files[0];
               var formData = new FormData();
               formData.append('image', file);
   
               $.ajax({
                   url: 'upload.php', // Create this file next
                   type: 'POST',
                   data: formData,
                   processData: false,
                   contentType: false,
                   success: function(response) {
                       // Replace with your actual domain
                       var absoluteUrl = 'https://yourdomain.com/uploads/' + response;
                       callback(absoluteUrl, { alt: file.name });
                   },
                   error: function() {
                       alert('Failed to upload image. Please try again.');
                   }
               });
           });
       }
   },
   

2. Create an upload.php File
   This handles storing the uploaded image on your server:

   <?php
   $uploadDir = __DIR__ . '/uploads/';
   if (!is_dir($uploadDir)) {
       mkdir($uploadDir, 0755, true);
   }
   
   if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
       $fileName = uniqid() . '_' . $_FILES['image']['name'];
       $filePath = $uploadDir . $fileName;
   
       if (move_uploaded_file($_FILES['image']['tmp_name'], $filePath)) {
           echo $fileName;
       } else {
           echo 'error';
       }
   } else {
       echo 'error';
   }
   ?>
   

3. Update Your PHPMailer Code
   Ensure your unsubscribe link uses a public URL (not localhost) and that image URLs are fully qualified:

   $mail->Body = $body . "<center><a href='https://yourdomain.com/unsubscribe.php'>Unsubscribe</a></center>";
   

Option B: Embed Images Directly in the Email (CID Attachments)

For better deliverability (avoids external image blocking), embed images as attachments using PHPMailer's addEmbeddedImage method:

// Parse the email body to extract image URLs
$dom = new DOMDocument();
@$dom->loadHTML($body); // @ suppresses minor HTML parsing warnings
$images = $dom->getElementsByTagName('img');

foreach ($images as $img) {
    $src = $img->getAttribute('src');
    // Get the local file path from the URL
    $localPath = $_SERVER['DOCUMENT_ROOT'] . str_replace('https://yourdomain.com', '', $src);
    
    if (file_exists($localPath)) {
        $cid = uniqid('img_'); // Unique ID for the image
        $mail->addEmbeddedImage($localPath, $cid);
        // Replace the URL with the CID reference
        $img->setAttribute('src', "cid:$cid");
    }
}

// Update the body with embedded image references
$updatedBody = $dom->saveHTML();
$mail->Body = $updatedBody . "<center><a href='https://yourdomain.com/unsubscribe.php'>Unsubscribe</a></center>";

2. Drag-and-Drop Image Positioning (Like Word) #

TinyMCE supports drag-and-drop image positioning with a few configuration tweaks. Here's how to set it up:

Configuration Changes #

Update your TinyMCE init settings to enable drag-and-drop and style images for easy positioning:

tinymce.init({
    selector: "textarea",
    convert_urls : false,
    theme: "modern",
    paste_data_images: true,
    drag_drop_upload: true, // Enable drag-and-drop uploads from desktop
    content_style: "img { max-width: 100%; height: auto; cursor: move; float: left; margin: 0 10px 10px 0; }", // Make images draggable and floatable
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
    // ... rest of your existing config
});

How It Works #

• drag_drop_upload: true: Lets users drag images directly from their desktop into the editor (no need to use the upload button).
• content_style: Adds a move cursor to images so users know they can drag them, and sets float: left to allow text wrapping around images. Users can drag images to reposition them, or use the alignment buttons in the toolbar to switch between left/center/right alignment.

For even more precise control, you can:

• Enable the table plugin and let users insert tables to place images in fixed positions.
• Add custom styles to the styleselect dropdown for image positioning (e.g., "Image - Right Float", "Image - Center Block").

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