Để sử dụng thư viện CKEditor để tạo trình soạn thảo văn bản cho phần nội dung bài đăng, bạn có thể làm theo các bước sau:
- Tải xuống CKEditor: Đầu tiên, bạn cần tải xuống thư viện CKEditor từ trang web chính thức của họ (https://ckeditor.com/ckeditor-4/download/). Bạn có thể chọn phiên bản Standard, Full hoặc Custom tùy thuộc vào yêu cầu của dự án. Trong bài viết này sử dụng bản ckeditor_4.22.1_full (https://download.cksource.com/CKEditor/CKEditor/CKEditor%204.22.1/ckeditor_4.22.1_full.zip)
- Thêm thư viện CKEditor vào trang web của bạn: Sau khi tải xuống, giải nén và sao chép các tệp tin cần thiết (bao gồm JavaScript và CSS) vào thư mục của dự án web của bạn. Sau đó, thêm đoạn mã sau vào phần <head> của trang HTML của bạn: <script src=“ckeditor/ckeditor.js”></script>
- Thêm CKEditor vào Trang Web: Bạn cần thêm mã JavaScript của CKEditor vào phần <head> của trang web của mình và sau đó sử dụng mã HTML để tạo một thẻ <textarea> mà CKEditor sẽ thay thế.
- Kích hoạt CKEditor trên Thẻ <textarea>: Bạn cần sử dụng mã JavaScript để kích hoạt CKEditor trên thẻ <textarea> mà bạn đã tạo. CKEditor sẽ thay thế thẻ <textarea> này bằng một trình soạn thảo văn bản.
Dưới đây là một ví dụ cụ thể về cách tích hợp CKEditor vào trang web của bạn:
<?php
// Kết nối đến cơ sở dữ liệu
include "connection.php";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Lấy dữ liệu từ form
$title = $_POST['title'];
$content = $_POST['content'];
// Thêm bài viết vào cơ sở dữ liệu
$sql = "INSERT INTO post (title, content) VALUES ('$title', '$content')";
if (mysqli_query($conn, $sql)) {
echo "Bài viết đã được đăng thành công.";
// Ngưng thực thi trong 5 giây
sleep(5);
// Chuyển hướng đến trang khác
header('Location: hienthi.php');
exit;
} else {
echo "Lỗi: " . $sql . "<br>" . mysqli_error($conn);
}
}
// Đóng kết nối
mysqli_close($conn);
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đăng bài mới với CKEditor</title>
<script src="ckeditor/ckeditor.js"></script>
<style>
.container{width:1080px; margin:auto;}
</style>
</head>
<body>
<div class="container">
<h2>Đăng bài mới với CKEditor</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<label for="title">Tiêu đề:</label><br>
<input type="text" id="title" name="title" style="width:100%;"><br><br>
<label for="content">Nội dung:</label><br>
<textarea id="content" name="content"></textarea><br><br>
<input type="submit" value="Đăng bài">
</form>
</div>
<script>
CKEDITOR.replace('content', {
filebrowserUploadUrl: 'upload.php' // Đường dẫn tới file xử lý tải lên hình ảnh
});
</script>
</body>
</html>
- <script src=”ckeditor/ckeditor.js”></script> thêm mã JavaScript của CKEditor vào trang web của bạn.
- <textarea id=”content” name=”content”></textarea> tạo một thẻ <textarea> với id là ‘content’, mà CKEditor sẽ thay thế.
- replace(‘content’); kích hoạt CKEditor trên thẻ <textarea> có id là ‘content’.
Giao diện hiển thị của nội dung đăng bài như sau:
Xử lý upload ảnh khi sử dụng CKEditor
Trong file upload.php, bạn cần xử lý tải lên ảnh và sau đó cung cấp URL của ảnh cho CKEditor để hiển thị.
<?php
// Đảm bảo rằng 'CKEditorFuncNum' tồn tại trong mảng $_GET trước khi truy cập vào nó
if(isset($_GET['CKEditorFuncNum'])) {
// Đường dẫn lưu trữ hình ảnh
$uploadDir = 'uploads/';
// Tên tệp tin mới được tạo
$newFileName = $uploadDir . basename($_FILES["upload"]["name"]);
echo "<script>alert('$newFileName');</script>";
// Lưu hình ảnh vào thư mục uploads
if (move_uploaded_file($_FILES["upload"]["tmp_name"], $newFileName)) {
// Trả về URL của hình ảnh để CKEditor hiển thị
$url = $_SERVER['HTTP_ORIGIN'] . '/' . $newFileName;
echo "<script>alert('$url');</script>";
echo '<script>window.parent.CKEDITOR.tools.callFunction(' . $_GET['CKEditorFuncNum'] . ', "' . $url . '", "Tải lên hình ảnh thành công.");</script>';
} else {
echo '<script>alert("Tải lên hình ảnh không thành công.");</script>';
}
} else {
echo '<script>alert("Thiếu tham số CKEditorFuncNum.");</script>';
}
?>
Hiển thị nội dung bài đăng, nội dung trang hienthi.php có thể như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hiển thị bài đăng</title>
<style>
.container{width:1080px; margin:auto;}
.post{padding:15px;border-radius:5px;margin: 10px 0px;}
</style>
</head>
<div class="container">
<?php
// Kết nối đến cơ sở dữ liệu
include "connection.php";
// Truy vấn cơ sở dữ liệu để lấy thông tin về bài đăng và nền
$sql = "SELECT title, content FROM post";
$result = mysqli_query($conn, $sql);
// Tạo các giá trị ngẫu nhiên cho các thành phần màu RGB
$red = rand(0, 255);
$green = rand(0, 255);
$blue = rand(0, 255);
// Tạo chuỗi màu RGB
$color = "rgb($red, $green, $blue)";
// Hiển thị thông tin bài đăng trên trang web
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo '<div class="post" style="background-color: ' . $color . ';">';
echo '<h2>' . $row["title"] . '</h2>';
echo '<p>' . $row["content"] . '</p>';
echo '</div>';
}
} else {
echo "Không có bài đăng nào.";
}
// Đóng kết nối
mysqli_close($conn);
?>
</div>
</body>
</html>Dưới đây là mô tả về các bước và chức năng của code:
- Kết nối đến cơ sở dữ liệu: Sử dụng lệnh
include "connection.php";để kết nối đến cơ sở dữ liệu MySQL thông qua fileconnection.php. Điều này giúp tái sử dụng mã kết nối mà không cần phải viết lại ở mỗi trang. - Truy vấn cơ sở dữ liệu: Thực hiện truy vấn SQL để lấy thông tin về bài đăng từ bảng
post. Trong truy vấn này, chúng ta lấy tiêu đề (title) và nội dung (content) của mỗi bài đăng. - Tạo màu ngẫu nhiên cho mỗi bài đăng: Sử dụng hàm
rand()để tạo ra các giá trị ngẫu nhiên cho các thành phần màu RGB (Red, Green, Blue). Mỗi bài đăng sẽ có một màu nền ngẫu nhiên được tạo ra bằng cách kết hợp các giá trị này. - Hiển thị thông tin bài đăng: Sử dụng vòng lặp
whileđể lặp qua kết quả của truy vấn và hiển thị thông tin của mỗi bài đăng trong các phần tử HTML<div class="post">. Mỗi bài đăng sẽ có một màu nền khác nhau. - Đóng kết nối đến cơ sở dữ liệu: Sử dụng
mysqli_close($conn);để đóng kết nối đến cơ sở dữ liệu sau khi đã sử dụng xong.
Trang web này sẽ hiển thị tất cả các bài đăng từ cơ sở dữ liệu và mỗi bài đăng sẽ có một màu nền ngẫu nhiên.
Hình ảnh hiển thị nội dung bài đăng có thể như sau:
Ngoài việc sử dụng CKEditor để thêm các chức năng soạn thảo văn bản vào phần Nội dung bài đăng bạn có thể sử dụng các thư viện như TinyMCE hoặc Summernote để thực hiện điều này. Các thư viện này cung cấp các công cụ để tô màu, in đậm, tạo heading, chèn ảnh và các thao tác soạn thảo khác.