Tabulator.js中如何保留含小于号的单元格及列表编辑器值？

问题原因 #

Tabulator的列表编辑器默认会将选项内容当作HTML解析，小于号<会被识别为HTML标签的起始标记，导致其后的内容被当作未闭合的标签而截断，只显示<之前的部分。

解决方案 #

1. 转义HTML特殊字符

将选项中的<替换为HTML实体<，让编辑器将其视为普通文本而非HTML标签。

• 手动转义数组：

const exampleOptions = ["a<b", "b<c", "c<d"];

然后配置列定义：

{
  title: "示例列",
  field: "example",
  editor: "select",
  editorParams: {
    values: exampleOptions
  }
}

• 批量转义动态生成的选项：
  如果选项是动态获取的，可以写一个简单的转义函数批量处理：

function escapeHtml(str) {
  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// 原选项数组
const rawOptions = ["a<b", "b<c", "c<d"];
// 转义后得到可用的选项数组
const exampleOptions = rawOptions.map(escapeHtml);

2. 强制单元格以纯文本格式渲染

除了转义选项内容，还可以给列添加formatter: "plaintext"配置，确保单元格显示时将内容当作纯文本处理，避免HTML解析：

{
  title: "示例列",
  field: "example",
  formatter: "plaintext",
  editor: "select",
  editorParams: {
    values: exampleOptions // 这里使用转义后的选项数组
  }
}

3. 调用setValue()时的处理

如果通过setValue()方法设置值，同样需要传入转义后的字符串，或者在设置前先转义：

// 转义后再设置
const value = "a<b";
table.getRow(id).getCell("example").setValue(escapeHtml(value));

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