如何无需外部JavaScript为TinyMCE元素包裹自定义HTML代码

嘿，要给TinyMCE插入的图片/媒体元素套上自定义div包裹？这事儿其实不难，我给你两种实用的实现方案，你可以根据自己的开发场景来选：

这个方案适合保留TinyMCE默认的图片/媒体插入流程，只在最后一步修改生成的HTML。核心思路是监听编辑器的insertContent事件，当检测到插入的是图片或媒体标签时，用自定义div包裹后再插入。

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'image media', // 确保加载了官方的图片和媒体插件
  toolbar: 'image media',
  setup: function(editor) {
    // 监听内容插入事件
    editor.on('insertContent', function(e) {
      // 判断插入的内容是否是图片或媒体元素
      const isImage = e.content.includes('<img ') || e.content.includes('</img>');
      const isMedia = e.content.includes('<iframe ') || e.content.includes('</video>');
      
      if (isImage || isMedia) {
        // 阻止默认插入行为，替换为包裹后的内容
        e.preventDefault();
        const wrappedContent = `<div class="custom-media-container">${e.content}</div>`;
        editor.insertContent(wrappedContent);
      }
    });

    // 额外处理粘贴图片的场景（比如用户拖拽粘贴本地图片）
    editor.on('paste', function(e) {
      setTimeout(() => {
        const doc = editor.getDoc();
        const lastImg = doc.querySelector('img:last-of-type');
        if (lastImg && !lastImg.parentElement.classList.contains('custom-media-container')) {
          const wrapper = doc.createElement('div');
          wrapper.className = 'custom-media-container';
          lastImg.parentNode.insertBefore(wrapper, lastImg);
          wrapper.appendChild(lastImg);
        }
      }, 100);
    });
  }
});

注意点： #

• 粘贴图片的处理加了个延迟，因为粘贴后编辑器需要一点时间生成图片标签
• 可以根据需求修改custom-media-container这个类名，添加自己的样式

如果你想彻底掌控插入流程（比如自定义弹窗表单、去掉官方插件的冗余属性），可以替换默认的图片/媒体按钮，自己实现插入逻辑。

tinymce.init({
  selector: '#your-editor-id',
  toolbar: 'custom-image custom-media', // 用自定义按钮替换官方按钮
  setup: function(editor) {
    // 自定义图片插入按钮
    editor.ui.registry.addButton('custom-image', {
      icon: 'image', // 复用官方图标
      tooltip: '插入带自定义包裹的图片',
      onAction: function() {
        // 弹出自定义对话框收集用户输入
        editor.windowManager.open({
          title: '插入图片',
          body: [
            { type: 'textbox', name: 'src', label: '图片链接', required: true },
            { type: 'textbox', name: 'alt', label: '替代文本' }
          ],
          onSubmit: function(api) {
            const data = api.getData();
            // 直接生成带包裹的HTML
            const imgHtml = `<div class="custom-media-container"><img src="${data.src}" alt="${data.alt || ''}" /></div>`;
            editor.insertContent(imgHtml);
            api.close();
          }
        });
      }
    });

    // 自定义媒体插入按钮（支持iframe/视频）
    editor.ui.registry.addButton('custom-media', {
      icon: 'media',
      tooltip: '插入带自定义包裹的媒体',
      onAction: function() {
        editor.windowManager.open({
          title: '插入媒体',
          body: [
            { type: 'textbox', name: 'src', label: '媒体链接', required: true },
            { type: 'textbox', name: 'width', label: '宽度', value: '640' },
            { type: 'textbox', name: 'height', label: '高度', value: '360' }
          ],
          onSubmit: function(api) {
            const data = api.getData();
            const mediaHtml = `<div class="custom-media-container"><iframe src="${data.src}" width="${data.width}" height="${data.height}" frameborder="0"></iframe></div>`;
            editor.insertContent(mediaHtml);
            api.close();
          }
        });
      }
    });
  }
});

额外优化：处理已有内容 #

如果编辑器里已经存在未被包裹的图片/媒体，你可以在编辑器初始化完成后批量处理：

editor.on('init', function() {
  const doc = editor.getDoc();
  const mediaElements = doc.querySelectorAll('img, iframe, video');
  mediaElements.forEach(el => {
    if (!el.parentElement.classList.contains('custom-media-container')) {
      const wrapper = doc.createElement('div');
      wrapper.className = 'custom-media-container';
      el.parentNode.insertBefore(wrapper, el);
      wrapper.appendChild(el);
    }
  });
});

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