如何使用WYSIWYG编辑器添加图文并一同存入MySQL数据库？

我来帮你搞定这个问题——其实用WYSIWYG编辑器实现图文混存MySQL的核心逻辑很清晰：让编辑器帮你把图片上传到服务器，然后把包含图片URL的HTML内容一起存进数据库，而不是分开存。我给你一步步拆解，用最常用的CKEditor 5举例子：

我推荐用CKEditor 5或者TinyMCE，都是成熟的开源编辑器，集成简单。以CKEditor 5为例，直接在你的页面里引入资源并初始化：

<!-- 引入CKEditor 5的CDN资源 -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script>

<!-- 编辑器容器 -->
<div id="editor"></div>

<!-- 提交表单 -->
<form method="POST" action="save_content.php">
    <textarea name="content" id="hidden-content" style="display:none;"></textarea>
    <button type="submit">保存内容</button>
</form>

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
            // 提交表单时，把编辑器内容同步到隐藏的textarea
            document.querySelector('form').addEventListener('submit', () => {
                document.querySelector('#hidden-content').value = editor.getData();
            });
        } )
        .catch( error => {
            console.error( error );
        } );
</script>

编辑器里插入图片时，不能直接把base64编码的图片存到数据库（太占空间、性能差），所以得做一个上传接口：让编辑器把图片传到服务器指定目录，然后返回图片的访问URL，编辑器会自动把这个URL插入到内容里。

写一个upload_image.php文件：

<?php
// 设置允许上传的图片类型
$allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
$uploadDir = 'uploads/';

// 确保uploads目录存在且有写入权限
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

// 处理上传的文件
if (isset($_FILES['upload'])) {
    $file = $_FILES['upload'];
    $fileType = $file['type'];
    
    if (!in_array($fileType, $allowedTypes)) {
        echo json_encode(['error' => '只允许上传JPG、PNG、GIF格式的图片']);
        exit;
    }
    
    // 生成唯一文件名，避免覆盖
    $fileName = uniqid() . '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
    $filePath = $uploadDir . $fileName;
    
    if (move_uploaded_file($file['tmp_name'], $filePath)) {
        // 返回图片的访问URL（假设网站根目录是当前目录）
        $imageUrl = '/' . $filePath;
        echo json_encode(['url' => $imageUrl]);
    } else {
        echo json_encode(['error' => '图片上传失败']);
    }
}
?>

回到前端的CKEditor初始化代码，加上图片上传配置，指向刚才的upload_image.php：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // 配置图片上传
        image: {
            upload: {
                url: 'upload_image.php'
            }
        }
    } )
    .then( editor => {
        // 提交表单时同步内容到textarea
        document.querySelector('form').addEventListener('submit', () => {
            document.querySelector('#hidden-content').value = editor.getData();
        });
    } )
    .catch( error => {
        console.error( error );
    } );

现在用户在编辑器里点击插入图片，选择本地图片后，编辑器会自动调用上传接口把图片传到服务器，内容里会生成<img src="/uploads/xxx.jpg" alt="...">这样的标签。

写save_content.php处理表单提交，把编辑器的HTML内容存入数据库：

<?php
// 连接MySQL数据库（替换成你的数据库信息）
$host = 'localhost';
$dbname = 'your_database';
$username = 'your_username';
$password = 'your_password';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // 获取编辑器内容
    $content = $_POST['content'];
    
    // 插入数据库，用预处理语句防止SQL注入
    $stmt = $pdo->prepare("INSERT INTO your_table (content) VALUES (:content)");
    $stmt->bindParam(':content', $content);
    $stmt->execute();
    
    echo "内容保存成功！";
} catch(PDOException $e) {
    echo "数据库错误: " . $e->getMessage();
}
?>

注意：你的表字段要设置为TEXT或者LONGTEXT类型，因为HTML内容可能比较长。

当你需要展示保存的内容时，直接从数据库取出content字段的值输出即可：

<?php
// 连接数据库（同上）
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
$stmt = $pdo->query("SELECT content FROM your_table WHERE id = 1"); // 替换成你的查询条件
$row = $stmt->fetch(PDO::FETCH_ASSOC);
?>

<div class="content">
    <?php echo $row['content']; ?>
</div>

• 确保uploads目录有写入权限（Linux下可以用chmod 755 uploads）
• 可以给上传图片加大小限制，防止超大文件占用空间
• 如果是用户提交的非可信内容，建议用HTMLPurifier过滤危险标签，防止XSS攻击
• 换成TinyMCE的话逻辑完全一致，只是初始化和上传配置略有不同，核心都是「上传图片到服务器→返回URL→编辑器插入img标签→存HTML到数据库」

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