在Web应用中安全地保存富文本编辑器HTML内容到数据库的完整指南

// 确保TinyMCE已正确初始化
tinymce.init({
    selector: 'textarea.tinymce', // 根据你的HTML选择器配置
    // ... 其他TinyMCE配置
});

$('#dataBtn').click(function(e){
    // 阻止表单的默认提交行为，以便通过Ajax手动提交
    e.preventDefault();

    // 1. 获取TinyMCE编辑器的完整HTML内容
    // tinymce.activeEditor 指向当前激活的编辑器实例
    var myContent = tinymce.activeEditor.getContent();

    // 2. 获取表单中除富文本内容外的其他字段
    // serializeArray() 会将表单数据序列化为键值对数组
    const data = $('#dataForm').serializeArray();

    // 3. 将富文本内容添加到数据数组中
    // 确保 'name' 属性与后端接收的参数名一致 (例如 'details')
    data.push({name: 'details', value: myContent});

    // 4. 使用Ajax (jQuery.post) 提交数据
    $.post(
        $('#dataForm').attr('action'), // 获取表单的action属性作为请求URL
        data, // 包含所有表单数据和富文本内容的数据数组
        function(result) {
            // 处理后端返回的结果
            $('#dataResult').html(result);
        }
    ).fail(function(jqXHR, textStatus, errorThrown) {
        // 处理请求失败的情况
        $('#dataResult').html("请求失败: " + textStatus + " - " + errorThrown);
    });
});

<?php
// 假设 $db 是一个 PDO 数据库连接对象
// 示例: $db = new PDO("mysql:host=localhost;dbname=your_database;charset=utf8mb4", "username", "password");
// 设置PDO错误模式，以便捕获异常
// $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 初始化响应数组
$response = [
    'success' => false,
    'message' => []
];

// 1. 获取富文本内容
// 使用 null 合并运算符 (??) 确保变量存在，并提供默认值
$details = $_POST['details'] ?? '';

// 2. 服务器端内容验证
if (empty($details)) {
    $response['message'][] = "请提供详细内容！";
} else {
    // 3. HTML内容净化 (防止XSS攻击)
    // 强烈推荐使用专业的HTML净化库，例如 HTML Purifier。
    // HTML Purifier 可以根据预定义的规则集清除不安全或恶意的HTML标签和属性。
    // 示例代码中不包含 HTML Purifier 的完整集成，但在生产环境中务必使用。
    // require_once '/path/to/htmlpurifier/library/HTMLPurifier.auto.php';
    // $config = HTMLPurifier_Config::createDefault();
    // $purifier = new HTMLPurifier($config);
    // $clean_details = $purifier->purify($details);
    //
    // 为演示目的，此处直接使用原始 $details，但生产环境请替换为净化后的内容 $clean_details
    $clean_details = $details; // !!! 生产环境请务必在此处进行HTML净化 !!!

    try {
        // 4. 使用预处理语句插入数据 (防止SQL注入)
        // 使用问号 (?) 作为占位符，然后通过 bindParam 或 bindValue 绑定实际值
        $query = "INSERT INTO tbl_post(details) VALUES (?)";
        $stmt = $db->prepare($query);

        // 绑定参数：将 $clean_details 绑定到第一个问号占位符
        // PDO::PARAM_STR 表示参数是字符串类型
        $stmt->bindParam(1, $clean_details, PDO::PARAM_STR);

        // 执行语句
        if ($stmt->execute()) {
            $response['success'] = true;
            $response['message'][] = "数据添加成功！";
        } else {
            // 获取并记录SQL执行错误信息
            $errorInfo = $stmt->errorInfo();
            $response['message'][] = "数据添加失败，请稍后重试！错误信息: " . $errorInfo[2];
            // 生产环境应将 $errorInfo[2] 记录到日志文件，而不是直接暴露给用户
        }
    } catch (PDOException $e) {
        // 捕获并处理数据库操作异常
        $response['message'][] = "数据库操作错误：" . $e->getMessage();
        // 生产环境应记录完整的异常堆栈信息
    }
}

// 设置响应头为JSON，并输出JSON格式的响应
header('Content-Type: application/json');
echo json_encode($response);
?>