我之前在项目里折腾过TinyMCE的SVG交互问题，默认情况下编辑器确实不会把SVG当成可交互的媒体元素来处理，得一步步配置才能让它拥有和IMG一样的选中、拖拽、缩放能力。下面是我亲测有效的解决方案：

首先，除了你已经设置的extended_valid_elements，还必须加上custom_elements，告诉TinyMCE这些SVG相关标签是需要被编辑器管理的可交互元素，而不是纯静态HTML：

extended_valid_elements: 'svg[*],path[*],circle[*],rect[*],g[*]', // 允许所有SVG属性和子元素
custom_elements: 'svg,path,circle,rect,g', // 标记这些为编辑器可管理元素

这里把常用的SVG子元素也加进去，避免编辑器过滤掉它们。

TinyMCE对IMG这类媒体元素的交互支持，依赖特定的属性和类名。我们可以通过编辑器的事件，自动给插入的SVG加上这些标记：

setup: function(editor) {
  editor.on('NodeChange', function(e) {
    if (e.element.nodeName === 'SVG') {
      // 和IMG保持一致，设为不可编辑内容（只允许整体操作）
      e.element.setAttribute('contenteditable', 'false');
      // 添加mce-object类，让编辑器把它当成媒体对象处理
      if (!e.element.classList.contains('mce-object')) {
        e.element.classList.add('mce-object', 'svg');
      }
    }
  });
}

同时要配套设置noneditable_noneditable_class，让编辑器识别这个类对应的元素为不可编辑但可选中的对象：

noneditable_noneditable_class: 'mce-object',

默认情况下SVG没有选中边框和缩放手柄，我们可以通过content_style添加自定义CSS，让它和IMG的交互视觉效果一致：

content_style: `
  .mce-object.svg {
    outline: 1px dashed #007cba; /* 选中时的虚线边框 */
    resize: both; /* 启用缩放手柄 */
    overflow: hidden;
    position: relative;
    min-width: 50px;
    min-height: 50px;
  }
`

为了让拖拽功能完全正常，我们可以监听拖拽事件，确保编辑器能正确识别SVG的拖拽行为；还可以添加右键菜单，和IMG保持一致的操作选项：

setup: function(editor) {
  // 之前的NodeChange事件代码...

  // 处理拖拽逻辑
  editor.on('DragStart', function(e) {
    if (e.target.nodeName === 'SVG') {
      e.dataTransfer.setData('text/html', e.target.outerHTML);
      e.preventDefault(); // 阻止默认拖拽行为，确保编辑器正确处理
    }
  });

  // 添加SVG专属右键菜单
  editor.ui.registry.addContextMenu('svg', {
    update: function(element) {
      return element.nodeName === 'SVG'; // 只在SVG元素上显示
    },
    items: [
      {
        text: 'Delete SVG',
        action: function() {
          editor.selection.select(editor.selection.getNode());
          editor.execCommand('Delete');
        }
      },
      {
        text: 'Copy SVG',
        action: function() {
          editor.execCommand('Copy');
        }
      }
    ]
  });
}

把以上所有配置整合起来，就是一个完整的初始化代码：

tinymce.init({
  selector: '#mytextarea',
  extended_valid_elements: 'svg[*],path[*],circle[*],rect[*],g[*]',
  custom_elements: 'svg,path,circle,rect,g',
  noneditable_noneditable_class: 'mce-object',
  setup: function(editor) {
    // 自动标记SVG元素
    editor.on('NodeChange', function(e) {
      if (e.element.nodeName === 'SVG') {
        e.element.setAttribute('contenteditable', 'false');
        if (!e.element.classList.contains('mce-object')) {
          e.element.classList.add('mce-object', 'svg');
        }
      }
    });

    // 处理拖拽
    editor.on('DragStart', function(e) {
      if (e.target.nodeName === 'SVG') {
        e.dataTransfer.setData('text/html', e.target.outerHTML);
        e.preventDefault();
      }
    });

    // 添加右键菜单
    editor.ui.registry.addContextMenu('svg', {
      update: function(element) {
        return element.nodeName === 'SVG';
      },
      items: [
        {
          text: 'Delete SVG',
          action: function() {
            editor.selection.select(editor.selection.getNode());
            editor.execCommand('Delete');
          }
        },
        {
          text: 'Copy SVG',
          action: function() {
            editor.execCommand('Copy');
          }
        }
      ]
    });
  },
  content_style: `
    .mce-object.svg {
      outline: 1px dashed #007cba;
      resize: both;
      overflow: hidden;
      position: relative;
      min-width: 50px;
      min-height: 50px;
    }
  `
});

这样配置后，你的SVG元素应该就能像IMG一样支持选中、拖拽和缩放了。如果还有问题，检查一下SVG是否被包裹在<p>这类块级标签里，TinyMCE默认会把顶级元素包裹在<p>中，可能影响交互，可以通过设置forced_root_block: false来禁用这个行为（不过要注意可能影响其他内容的排版）。

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