掌握JavaScript与PHP实现富文本编辑器HTML内容入库

// 确保TinyMCE编辑器已正确初始化
tinymce.init({
    selector: 'textarea.tinymce', // 确保选择器与HTML中的textarea匹配
    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'
});

$('#dataBtn').click(function(e){
    e.preventDefault(); // 阻止表单的默认提交行为

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

    // 2. 序列化表单数据
    const data = $('#dataForm').serializeArray();

    // 3. 将获取到的HTML内容添加到数据数组中，覆盖或添加名为'details'的字段
    // 确保这里的'details'与PHP中期望的字段名一致
    // 检查并替换已存在的'details'字段，以防textarea的原始值被序列化
    let detailsFound = false;
    for (let i = 0; i < data.length; i++) {
        if (data[i].name === 'details') {
            data[i].value = myContent;
            detailsFound = true;
            break;
        }
    }
    if (!detailsFound) {
        data.push({name: 'details', value: myContent});
    }

    // 4. 使用Ajax发送数据
    $.post(
        $('#dataForm').attr('action'), // 表单的action属性作为请求URL
        data, // 包含HTML内容的数据
        function(result) {
            $('#dataResult').html(result); // 在指定区域显示服务器响应
        }
    ).fail(function(jqXHR, textStatus, errorThrown) {
        // 错误处理
        $('#dataResult').html('请求失败: ' + textStatus + ' ' + errorThrown);
    });
});

<form action="action.php" method="POST" id="dataForm">
    <textarea name="details" class="tinymce"></textarea>
    <button type="submit" id="dataBtn">Add Post</button>
    <div id="dataResult"></div>
</form>

// action.php
$details = $_POST['details'] ?? ''; // 使用null合并运算符提供默认值，防止未设置的错误

<?php
// action.php

// 数据库连接配置 (请根据实际情况修改)
$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,
];

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

try {
    $pdo = new PDO($dsn, $user, $pass, $options);

    $details = $_POST['details'] ?? ''; // 获取富文本内容

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

    if ($flag === true) {
        // 使用预处理语句插入数据，防止SQL注入
        $stmt = $pdo->prepare("INSERT INTO tbl_post(details) VALUES (?)");
        $result = $stmt->execute([$details]); // 绑定参数

        if ($result) {
            $valid[] = "数据添加成功！";
        } else {
            $error[] = "发生错误！请稍后再试。";
        }
    } else {
        $error[] = "发生未知错误！";
    }

} catch (\PDOException $e) {
    $error[] = "数据库连接或操作失败: " . $e->getMessage();
    // 生产环境中应记录详细错误日志，而非直接暴露给用户
}

// 返回响应给客户端
if (!empty($error)) {
    echo '<div style="color: red;">' . implode('<br>', $error) . '</div>';
} else {
    echo '<div style="color: green;">' . implode('<br>', $valid) . '</div>';
}
?>