Tinymce 5.9.1模板插件换行时重复模板的问题求助

我之前碰到过完全类似的情况，这大概率是因为你的模板内容里包含的空元素（<div class="p-1"></div>和<br>）和TinyMCE的回车默认行为冲突，导致编辑器误以为需要重复应用模板结构。下面是几个亲测有效的解决方案：

1. 简化模板内容，移除多余空元素 #

你的模板里的空div和换行标签会干扰编辑器的块元素识别逻辑，建议把模板改成更简洁的结构，用CSS来控制间距而非空元素：

templates: [ 
  {
    title: 'green-box', 
    description: 'box tiny green', 
    content: '<div class="tiny-green-box"> Content </div>'
  },
],

然后在你的自定义CSS里添加间距样式：

.tiny-green-box {
  margin-bottom: 1rem; /* 替换成你需要的间距大小 */
}

2. 配置TinyMCE的回车行为，避免自动重复模板 #

通过调整forced_root_block参数，指定回车时生成的根元素类型，同时添加事件监听来手动控制模板插入：

tinymce.init({
  // 其他原有配置...
  forced_root_block: 'p', // 可以根据需求设置为div或其他块元素
  templates: [ 
    {
      title: 'green-box', 
      description: 'box tiny green', 
      content: '<div class="tiny-green-box"> Content </div>'
    },
  ],
  setup: function(editor) {
    // 监听模板选中事件，手动插入内容防止重复生成
    editor.on('template_selected', function(e) {
      e.preventDefault();
      editor.insertContent(e.content);
    });
  }
});

3. 检查模板插件的额外配置 #

如果上面的方法还没解决，可以确认下是否有其他模板相关参数干扰，比如template_replace_values是否设置了重复替换的变量，或者template_auto_replace是否被意外开启（这个参数在5.x版本里默认是关闭的，但最好确认下）。

这些调整应该能彻底解决回车时模板重复生成的问题，我之前用类似的方案帮客户解决过同款问题，你可以先从简化模板开始试起，逐步调整配置~

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