如何在Simiditor编辑的邮件模板中添加自定义参数并从数据库取值？

针对在Simiditor中创建带自定义参数的邮件模板需求，可通过前端扩展编辑器功能+后端参数解析替换的组合方案实现，具体步骤如下：

一、前端Simiditor扩展：添加参数插入工具 #

Simiditor支持自定义工具栏按钮，我们可以新增一个「插入参数」按钮，让用户快速插入统一格式的参数标记（比如{{参数名}}），避免手动输入出错：

// 初始化Simiditor时配置自定义按钮
const editor = new Simiditor({
  textarea: $('#email-template-editor'),
  toolbar: ['bold', 'italic', 'underline', '|', 'insert-param'], // 将自定义按钮加入工具栏
  toolbarFloat: true,
  // 自定义按钮的具体配置
  button: {
    'insert-param': {
      icon: 'https://cdn.jsdelivr.net/npm/simiditor@2.3.27/dist/images/insert.png', // 替换为合适的参数图标
      name: 'insert-param',
      label: '插入模板参数',
      command: function() {
        // 弹出选择框让用户输入或选择参数名
        const paramName = prompt('请输入参数名称（如 user_name、order_no）：');
        if (paramName?.trim()) {
          // 插入标准格式的参数标记
          this.editor.insert(`{{${paramName.trim()}}}`);
        }
      }
    }
  }
});

如果有常用参数（比如用户姓名、订单号、发送时间），可以把prompt换成下拉选择框，进一步提升用户体验。

二、后端参数解析与替换逻辑 #

当用户保存模板后，后端需要提取模板中的参数标记，并从数据库填充实际值：

1. 提取参数：用正则表达式匹配所有{{参数名}}格式的标记
2. 获取值：根据参数名从数据库或业务逻辑中获取对应值
3. 替换参数：将模板中的标记替换为实际值

以Node.js为例，核心代码如下：

// 从数据库读取的邮件模板HTML内容
const templateContent = '<p>尊敬的{{user_name}}：您的订单{{order_no}}已完成发货，预计{{delivery_time}}送达。</p>';

// 1. 提取所有参数名
const paramRegex = /\{\{(\w+)\}\}/g;
const matchedParams = [...templateContent.matchAll(paramRegex)].map(item => item[1]);

// 2. 模拟从数据库获取参数对应值（实际项目中需从业务逻辑/数据库查询）
const paramValues = {
  user_name: '张三',
  order_no: 'OD20240520001',
  delivery_time: '2024-05-22'
};

// 3. 替换所有参数标记
const finalEmailContent = templateContent.replace(paramRegex, (_, paramName) => {
  // 若参数无对应值，可返回默认文本或保留原标记
  return paramValues[paramName] || `{{${paramName}}}`;
});

三、注意事项 #

• XSS防护：如果参数值可能包含用户输入的内容，替换前需进行HTML转义，避免注入风险
• 格式兼容：确保Simiditor不会将{{}}标记转义为HTML实体（Simiditor默认不会转义纯文本中的特殊字符，若出现问题可调整编辑器的cleanPaste等配置）
• 参数校验：后端保存模板时可校验参数格式，避免无效标记；发送邮件前检查是否有未填充的参数，及时提示

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