如何通过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>

tinymce.init({
    selector: 'textarea.tinymce', // 确保选择器正确匹配您的textarea
    plugins: 'advlist autolink lists link image charmap print preview anchor',
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
    // 更多配置项...
});

// 确保在DOM加载完成后执行
$(document).ready(function() {
    $('#dataBtn').click(function(e) {
        e.preventDefault(); // 阻止表单默认提交

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

        // 获取表单的其他数据
        const data = $('#dataForm').serializeArray();

        // 查找并更新或添加 'details' 字段的值
        // 如果 'details' 字段已存在于 serializeArray() 结果中，则更新其值
        // 否则，添加新的 'details' 字段
        let foundDetails = false;
        for (let i = 0; i < data.length; i++) {
            if (data[i].name === 'details') {
                data[i].value = myContent;
                foundDetails = true;
                break;
            }
        }
        if (!foundDetails) {
            data.push({name: 'details', value: myContent});
        }

        // 通过AJAX发送数据
        $.post(
            $('#dataForm').attr('action'), // 表单的action属性作为请求URL
            data, // 包含完整HTML内容的表单数据
            function(result) {
                // 处理服务器响应
                $('#dataResult').html(result);
            }
        ).fail(function(jqXHR, textStatus, errorThrown) {
            // 错误处理
            $('#dataResult').html('<span style="color:red;">提交失败: ' + textStatus + ' - ' + errorThrown + '</span>');
        });
    });
});

<?php
// action.php
// 假设 $db 是您的数据库连接对象或类实例，并且已经初始化
// 例如：$db = new DatabaseClass(); // 这是一个示例，实际请使用您的数据库连接方式

$details = '';
if (isset($_POST['details'])) {
    $details = $_POST['details'];
}

$flag  = false;
$error = [];
$valid = [];

if (!empty($details)) {
    $flag = true;
} else {
    $error[] = "请提供详细内容！";
    $flag    = false;
}

if ($flag == true) {
    // ！！！ 关键步骤：对HTML内容进行SQL转义，防止SQL注入 ！！！
    // 强烈推荐使用预处理语句（Prepared Statements）
    // 以下示例使用 mysqli_real_escape_string 进行转义，但预处理语句更安全、更推荐。
    // 假设 $db->link 是您的 mysqli 连接对象
    $escaped_details = '';
    if (isset($db) && method_exists($db, 'link') && $db->link instanceof mysqli) {
        $escaped_details = mysqli_real_escape_string($db->link, $details);
    } else {
        // 如果您的数据库抽象层没有直接提供 mysqli 连接对象，
        // 或者您使用的是PDO，请使用相应的预处理语句方法。
        // 这里的 addslashes 仅作示例，不推荐在生产环境中使用，因为它不安全。
        $escaped_details = addslashes($details); // 仅作示例，不推荐
        error_log("Warning: mysqli_real_escape_string not used. Consider using prepared statements or proper escaping.");
    }


    // 构建SQL查询
    // 注意：这里的 $db->insert($query) 假设您的数据库类内部会执行查询
    // 如果您的数据库类支持预处理语句，请务必使用它。
    $query  = "INSERT INTO tbl_post(details) VALUES('$escaped_details')";
    $result = $db->insert($query); // $db 是您的数据库类实例

    if ($result) {
        $valid[] = "数据添加成功！";
        echo json_encode(['status' => 'success', 'message' => $valid]);
    } else {
        $error[] = "操作失败，请稍后重试！";
        echo json_encode(['status' => 'error', 'message' => $error]);
    }

} else {
    $error[] = "发生错误！";
    echo json_encode(['status' => 'error', 'message' => $error]);
}
?>