Hướng dẫn ckeditor php

Ckeditor là trình soạn thảo trên Website nổi tiếng và được nhiều người dùng sử dụng nhất hiện nay, tuy nhiên rất nhiều lập trình viên gặp khó khăn khi tích hợp chúng vào Website, vì vậy trong bài viết này vncodeer.vn sẽ hướng dẫn chi tiết cách tích hợp Ckeditor vào website

Ckeditor là trình soạn thảo trên Website nổi tiếng và được nhiều người dùng sử dụng nhất hiện nay, tuy nhiên rất nhiều lập trình viên gặp khó khăn khi tích hợp chúng vào Website, vì vậy trong bài viết này vncoder.vn sẽ hướng dẫn chi tiết cách tích hợp Ckeditor vào website.

1) Tải Ckeditor

- Truy cập vào địa chỉ dowload ckeditor http://ckeditor.com/download

Giao diện download ckeditor
- Ckeditor cung cấp các gói mặc định để bạn download, nên chọn đúng gói phù hợp với nhu cầu của bạn, để tiết kiệm tài nguyên hệ thống.

• Basic Package (1): Là trình soạn thảo mini, nhỏ gọn, bao gồm 17 plugin cơ bản.
• Standard Package (2): Là trình soạn thảo thông thường, gồm 48 plugin thường dùng nhất. (Khuyên dùng)
• Full Package (3): Trình soạn thảo trù phú, đầy đủ với 72 plugin cài sẵn.

- Có thể click vào “Compare packages” để xem các plugin đã được cài theo các gói cấu hình tương ứng.
- Sau khi chọn được gói cấu hình đúng với nhu cầu của bạn, click vào “Download CKEditor” (5) để tiến hành tải về CKEditor

2) Cài đặt CKEditor trong

- Giải nén tập tin vừa download, được thư mục ckeditor, di chuyển thư mục này vào thư mục web của bạn. (Đặt thư mục ở vị trí thích hợp, đường dẫn sẽ khai báo sau)
- Thêm tập tin ckeditor.js vào HTML: Chèn đoạn mã này vào trong thẻ .

Chú ý: Thay đường dẫn đến file ckeditor.js tương ứng với đường dẫn tại thư mục web của bạn.
- Tạo một textarea, có khai báo thuộc tính id. Giá trị của thuộc tính này bạn có thể đặt tùy ý. Ở đây mình ví dụ là id=“editor1”

This is my textarea to be replaced with CKEditor.

- Dùng javascript, thay thế textarea bên trên bằng editor. Giá trị editor1 ở đây chính là giá trị của thuộc tính id đặt bên trên.

Đoạn mã hoàn chỉnh

	
		
		
		
	
	
		

			                This is my textarea to be replaced with CKEditor.            
			
		
	

3) Kết luận

Trên đây là toàn bộ hướng dẫn của vncoder.vn về cách tích hợp trình soạn thảo CKEditor vào website. Hy vọng bài viết sẽ giúp ích cho bạn. Chúc bạn thành công!.

4) Tài liệu tham khảo

• https://mynukeviet.net/lap-trinh-php/huong-dan-cai-dat-ckeditor-trinh-soan-thao-van-ban-tren-website-112.html

5) Xem thêm

• Hướng dẫn cách viết code PHP tối ưu

• Hướng dẫn viết ứng dụng đếm số người đang online bằng PHP

Tiếp tục chuỗi seri tạo website bằng php, bài viết hôm nay mình sẽ hướng dẫn các bạn cách cài đặt ckeditor và tích hợp ckeditor vào php, cụ thể ở đây là chức năng thêm bài viết

Mục lục

• Giới thiệu về ckeditor
• Cài đặt ckeditor
• Tích hợp ckeditor vào php – trang thêm bài viết
  • 1. Sửa nội dung file header.php
• Tổng kết

Giới thiệu về ckeditor

