如何在TinyMCE编辑器中允许自定义非HTML标签

需求说明 #

需要移除原始内容里的所有HTML标签，仅保留文本内容及<Enter Your Name>这类自定义尖括号占位符，最终显示效果为：hello my name is

解决方案 #

通过TinyMCE的自定义内容过滤和配置即可实现，具体步骤如下：

1. 针对特定占位符的精准过滤
   在TinyMCE初始化的setup回调中监听BeforeSetContent事件，过滤掉所有HTML标签但保留指定的自定义占位符：

tinymce.init({
  selector: 'textarea',
  setup: function(editor) {
    editor.on('BeforeSetContent', function(e) {
      // 移除所有HTML标签，仅保留<Enter Your Name>
      e.content = e.content.replace(/<(?!Enter Your Name>)[^>]+>/g, '');
      // 如需添加多个占位符，可扩展正则：
      // e.content = e.content.replace(/<(?!Enter Your Name>|AgePlaceholder>)[^>]+>/g, '');
    });
  },
  // 禁用自动生成段落标签，避免多余格式
  forced_root_block: false,
  // 确保自定义占位符的尖括号不被转义为实体
  entity_encoding: 'raw'
});

2. 通用化处理（适配多类自定义占位符）
   如果有多个带空格或非标准HTML标签格式的自定义尖括号内容，可以通过正则区分合法HTML标签与自定义占位符：

tinymce.init({
  selector: 'textarea',
  setup: function(editor) {
    editor.on('BeforeSetContent', function(e) {
      const placeholders = [];
      // 先标记所有非标准HTML标签的占位符，移除合法HTML标签
      e.content = e.content.replace(/<[^>]+>/g, function(match) {
        // 简单判断：合法HTML标签以纯字母开头，不符合则视为自定义占位符
        if (/^<[a-zA-Z]/.test(match)) {
          return '';
        } else {
          placeholders.push(match);
          return `__TEMP_${placeholders.length - 1}__`;
        }
      });
      // 恢复所有自定义占位符
      placeholders.forEach((item, index) => {
        e.content = e.content.replace(`__TEMP_${index}__`, item);
      });
    });
  },
  forced_root_block: false,
  entity_encoding: 'raw'
});

效果验证 #

配置完成后，原始内容中的<div>、<p>等HTML标签会被完全移除，仅保留文本和自定义尖括号占位符，显示效果符合预期。

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