TinyMCE富文本编辑器图片上传后前端不显示问题求助

嘿，我碰到过好几个类似的案例，咱们一步步来搞定这个问题：

你看到的<img src="data:image/jpeg;base64,..."是关键——这说明你的HTML标签被转义成了实体字符，浏览器只会把它当成纯文本解析，而不是渲染成图片；另外Base64格式本身也容易因为长度过长，导致数据库存储截断或者前端加载异常，连带后面的文本也无法正常显示。

1. 先解决前端渲染的转义问题 #

先排查PHP输出文章内容的代码：

• 如果你的代码里用了echo htmlspecialchars($article_content);，这会把所有HTML标签（包括<img>）都转义成实体，直接去掉这个转义函数，改成直接输出原始内容：

  echo $article_content;
  

• 要是担心XSS风险（比如允许用户投稿），可以用strip_tags()只保留安全的HTML标签：

  // 按需添加你需要允许的标签，比如图片、段落、标题等
  echo strip_tags($article_content, '<img><p><h1><h2><a>');
  

2. 推荐：把Base64上传改成文件上传（更优方案） #

Base64存储图片会让数据库体积暴增，加载速度变慢，不如配置TinyMCE直接把图片上传到服务器目录，存储URL而非编码内容：

第一步：修改TinyMCE初始化配置 #

在你的编辑器初始化JS代码里添加上传相关设置：

tinymce.init({
  selector: '#your-editor-id', // 替换成你的编辑器DOM ID
  plugins: 'image',
  toolbar: 'image',
  images_upload_url: '/blog/upload.php', // 指向你的PHP上传处理脚本
  images_upload_base_path: '/blog/uploads/', // 图片存储的基础路径
  // 自定义上传逻辑（可选，不用默认的images_upload_url时用）
  images_upload_handler: function (blobInfo, success, failure) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/blog/upload.php');
    xhr.onload = function() {
      if (xhr.status !== 200) {
        failure('上传失败：HTTP状态码 ' + xhr.status);
        return;
      }
      const res = JSON.parse(xhr.responseText);
      if (!res || !res.location) {
        failure('无效的上传响应');
        return;
      }
      success(res.location); // 返回图片的访问URL
    };
    const formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    xhr.send(formData);
  }
});

第二步：编写PHP上传处理脚本（upload.php） #

<?php
// 配置上传目录和允许的图片类型
$uploadDir = __DIR__ . '/uploads/';
$allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
$accessBaseUrl = '/blog/uploads/';

// 确保上传目录存在且有写入权限
if (!is_dir($uploadDir)) {
  mkdir($uploadDir, 0755, true);
}

if (!empty($_FILES['file'])) {
  $file = $_FILES['file'];
  
  // 验证文件类型
  if (!in_array($file['type'], $allowedMimeTypes)) {
    echo json_encode(['error' => '仅支持JPG/PNG/GIF格式图片']);
    exit;
  }
  
  // 生成唯一文件名避免冲突
  $fileExt = pathinfo($file['name'], PATHINFO_EXTENSION);
  $fileName = uniqid('blog_img_') . '.' . $fileExt;
  $targetPath = $uploadDir . $fileName;
  
  if (move_uploaded_file($file['tmp_name'], $targetPath)) {
    // 返回图片的访问URL
    echo json_encode(['location' => $accessBaseUrl . $fileName]);
  } else {
    echo json_encode(['error' => '文件保存失败，请检查目录权限']);
  }
} else {
  echo json_encode(['error' => '未选择上传文件']);
}
?>

3. 修复已存储的Base64图片 #

如果数据库里已经有大量Base64格式的图片，可以写个批量转换脚本：

function convertBase64ToImage($content) {
  // 匹配所有Base64图片标签
  $pattern = '/<img src="data:image\/(jpeg|png|gif);base64,([^"]+)"/i';
  return preg_replace_callback($pattern, function($matches) {
    $imgType = $matches[1];
    $base64Data = $matches[2];
    $imgContent = base64_decode($base64Data);
    
    // 保存图片到服务器
    $fileName = uniqid('converted_') . '.' . $imgType;
    $savePath = __DIR__ . '/uploads/' . $fileName;
    file_put_contents($savePath, $imgContent);
    
    // 替换成URL格式
    return '<img src="/blog/uploads/' . $fileName . '"';
  }, $content);
}

// 使用示例：从数据库取出内容，转换后更新回去
// $oldContent = $db->query("SELECT content FROM articles WHERE id = ?")->fetchColumn();
// $newContent = convertBase64ToImage($oldContent);
// $db->query("UPDATE articles SET content = ? WHERE id = ?", [$newContent, $articleId]);

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