如何在TinyMCE 6中为自定义HTML元素添加自定义视觉元素

给定如下HTML代码：

<p>Lorem ipsum...</p>

<my-custom-tag></my-custom-tag>

<p>...dolor sit amet...</p>

TinyMCE默认会跳过无法识别的<my-custom-tag>标签，不进行渲染。现在需要配置TinyMCE，让它在编辑器的渲染预览中把这个自定义标签替换成图片，但不修改原始HTML代码。

方法1：自定义内容样式快速实现 #

直接在TinyMCE的初始化配置里添加content_style，用CSS样式让自定义标签显示为图片，同时确保原始标签不被过滤：

tinymce.init({
  // 你的其他基础配置（比如selector、plugins等）
  content_style: `
    my-custom-tag {
      display: block;
      width: 100px;
      height: 100px;
      background-image: url('你的图片路径');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      pointer-events: none; /* 禁止点击编辑该区域 */
    }
  `,
  // 告诉TinyMCE保留自定义标签，不要过滤
  extended_valid_elements: 'my-custom-tag',
  custom_elements: 'my-custom-tag'
});

• extended_valid_elements和custom_elements是核心配置，确保<my-custom-tag>能完整保留在原始HTML中。
• content_style仅作用于编辑器的渲染视图，不会改动底层代码。

方法2：初始化钩子实现灵活渲染 #

如果需要根据标签属性（比如<my-custom-tag img-src="xxx">）加载不同图片，用setup钩子的PreInit事件来处理：

tinymce.init({
  // 其他基础配置
  extended_valid_elements: 'my-custom-tag',
  custom_elements: 'my-custom-tag',
  setup: function(editor) {
    editor.on('PreInit', function() {
      // 给自定义标签添加渲染规则
      editor.parser.addNodeFilter('my-custom-tag', function(nodes) {
        nodes.forEach(function(node) {
          // 可以从标签属性里取图片路径，比如 node.attr('img-src')
          var imgSrc = node.attr('img-src') || '默认图片路径';
          // 创建临时渲染用的span，不会被保存到原始代码
          var renderSpan = editor.dom.create('span', {
            style: `display:block;width:100px;height:100px;background-image:url("${imgSrc}");background-size:cover;`
          });
          // 标记该span为渲染临时元素
          node.attr('data-mce-bogus', '1');
          node.appendChild(renderSpan);
        });
      });
    });
  }
});

• data-mce-bogus="1"是关键，告诉TinyMCE这个span只是渲染用的替身，不会被写入到最终保存的HTML里。
• 这种方式支持动态逻辑，比如根据标签的不同属性加载对应图片。

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