悠悠楠杉
网站页面
CKEditor4结合php实现上传图片功能
07/04
1. 准备环境
- PHP服务器环境：确保你的服务器上已经安装了PHP和必要的库（如GD库用于处理图片）。
- CKEditor 4：下载并引入CKEditor的JavaScript库到你的HTML页面中。
- MySQL/MariaDB：作为数据库存储文章信息。
2. 创建HTML和JavaScript
首先，创建一个HTML文件（如index.html），并引入CKEditor和必要的CSS。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Article Creator</title>
<link rel="stylesheet" href="https://cdn.ckeditor.com/4.16.0/standard-all/ckeditor.js">
</head>
<body>
<h1>Article Creator</h1>
<form action="submit_article.php" method="post" enctype="multipart/form-data">
<textarea name="editor1" id="editor1"></textarea>
<input type="file" name="uploadImage" accept="image/*">
<input type="submit" value="Submit Article">
</form>
<script src="https://cdn.ckeditor.com/4.16.0/standard-all/ckeditor.js"></script>
<script>
CKEDITOR.replace('editor1');
</script>
</body>
</html>
3. 创建PHP后端（submit_article.php）
接下来，创建PHP脚本来处理文章和图片的上传，并将它们保存到数据库中。这里使用$_POST来接收数据，$_FILES来处理图片上传。
php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 连接数据库（请替换为你的数据库配置）
$db = new mysqli('localhost', 'username', 'password', 'database_name');
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
$title = $db->real_escape_string($_POST['title']); // 假设标题是通过另一个表单输入获取的，实际项目中应相应添加处理逻辑。
$keywords = $db->real_escape_string($_POST['keywords']); // 同样，假设关键词也通过表单获取。
$description = $db->real_escape_string($_POST['description']); // 描述。
$content = $_POST['editor1']; // 从CKEditor获取的Markdown格式内容。
$imageName = $_FILES['uploadImage']['name']; // 上传的图片名称。
$imageTmpName = $_FILES['uploadImage']['tmp_name']; // 上传的图片临时路径。
$imageSize = getimagesize($_FILES['uploadImage']['tmp_name']); // 获取图片尺寸信息。
$imageType = $imageSize['mime']; // 图片类型。
$imageData = file_get_contents($imageTmpName); // 读取图片内容。
// 保存图片到服务器（根据需要调整路径）
$uploadPath = "uploads/".$imageName; // 设置上传路径和文件名。
file_put_contents($uploadPath, $imageData); // 将图片保存到服务器。
// 插入文章数据到数据库（根据实际情况调整SQL语句）
$sql = "INSERT INTO articles (title, keywords, description, content, image) VALUES ('$title', '$keywords', '$description', '$content', '$uploadPath')";
if ($db->query($sql)) {
echo "Article and image uploaded successfully!";
} else {
echo "Error: " . $sql . "<br>" . $db->error; // 输出错误信息。
}
} else { // 非POST请求时显示表单页面。
echo '<a href="index.html">Back to form</a>'; // 提供链接返回表单页面。
}
?>
确保你的数据库连接配置正确，并且已经有一个名为articles的表，它有title、keywords、description、content和image这几个字段。此外，注意处理SQL注入和其他安全问题（例如使用预处理语句）。上述代码中的file_get_contents()用于读取临时文件内容并将其保存到服务器，你需要确保服务器有足够的权限写入文件，且路径安全不会造成安全隐患。
