Trước đây mình đã từng chia sẻ một bài viết tạo chức năng thêm bài viết bằng PHP & MySQL. Nhưng bài viết hôm nay sẽ nâng cao hơn một chút đó là sử dụng trình soạn thạo CKEditor. Vậy CKEditor là gì và cách sử dụng CKEditor như thế nào?
CKEditor là gì?
Đây là trình soạn thảo theo mã nguồn mở theo kiểu WYSIWYG CKSource. Để chạy được chún ta chỉ cần tích hợp vào website là có thể chạy được.
Ckeditor là mã nguồn mở được viết bằng JavaScript vì thế ai cũng có thể chỉnh sửa được. Và bên cạnh đó nó cũng tương thích với mọi trình duyệt như Chrome, Firefox, Opera…
Hướng dẫn cách sử dụng CKEditor
Trước đây khi học PHP mình loay hoay mãi không biết làm thế nào để xây dựng chức năng thêm bài viết có thể chèn ảnh vào trong bài, in đậm, in nghiêng, tạo danh sách, thêm Heading vv… mãi sau này tìm hiểu mới biết rằng CKEditor hỗ trợ cho công việc này.
Bước 1: Mở file posts_add.php bằng Notepad++ hoặc Sublime Text
Truy cập vào đây để tải CKEditor (Nên chọn gói Full Pack để download) và nhúng vào <head>…</head> (Lưu ý là phải nằm trong cùng thư mục với file posts_add.php)
<script src="ckeditor/ckeditor.js"></script>Hoặc cũng có thể nhúng trực tiếp từ CDN:
<script src="//cdn.ckeditor.com/4.16.1/standard/ckeditor.js"></script>
Bước 2: Thêm đoạn mã JavaScript để CKEditor tự động thay thế <textarea> thành id=”content”
Chèn đoạn mã sau trước thẻ </body>
<script type="text/javascript">
CKEDITOR.replace('content',{
width: "700px",
height: "400px",
filebrowserUploadMethod:"form",
filebrowserUploadUrl:"posts_upload.php"
}
);</script>Đoạn mã trên nó sẽ định dạng chiều rộng và chiều cao cho khung soạn thảo.
Bước 3: Tạo một tập tin là posts_upload.php để up ảnh trong nội dung bài viết
Với đoạn mã sau bạn sẽ dễ dàng upload ảnh trong ckeditor.
<?php
if(isset($_FILES['upload']['name']))
{
$file=$_FILES['upload']['name'];
$filetmp=$_FILES['upload']['tmp_name'];
move_uploaded_file($filetmp,'uploads/'.$file);
$function_number=$_GET['CKEditorFuncNum'];
$url='uploads/'.$file;
$message='';
echo "<script>window.parent.CKEDITOR.tools.callFunction('".$function_number."','".$url."','".$message."');</script>";
}
?>
Bước 4: Tạo ra thư mục uploads để chứa ảnh
Cuối cùng bạn thử thêm 1 đoạn text gồm in đậm, in nghiêng để test thế nào!
Kết luận: Qua bài viết hướng dẫn này bạn đã biết cách sử dụng CKEDitor chưa nào? Chỉ cần cài đặt với vài đoạn mã JS là hoàn toàn có thể đăng tải bài viết, thêm dữ liệu, thông tin vào cơ sở dữ liệu Database MySQL Server một cách dễ dàng.
