从数据库加载图片到TinyMCE编辑器时渲染缓慢问题排查

问题情况 #

• 在TinyMCE编辑器里插入文本和非PNG格式图片，保存后再次加载渲染内容时，页面运行极慢，偶尔还会导致浏览器崩溃
• 上传PNG格式图片时，页面渲染速度完全正常
• 数据库对应存储字段的数据类型是LONGTEXT

核心原因 #

从给出的初始化代码和现象来看，问题根源在图片的存储与加载方式：

1. 当前代码用FileReader.readAsDataURL()把图片转成Base64格式存进数据库，非PNG格式的图片（哪怕是JPG）如果没做优化，转成Base64后的字符串会异常庞大。加载时浏览器要解析超长的Base64，占满内存和CPU，直接导致卡顿甚至崩溃。
2. 代码里虽然设置了accept: 'image/png'，但实际场景里可能没限制住非PNG图片上传，或者这个配置没生效，导致非PNG图片以超大Base64字符串存入数据库。

解决办法 #

1. 改用服务器端上传，别存Base64 #

这是最彻底的解决方式，不要把图片转成Base64存数据库，而是上传到服务器，只存图片的URL：

• 启用images_upload_url配置，指向你的后端上传接口
• 删掉自定义file_picker_callback里的Base64相关逻辑，让TinyMCE自动处理上传流程

修改后的关键代码示例：

tinymce.init({
    selector: '.TinyMce',
    plugins: [
            'a11ychecker', 'advcode', 'advlist', 'anchor', 'autolink',  'fullscreen', 'help',
            'image', 'editimage',  'lists', 'link', 'media', 'powerpaste', 'preview',
            'searchreplace', 'table', 'tinymcespellchecker', 'visualblocks', 'wordcount'
    ],
    toolbar: 'insertfile a11ycheck undo redo | bold italic | forecolor backcolor | template codesample | alignleft aligncenter alignright alignjustify | bullist numlist | link image | fontsize',
    image_title: true,
    automatic_uploads: true,
    // 开启服务器上传接口
    images_upload_url: '/your-upload-api', 
    file_picker_types: 'image',
    // 简化文件选择逻辑，交给TinyMCE处理上传
    file_picker_callback: (cb, value, meta) => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*'; // 前端先放开所有图片格式，后端再做校验

      input.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const formData = new FormData();
        formData.append('file', file);

        // 调用后端上传接口
        fetch('/your-upload-api', {
          method: 'POST',
          body: formData
        }).then(res => res.json()).then(data => {
          // 把服务器返回的图片URL传给编辑器
          cb(data.imageUrl, { title: file.name });
        });
      });

      input.click();
    },
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

2. 限制图片格式和大小 #

• 前端和后端同时限制：只允许PNG、JPG/JPEG这类常用格式，文件大小控制在2MB以内，避免超大图片流入系统
• 后端对上传的图片做压缩处理，用GD库、Pillow这类工具压缩后再存储，减小图片体积

3. 优化已存的Base64内容 #

如果数据库里已经存了大量Base64格式的图片，可以：

• 批量把这些Base64转成文件存在服务器，然后把数据库里的Base64替换成对应的图片URL
• 前端加载时，先把Base64转成Blob URL再渲染，降低解析压力

额外提示 #

• 可以暂时禁用editimage插件试试，看看是不是这个插件对非PNG图片做了额外处理，导致渲染开销过大
• 把TinyMCE更到最新版本，新版本可能修复了图片渲染的性能bug

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