Frappe Gantt无法渲染<b>标签致文本丢失 如何用CSS实现指定文本加粗

Frappe Gantt组件默认开启了HTML内容转义机制，避免XSS注入风险，因此你写入任务文本的<b>标签会被直接过滤，连带标签包裹的内容也会被清除，才会出现内容缺失的情况。你可以通过自定义CSS类配合文本预处理的方式实现指定内容加粗的效果，具体操作步骤如下：

• 第一步：预处理任务数据
  把原有任务文本中需要加粗的内容拆分出来做特殊标记，比如你可以把原来的Task 1: XXXX <b>YYYY</b> ZZZZZ调整为结构化数据：

  const task = {
    // 其他任务属性保留
    text_parts: [
      { content: 'Task 1: XXXX ', bold: false },
      { content: 'YYYY', bold: true },
      { content: ' ZZZZZ', bold: false }
    ]
  }
  

• 第二步：添加自定义CSS类
  在你的样式文件中加入加粗类：

  .gantt-task-bold {
    font-weight: 700;
  }
  

• 第三步：重写组件的任务文本渲染模板
  Frappe Gantt支持自定义模板，你可以重写task_text模板方法，按你预处理的标记渲染文本：

  Gantt.templates.task_text = function(task) {
    let html = ''
    task.text_parts.forEach(part => {
      if (part.bold) {
        html += `<span class="gantt-task-bold">${part.content}</span>`
      } else {
        html += part.content
      }
    })
    return html
  }
  

如果你不想调整数据结构，也可以用特殊占位符替换原有<b>标签，渲染完成后遍历任务文本DOM节点，把占位符替换为带gantt-task-bold类的span标签，也能实现同样效果。

内容的提问来源于stack exchange，提问作者dev-slashers