Hybris中如何为所有li内容添加span标签及解决Backoffice移除问题

嘿，我之前也碰到过Hybris Backoffice这个烦人的HTML标签过滤问题！你遇到的span被自动移除，大概率是Backoffice的HTML清理机制或者编辑器的过滤规则在搞鬼，给你几个靠谱的解决办法：

方法一：前端JavaScript动态注入span标签 #

如果后端模板不好修改，或者你只是需要在前端层面处理，完全可以用JS在页面加载完成后，自动给目标li元素的内容套上span标签，避开Backoffice的过滤：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有目标列表项
  const listItems = document.querySelectorAll('ul.list li.list-content');
  
  listItems.forEach(item => {
    // 先检查是否已经存在目标span，避免重复添加
    if (!item.querySelector('span.list-text')) {
      const textContent = item.textContent.trim();
      // 确保有文本内容再包裹
      if (textContent) {
        item.innerHTML = `<span class="list-text">${textContent}</span>`;
      }
    }
  });
});

把这段代码放到对应的前端脚本文件里（比如你的theme的JS文件），或者通过Backoffice的自定义脚本功能注入，就能自动完成span的添加。

方法二：修改Hybris后端Velocity模板（推荐） #

如果这个列表是从后端渲染出来的，直接在对应的Velocity模板里修改渲染逻辑，从根源生成带span的HTML，就不会被Backoffice过滤了：

找到渲染该列表的Velocity模板文件（通常在/web/webroot/WEB-INF/views或者扩展的templates目录下），修改成如下结构：

<ul class="list">
  #foreach($listItem in $yourListData)
    <li class="list-content">
      <span class="list-text">$listItem.content</span>
    </li>
  #end
</ul>

这样后端直接输出带有span标签的HTML结构，Backoffice的编辑器或清理机制一般不会移除这种合法的、模板生成的标签。

方法三：调整Backoffice的HTML过滤配置 #

如果一定要在Backoffice编辑器里直接添加带span的HTML，可以修改Backoffice的HTML sanitizer配置，允许span标签：

• 登录Backoffice，进入System > Backoffice > Backoffice Configuration
• 搜索与HTML编辑相关的配置项，比如editor.html.allowed.tags，把span添加到允许的标签列表中
• 同时，如果你需要保留span的class属性，找到editor.html.allowed.attributes，添加class到允许的属性列表
• 保存配置后重启Backoffice，再尝试添加你的ul-li代码，span标签就不会被自动移除了

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