如何在.NET Core环境下使用CKEditor实现邮件模板功能

核心逻辑是通过占位符映射数据库字段，用户编辑模板时插入可识别的占位符，实际发送邮件时将占位符替换为数据库真实数据即可，具体实现步骤如下：

步骤1：配置CKEditor支持占位符插入 #

推荐使用CKEditor官方占位符插件，也可以自定义下拉组件快速插入预设占位符，初始化配置示例如下：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // 工具栏新增占位符插入按钮
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertPlaceholder' ],
        // 预设占位符和数据库字段一一映射
        placeholderConfig: {
            placeholders: [
                { id: '{{user_name}}', label: '用户昵称', field: 'user.name' },
                { id: '{{user_email}}', label: '用户邮箱', field: 'user.email' },
                { id: '{{order_id}}', label: '订单号', field: 'order.id' },
                { id: '{{order_amount}}', label: '订单金额', field: 'order.amount' },
                { id: '{{create_time}}', label: '创建时间', field: 'common.create_time' }
            ]
        },
        // 开启占位符只读属性，避免用户误改占位符格式
        placeholderReadOnly: true
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( error => {
        console.error( error );
    } );

步骤2：模板存储逻辑 #

用户编辑完成后，将CKEditor输出的带占位符的HTML内容存储到数据库，模板表基础结构参考：

• 模板ID：主键唯一标识
• 模板名称：用户自定义名称，例如「订单支付成功通知」
• 模板内容：CKEditor输出的完整HTML字符串（保留所有占位符）
• 绑定字段列表：JSON格式存储该模板用到的所有数据库字段，渲染前可用于校验字段是否存在

步骤3：邮件渲染逻辑 #

发送邮件时取出模板内容，把占位符替换为业务层的真实数据即可，示例代码如下（Node.js环境）：

// 从数据库取出对应模板
const template = await TemplateModel.findByPk(templateId);
const templateHtml = template.content;

// 从业务接口获取对应字段的真实数据
const renderData = {
    user: {
        name: '张三',
        email: 'zhangsan@example.com'
    },
    order: {
        id: '20240520001',
        amount: '99.00'
    },
    common: {
        create_time: '2024-05-20 14:30:00'
    }
};

// 批量替换所有占位符
let finalEmailHtml = templateHtml;
Object.keys(renderData).forEach(module => {
    Object.keys(renderData[module]).forEach(field => {
        const placeholder = `{{${module}_${field}}}`;
        finalEmailHtml = finalEmailHtml.replaceAll(placeholder, renderData[module][field]);
    });
});

// 输出的finalEmailHtml就是最终的邮件内容，直接调用邮件发送接口即可

注意事项 #

• 占位符建议用双大括号包裹，和普通文本做区分，避免误替换
• 可以在CKEditor中给占位符加浅蓝色背景+圆角边框的特殊样式，方便用户快速识别
• 存储模板前需要做安全过滤，移除<script>、<iframe>等危险标签，避免邮件被拦截或者出现XSS风险
• 可新增模板预览功能，用户编辑完成后传入模拟数据渲染最终效果，确认无误再保存

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