使用JavaScript和PHP安全高效地保存富文本编辑器内容到数据库

<!-- HTML 结构 -->
<form action="action.php" method="POST" id="dataForm">
    <textarea name="details" class="tinymce"></textarea>
    <button type="submit" id="dataBtn">添加内容</button>
    <div id="dataResult"></div>
</form>

<!-- 引入jQuery和TinyMCE库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script>
// 确保TinyMCE编辑器已初始化
tinymce.init({
    selector: 'textarea.tinymce', // 确保选择器与HTML中的class匹配
    plugins: 'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
    height: 300 // 设置编辑器高度
});

// 绑定按钮点击事件
$('#dataBtn').click(function(e){
    e.preventDefault(); // 阻止表单的默认提交行为，以便通过AJAX手动提交

    // 1. 获取TinyMCE编辑器的完整HTML内容
    var editorContent = tinymce.activeEditor.getContent();

    // 2. 构建要发送的数据数组
    // 首先，获取表单中其他字段的数据（如果有的话）
    const formData = $('#dataForm').serializeArray();

    // 遍历formData，查找并更新 'details' 字段的值
    // 如果 'details' 字段不存在，则添加它
    let foundDetails = false;
    for (let i = 0; i < formData.length; i++) {
        if (formData[i].name === 'details') {
            formData[i].value = editorContent; // 更新为编辑器获取的HTML内容
            foundDetails = true;
            break;
        }
    }
    if (!foundDetails) {
        // 如果表单中没有名为 'details' 的字段，则手动添加
        formData.push({name: 'details', value: editorContent});
    }

    // 3. 发送AJAX POST请求到服务器
    $.post(
        $('#dataForm').attr('action'), // 获取表单的action属性作为请求URL
        formData, // 发送构建好的数据数组
        function(result) {
            // 请求成功后的回调函数，显示服务器响应
            // 假设服务器返回的是JSON对象，包含success和message
            if (result.success) {
                $('#dataResult').html('<span style="color:green;">' + result.message.join('<br>') + '</span>');
            } else {
                $('#dataResult').html('<span style="color:red;">' + result.message.join('<br>') + '</span>');
            }
        },
        'json' // 期望服务器返回JSON格式的数据
    ).fail(function(jqXHR, textStatus, errorThrown) {
        // 请求失败时的处理
        $('#dataResult').html('<span style="color:red;">请求失败: ' + textStatus + ' - ' + errorThrown + '</span>');
        console.error("AJAX Error:", textStatus, errorThrown, jqXHR.responseText);
    });
});
</script>

<?php
// action.php
header('Content-Type: application/json'); // 设置响应头为JSON格式

// 假设这里已经有数据库连接，例如使用PDO
// 示例：
$host = 'localhost';
$db   = 'your_database_name';
$user = 'your_username';
$pass = 'your_password';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
    echo json_encode(['success' => false, 'message' => ['数据库连接失败: ' . $e->getMessage()]]);
    exit();
}

// 从POST请求中获取富文本内容
// 使用null合并运算符 (??) 避免未定义索引的警告
$details = $_POST['details'] ?? '';

$response = [
    'success' => false,
    'message' => []
];

// 1. 数据验证
if (empty($details)) {
    $response['message'][] = "请提供详细内容！";
} else {
    try {
        // 2. 安全存储：使用预处理语句防止SQL注入
        // 假设数据库表名为 tbl_post，字段名为 details
        $query = "INSERT INTO tbl_post(details) VALUES (:details)";
        $stmt = $pdo->prepare($query);

        // 绑定参数，PDO::PARAM_STR 表示绑定为字符串类型
        // 这确保了用户输入的内容作为数据而不是可执行的SQL代码被处理
        $stmt->bindParam(':details', $details, PDO::PARAM_STR);

        if ($stmt->execute()) {
            $response['success'] = true;
            $response['message'][] = "数据添加成功！";
        } else {
            $response['message'][] = "数据添加失败，请稍后再试！";
            // 记录详细的错误信息到服务器日志，便于调试
            // error_log("数据库插入失败: " . implode(" ", $stmt->errorInfo()));
        }
    } catch (\PDOException $e) {
        // 捕获PDO异常，提供友好的错误信息给用户，并记录详细错误到日志
        $response['message'][] = "数据库操作异常：" . $e->getMessage();
        // error_log("PDO异常: " . $e->getMessage());
    }
}

// 返回JSON响应给客户端
echo json_encode($response);
?>