如何在TinyMCE 6中集成Mustache模板，避免代码被HTML包裹

我们使用TinyMCE 6作为WYSIWYG编辑器，供用户输入后续将用于Mustache变量注入的HTML模板内容，变量替换由后端完成。但发现加载内容到编辑器或通过代码插件保存时，Mustache模板标签会被TinyMCE自动改写，破坏模板逻辑。

原代码示例 #

<p>
<strong>Scope of Services</strong>
</p>
<ul>
{{#jobs}}
<li>{{short_description}}</li>
{{/jobs}}
{{^jobs}}
<li><em style="color: red;">NO SERVICES HAVE BEEN ADDED TO THIS ENGAGEMENT</em></li>
{{/jobs}}
</ul>

改写后代码（逻辑被破坏） #

<p><strong>Scope of Services</strong></p>
<ul>
<li>{{#jobs}}</li>
<li>{{short_description}}</li>
<li>{{/jobs}} {{^jobs}}</li>
<li><em style="color: red;">NO SERVICES HAVE BEEN ADDED TO THIS ENGAGEMENT</em></li>
<li>{{/jobs}}</li>
</ul>

可见Mustache的区块标签被自动包裹进<li>标签，导致模板逻辑失效。

解决方法 #

方法1：用protect配置保护Mustache标签 #

通过TinyMCE的protect选项添加正则表达式，匹配所有Mustache标签，让编辑器不对这些内容做修改：

tinymce.init({
  selector: 'textarea',
  // 保护所有{{...}}格式的Mustache标签
  protect: [
    /\{\{.*?\}\}/g
  ],
  // 可选：关闭粘贴自动格式化，避免粘贴时标签被改写
  format_on_paste: false
});

方法2：用script标签包裹模板内容 #

将Mustache模板放在<script type="text/template">标签内，配置TinyMCE允许该类型的script标签，编辑器会将其视为不可编辑的原生内容，不会修改内部结构：

模板内容示例

<p>
<strong>Scope of Services</strong>
</p>
<ul>
<script type="text/template">
{{#jobs}}
<li>{{short_description}}</li>
{{/jobs}}
{{^jobs}}
<li><em style="color: red;">NO SERVICES HAVE BEEN ADDED TO THIS ENGAGEMENT</em></li>
{{/jobs}}
</script>
</ul>

TinyMCE配置

tinymce.init({
  selector: 'textarea',
  // 允许type为text/template的script标签
  extended_valid_elements: 'script[type=text/template]'
});

方法3：调整内容过滤规则 #

通过valid_elements或extended_valid_elements放宽内容限制，确保Mustache标签不会被当成无效内容处理：

tinymce.init({
  selector: 'textarea',
  // 允许所有HTML元素，并保留文本中的{{}}格式内容
  valid_elements: '*[*]',
  // 或者更精确地允许Mustache相关内容
  extended_valid_elements: 'span,strong,em,ul,li,p,{{*}}'
});

配置修改后的影响 #

• 方法1（protect）：

  • 被保护的Mustache标签在可视化编辑器中会被锁定，无法直接编辑，用户需切换到代码视图修改标签内容；
  • 编辑器仍可正常编辑其他HTML内容，排版功能不受太大影响；
  • 正则表达式需准确匹配所有Mustache语法，避免遗漏或误匹配。

• 方法2（script标签包裹）：

  • 模板内容在可视化视图中不可见，用户只能通过代码视图编辑模板，降低了可视化编辑的易用性；
  • 完全避免模板结构被改写，适合对模板完整性要求较高的场景；
  • 后端处理时需额外提取script标签内的模板内容，增加了一点处理成本。

• 方法3（放宽过滤规则）：

  • 编辑器会保留更多原始内容，但可能允许无效HTML或恶意代码输入，需配合后端内容校验；
  • 自动格式化功能可能失效，比如不会自动修复不闭合的标签，需要用户手动保证HTML结构正确。

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