• ckeditorlà bộ soạn thảo dữ liệu cực kì mạnh mẽ và được sử dụng rất phổ biến hiện nay với số lượt download hơn 17 triệu lượt từ thời điểm ra mắt.
• Đây là mã nguồn mở cho phép bạn download miễn phí và việc cài đặt ckeditor và việc tích hợp ckeditor cũng rất dễ dàng nhanh chóng.

Cài đặt ckeditor

Để tích hợp ckeditor vào php, việc đầu tiên chúng ta cần phải download gói thư viện ckeditor về máy tính. Các bước thực hiện như sau :

1. Truy cập vào địa chỉ download ckeditor sẽ thấy như hình dưới

2. Tại đây có nhiều gói cài đặt ckeditor bao gồm:

• Basic Package : Chứa 17 plugin, thanh công cụ đơn giản
• Standard Package : Chứa 48 plugin, chứa những thanh công cụ phổ biến và cần thiết cho soạn thảo
• Full Package : Gói đầy đủ, chứa 73 plugin, thêm những công cụ khác
• Customize : Gói này bạn sẽ tự điều chỉnh những thanh công cụ nào cần cho website của bạn

Trong phạm vi bài viết này, mình sẽ chọn gói Standard Package, rồi ấn nút Download.

Sau khi download file zip về máy, chúng ta sẽ được file ckeditor_4.6.2_standard.zip, bạn giải nén file này ra sẽ được thư mục ckeditor, sau đó copy toàn bộ thư mục này và bỏ vào đường dẫn website của chúng ta website/admin/ckeditor

Tích hợp ckeditor vào php – trang thêm bài viết

Ở bài 5 : Hướng dẫn tạo trang thêm bài viết, mình có hướng dẫn các bạn tạo trang Thêm bài viết bằng thẻ thuần của html. Phần này, mình sẽ tích hợp ckeditor vào php để chúng ta có được thanh công cụ soản thảo hoàn chỉnh và tiện lợi</p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p>Đầu tiên, bạn tạo giúp mình một file mới đặt tên là <strong>them-bai-viet-ck.php</strong> và bỏ vào thư mục admin như sau :</p><div class="imgBox"><img alt="Hướng dẫn ckeditor php" data-orgimg="https://sg.cdnki.com/huong-dan-ckeditor-php---aHR0cHM6Ly9rdW5nZnVwaHAuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE3LzAzL3RoYW0tYmFpLXZpZXQtY2tlZGl0b3ItYWRtaW4ucG5n.webp" ></img></div>Tạo trang thêm bài viết sử dụng ckeditor<p>Các bạn tiếp tục copy nguyên toàn bộ nội dung của trang <strong>them-bai-viet.php</strong> rồi paste vào trang <strong>them-bai-viet-ck.php</strong>, lúc này trang <strong>them-bai-viet-ck.php</strong> có nội dung :</p><pre><?php session_start(); ?> <?php require_once("includes/connection.php");?> <?php include("includes/permission.php");?> <?php include ("includes/header.php"); ?> <?php if (isset($_POST["btn_submit"])) { //lấy thông tin từ các form bằng phương thức POST $title = $_POST["title"]; $content = $_POST["content"]; $is_public = 0; if (isset($_POST["is_public"])) { $is_public = $_POST["is_public"]; } $user_id = $_SESSION["user_id"]; $sql = "INSERT INTO posts(title, content, user_id, is_public, createdate, updatedate ) VALUES ( '$title', '$content', '$user_id', '$is_public', now(), now())"; // thực thi câu $sql với biến conn lấy từ file connection.php mysqli_query($conn,$sql); echo "Bài viết đã thêm thành công"; } ?> <form action="them-bai-viet.php" method="post"> <table> <tr> <td colspan="2"><h3>Thêm bài viết mới</h3></td> </tr> <tr> <td nowrap="nowrap">Tiêu đề bài viết :</td> <td><input type="text" id="title" name="title"></td> </tr> <tr> <td nowrap="nowrap">Nội dung :</td> <td><textarea name="content" id="content" rows="10" cols="150">