如何让TinyMCE 4.7.9插入图片自动添加img-responsive类或自适应样式？

嘿，我之前在TinyMCE 4.x里刚好解决过一模一样的问题，给你几个靠谱的方案试试：

方案1：全局样式强制（最快上手） #

如果不想修改插入的HTML结构，直接给编辑器内所有图片统一应用样式，在TinyMCE的初始化配置里加content_style：

tinymce.init({
  // 你的其他配置（比如selector、plugins这些）
  content_style: 'img { width: 100%; height: auto; }'
});

这个配置会给编辑器里的所有图片注入全局样式，不仅在编辑时能看到效果，前端渲染编辑器内容时也会生效，适合快速解决响应式图片需求。

方案2：插入图片时自动添加class/style（修改HTML结构） #

如果必须给图片标签加上class="img-responsive"或者内联样式，重写插入图片的命令是最直接的方式。在初始化的setup函数里拦截mceInsertImage命令：

tinymce.init({
  // 你的其他配置
  setup: function(editor) {
    editor.addCommand('mceInsertImage', function(ui, params) {
      // 提取弹窗里填写的图片属性（地址、alt文本）
      const imgSrc = params.src;
      const imgAlt = params.alt || '';
      
      // 方式A：添加class="img-responsive"
      const imgHtml = `<img src="${imgSrc}" alt="${imgAlt}" class="img-responsive" />`;
      
      // 方式B：直接添加内联样式（二选一即可）
      // const imgHtml = `<img src="${imgSrc}" alt="${imgAlt}" style="width:100%; height:auto;" />`;
      
      // 将构建好的图片标签插入编辑器
      editor.insertContent(imgHtml);
    });
  }
});

这个方法会完全接管弹窗插入图片的逻辑，确保每一张通过弹窗插入的图片都带上你需要的class或样式。

方案3：全局处理所有插入的图片（包括粘贴） #

如果还要覆盖粘贴图片等其他插入场景，可以监听PostProcess事件，统一处理所有图片标签：

tinymce.init({
  // 你的其他配置
  setup: function(editor) {
    editor.on('PostProcess', function(e) {
      if (e.content) {
        // 替换所有img标签，添加class（如需style替换成对应的正则即可）
        e.content = e.content.replace(/<img([^>]*)>/g, '<img$1 class="img-responsive" />');
      }
    });
  }
});

这个方案不管图片是通过弹窗插入、粘贴还是其他方式添加的，都会自动加上你需要的属性，兼容性拉满。

小提示 #

• 测试时记得清除浏览器缓存，避免旧的配置残留生效
• 如果你的自定义配置里已经有setup函数，直接把上述代码合并进去就行，不要重复声明setup

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