如何在WYSIWYG编辑器中保持HTML属性不被修改？

你遇到的核心问题是Summernote默认的HTML清理机制识别不了模板引擎（比如Twig这类）的语法标签，把{%if ... %}这类代码当成无效的HTML属性内容处理，才会把你的原始代码改得面目全非。下面给你几个实用的解决方案：

方法1：用protect配置保护模板语法块 #

这是最直接省心的方法，通过protect选项添加正则表达式，告诉编辑器不要修改匹配到的模板代码块。修改你的初始化代码：

$('#summernote').summernote({
  height: 300,
  protect: [
    /{%[\s\S]*?%}/g // 匹配所有{% 开头、%}结尾的模板代码块
  ]
});

配置完成后，编辑器会自动跳过对这些模板标签的处理，完整保留你写的条件判断代码。

方法2：禁用HTML清理（谨慎使用） #

如果你完全不需要编辑器帮你清理HTML代码，可以直接关闭这个功能，但要注意——这样会让编辑器失去XSS防护能力，只适合在完全可控的内部环境下使用：

$('#summernote').summernote({
  height: 300,
  cleanHtml: false
});

方法3：自定义清理逻辑（兼顾安全与模板完整性） #

如果既想保留编辑器的HTML清理功能，又不想破坏模板语法，可以用customCleaner自定义清理流程：先把模板标签替换成占位符，等编辑器完成清理后再替换回去。代码如下：

$('#summernote').summernote({
  height: 300,
  customCleaner: function (html) {
    // 第一步：把所有模板块临时存储，用占位符替换原内容
    const templateBlocks = [];
    html = html.replace(/{%[\s\S]*?%}/g, (match) => {
      const id = `TEMP_TEMPLATE_${templateBlocks.length}`;
      templateBlocks.push({ id, content: match });
      return id;
    });

    // 第二步：让编辑器执行默认的HTML清理操作
    html = $.summernote.core.cleanHtml(html);

    // 第三步：把占位符换回原始模板代码
    templateBlocks.forEach(block => {
      html = html.replace(block.id, block.content);
    });

    return html;
  }
});

另外提个小细节：你的原始代码里loop.first=='first'没有空格，虽然大多数模板引擎能识别，但建议改成loop.first == 'first'（添加空格），这样编辑器的语法识别会更友好，不过上面的保护配置已经能处理两种情况啦。

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