如何在Tabulator中正确加载现有表格的单元格超链接文本？

将现有HTML表格导入Tabulator时，出现单元格超链接显示异常：<td>元素内的<a>标签（带href属性）未被正常解析为可点击链接，反而直接显示标签的outerHTML代码。

使用的Tabulator初始化代码：

var table = new Tabulator("#table", {});

复现示例代码 #

<html>
  <head>
    <link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
  </head>
  <body>
    <table id="table">
      <thead>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a href="https://stackoverflow.com/questions/77340782/hyperlink-text-in-cells">Displayed cell text 1</a>
          </td>
          <td>cell text 2</td>
          <td>cell text 3</td>
        </tr>
      </tbody>
    </table>
    <script>
      var table = new Tabulator("#table", {});
    </script>
  </body>
</html>

解决方法 #

方法1：为指定列启用HTML解析 #

在Tabulator配置中，为包含超链接的列设置formatter: "html"，让Tabulator解析该列单元格内的HTML内容：

var table = new Tabulator("#table", {
    columns: [
        {title: "column 1", field: "column 1", formatter: "html"},
        {title: "column 2", field: "column 2"},
        {title: "column 3", field: "column 3"},
    ]
});

方法2：全局启用HTML解析 #

如果表格中多列都包含HTML内容，可全局设置htmlOutput: true，让所有单元格自动解析HTML：

var table = new Tabulator("#table", {
    htmlOutput: true
});

原理说明 #

Tabulator默认会转义单元格内的HTML内容，以此防范XSS风险。因此需要显式开启HTML解析功能，才能让<a>标签正常渲染为可点击的超链接。

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