react-quill如何在自定义邮件编辑功能中插入并解析模板变量

• 此前使用${client.name}这类模板字符串写法仅展示原文本的核心原因：这类语法是JavaScript运行时的代码解析规则，react-quill产出的是静态HTML/纯文本字符串，从内容编辑、提交接口到nodemailer发信的全链路，没有针对占位符的匹配替换逻辑，自然不会自动解析模板语法。
• 目前邮件收到原始占位文本的本质，是缺少“发信前将占位符映射为业务实际值”的中间处理环节，和使用哪种占位符书写格式没有直接关系。

1. 编辑器侧实现可控的变量插入能力 #

• 首先维护全链路统一的变量白名单，前端、后端共用这套规则，不在白名单内的内容一律不允许进入占位符解析逻辑，从根源上避免注入风险：

// 前后端共享的白名单配置
const ALLOWED_PLACEHOLDERS = {
  client: {
    name: "{client.name}",
    firstName: "{client.firstName}"
  },
  booking: {
    date: "{booking.date}"
  }
}

• 自定义react-quill工具栏按钮，点击后弹出可选变量下拉列表，完全不开放用户手动输入占位符的权限：
  • 插入时直接调用Quill实例的insertText方法，把白名单内的占位符文本精准插入到当前光标位置，可给插入的占位符加自定义浅底色样式，和普通正文做视觉区分
  • 可基于Quill的自定义Blot能力，把插入的占位符封装为不可随意修改的原子块，防止用户手动篡改占位符格式导致匹配失败
  • 增加文本变更监听的兜底逻辑：自动检测用户手动输入的、不在白名单内的自定义占位符（比如用户自己手输的{admin.password}），直接做清除处理。

2. 发信链路打通占位符替换逻辑 #

• 这个环节不需要引入复杂模板引擎，更禁止使用eval、new Function等动态执行代码的能力，用最基础的字符串全局替换即可满足需求：
  • 后端在拿到前端通过react-hook-form提交的编辑器HTML内容后，基于当前发信场景的实际业务数据（比如当前接收邮件的客户信息、对应预订信息），逐一把白名单内的占位符替换为实际值，示例逻辑：

// 后端nodemailer发信前的处理示例
let rawEmailContent = 前端提交的编辑器HTML
// 当前场景的实际变量值
const placeholderValues = {
  "{client.name}": "张三",
  "{client.firstName}": "三",
  "{booking.date}": "2024-06-15"
}
// 全局替换所有占位符，避免仅替换第一处匹配的问题
Object.entries(placeholderValues).forEach(([placeholder, realValue]) => {
  // 对占位符里的正则特殊字符做转义，防止语法错误
  const escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  const globalReg = new RegExp(escapedPlaceholder, 'g')
  rawEmailContent = rawEmailContent.replace(globalReg, realValue)
})
// 将替换完成的内容传入nodemailer完成发信

3. 关于是否支持if/else逻辑、自定义JS代码的说明 #

• 出于安全考量，绝对不开放用户输入自定义JS代码、自由编写if/else逻辑的能力：这类能力一旦开放，极易引发XSS、任意代码执行的安全风险，即便做多层文本过滤也很难完全防御恶意输入。
• 如果确实有条件展示的需求（比如客户为VIP时显示专属权益），也不需要开放自由逻辑编写权限：可以预定义固定格式的条件块（比如[IF_IS_VIP] 专属权益内容 [END_IF]），通过工具栏按钮让用户选择插入，后端替换占位符时根据实际客户属性，决定保留或删除块内的内容，全程不执行任何用户输入的代码。

• 不要为了方便引入全功能模板引擎（如Handlebars、Mustache）解析用户输入的内容，这类引擎默认开放多种逻辑语法能力，和你提出的安全预期不匹配，简单的白名单+字符串替换的方案足够覆盖邮件场景的所有占位需求。
• 占位符的格式可以做特殊标识优化（比如用[#client.name#]替代简单的{client.name}），减少和用户正常输入文本的匹配冲突，避免把普通正文里的花括号内容误识别为系统占位符。
• 提交到后端的编辑器内容，必须先用XSS过滤工具（如DOMPurify）做清洗，不要把带恶意脚本的HTML内容直接传入发信逻辑。

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