TinyMCE调用setContent时丢失第二张图片的Base64内容问题

这个问题我之前帮团队排查过几乎一模一样的场景，核心问题大概率出在TinyMCE的内容清理规则或者setContent的调用参数上，咱们一步步来解决：

1. 先检查编辑器的内容白名单配置 #

TinyMCE默认会过滤它认为“不安全”的HTML元素或属性，第二张图片的Base64被丢失，很可能是编辑器把img标签的src属性（尤其是data URI格式的）给过滤掉了。

你需要给两个编辑器都配置extended_valid_elements，明确允许img标签保留所有必要属性：

tinymce.init({
  // 其他配置...
  extended_valid_elements: 'img[src|data-src|alt|title|width|height|style]'
});

这样可以确保不管是第一张还是第二张图片的Base64 src都不会被清理。

2. 调用setContent时一定要用raw格式 #

默认情况下，setContent()会对传入的HTML进行自动清理和格式化，这就是为什么你在调用前内容正常，执行后图片消失的原因——编辑器把第二张图的Base64当成“可疑内容”处理掉了。

修改同步逻辑，使用format: 'raw'参数跳过清理：

// 获取源编辑器的原始内容（不做任何格式化）
const sourceContent = tinymce.get('source-editor-id').getContent({ format: 'raw' });
// 把原始内容直接传入目标编辑器，同样跳过清理
tinymce.get('target-editor-id').setContent(sourceContent, { format: 'raw' });

3. 确保同步时机是在粘贴完成后 #

有时候粘贴第二张图片时，TinyMCE的粘贴插件还在异步处理图片的Base64转换，这时候你如果立刻调用getContent()，拿到的是不完整的HTML，自然同步到目标编辑器就会丢图。

可以监听源编辑器的PastePostProcess事件，等粘贴完全处理完再同步：

tinymce.get('source-editor-id').on('PastePostProcess', function() {
  // 用setTimeout让事件循环完成，确保图片处理完毕
  setTimeout(() => {
    const rawContent = tinymce.get('source-editor-id').getContent({ format: 'raw' });
    tinymce.get('target-editor-id').setContent(rawContent, { format: 'raw' });
  }, 0);
});

4. 确认源编辑器允许粘贴Base64图片 #

虽然你说单张图片粘贴正常，但还是要检查源编辑器的paste_data_images配置是否开启，这个是允许直接粘贴Base64图片的关键：

tinymce.init({
  // 其他配置...
  plugins: 'paste', // 确保加载了paste插件
  paste_data_images: true
});

完整配置示例 #

给你贴一个能正常工作的双编辑器配置参考：

// 源编辑器（可编辑，接受粘贴）
tinymce.init({
  selector: '#source-editor',
  plugins: 'paste',
  paste_data_images: true,
  extended_valid_elements: 'img[src|data-src|alt|title|width|height|style]',
  setup: function(editor) {
    editor.on('PastePostProcess', function() {
      setTimeout(() => {
        const rawContent = editor.getContent({ format: 'raw' });
        tinymce.get('target-editor').setContent(rawContent, { format: 'raw' });
      }, 0);
    });
  }
});

// 目标编辑器（可同步显示，可选只读）
tinymce.init({
  selector: '#target-editor',
  extended_valid_elements: 'img[src|data-src|alt|title|width|height|style]',
  readonly: true // 如果不需要编辑目标内容，开启这个更安全
});

按照上面的步骤调整后，应该就能解决第二张图片同步丢失的问题了。

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