如何阻止Trumbowyg编辑器将Font Awesome<i>标签转为SVG？

问题描述 #

在Trumbowyg编辑器的源码模式中添加以下代码：

<p>hello</p><p><br></p>

<label class="click_aerrow">
     <i class="fa fa-angle-down"></i> 
</label>

编辑器会自动将<i>标签转换为SVG代码：

<p>hello</p><p><br></p>

<label class="click_aerrow">
     <svg class="svg-inline--fa fa-angle-down fa-w-10" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4-9.4 9.4-24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg><!-- <i class="fa fa-angle-down"></i> --> 
</label>

尝试过以下配置均无效：

• $.trumbowyg.svgPath = false;
• $.trumbowyg.svgAbsoluteUsePath = true;
• 调整semantic、tagsToKeep属性及组合

需要实现源码中写入<i class="fa fa-angle-down"> </i>时不被转为SVG。

解决方案 #

1. 禁用Font Awesome自动SVG转换 #

该转换本质是Font Awesome的JS自动替换行为，而非Trumbowyg本身导致。可通过两种方式禁用：

• 初始化Font Awesome时配置：

FontAwesome.config.autoReplaceSvg = false;

• 引入Font Awesome脚本时添加属性：

<script src="your-fontawesome-kit.js" data-auto-replace-svg="false"></script>

2. 配置Trumbowyg强制保留标签 #

$('#editor').trumbowyg({
  tagsToKeep: ['i'],
  allowedTags: ['i', 'p', 'label', 'br'],
  semantic: false,
  allowedAttributes: {
    'i': ['class'],
    'label': ['class']
  }
});

$.trumbowyg.plugins.preventFaSvg = function(trumbowyg) {
  const originalSave = trumbowyg.saveRange;
  trumbowyg.saveRange = function() {
    let html = trumbowyg.$ed.html();
    // 匹配Font Awesome生成的SVG注释对，还原为原始<i>标签
    html = html.replace(/<svg[^>]*><\/svg><!-- <i class="fa ([^"]+)"><\/i> -->/g, '<i class="fa $1"></i>');
    trumbowyg.$ed.html(html);
    return originalSave.call(this);
  };
};

// 初始化编辑器时启用插件
$('#editor').trumbowyg({
  plugins: ['preventFaSvg']
});

$('#editor').trumbowyg({
  cleanup: {
    allowedTags: ['i', 'p', 'label', 'br'],
    allowedAttributes: {
      'i': ['class'],
      'label': ['class']
    }
  }
});