Scroll To Top

Hướng dẫn cài đặt ckeditor - trình soạn thảo văn bản trên website

Đăng lúc: Thứ hai - 25/07/2016 20:27 |  NukeViet | : Phạm Văn Phương | Đã xem: 301 |   0

Hướng dẫn cài đặt ckeditor - trình soạn thảo văn bản trên website

Ckeditor là một trong những trình soạn thảo văn bản trên website nổi tiếng, được sử dụng nhiều nhất hiện nay. Bài viết này mình xin trình bày cách tích hợp Ckeditor vào code php của bạn.

1. Tải về CKEditor

- Truy cập vào địa chỉ dowload ckeditor http://ckeditor.com/download
Download ckeditor
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.
  • Customize CKEditor (4): Nếu chọn, hệ thống sẽ dẫn bạn đến trang cài đặt ckeditor theo yêu cầu của bạ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 HTML

- 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ẻ <head></head>.
<script type="text/javascript" src="ckeditor_path/ckeditor.js"></script>
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”
<textarea name="description" id="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea>
- 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.
<script>    CKEDITOR.replace( 'editor1' );</script>
Đoạn mã hoàn chỉnh
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>A Simple Page with CKEditor</title><!-- Make sure the path to CKEditor is correct. -->
		<script src="../ckeditor.js"></script>
	</head>
	<body>
		<form>
			<textarea name="editor1" id="editor1" rows="10" cols="80">                This is my textarea to be replaced with CKEditor.            </textarea>
			<script>
				// Replace the <textarea id="editor1"> with a CKEditor                // instance, using default configuration.                CKEDITOR.replace( 'editor1' );
			</script>
		</form>
	</body>
</html>
Kết quả: http://developers.mynukeviet.net/code/Su-dung-trinh-soan-thao-ckeditor-cho-website-30/

Tác giả bài viết: Hồ Ngọc Triển

Nguồn tin: mynukeviet.net

 Bài viết thuộc chuyên mục: NukeViet

 

Tip:Bài viết, video, hình ảnh, vui lòng gửi về địa chỉ email: Phavaphugmail.com


Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết
 Từ khóa: php, ckeditor

  Ý kiến bạn đọc

Ai cả tin, người ấy phải hối hận. Ngạn ngữ Italia
kenhbgyoutube

 

 

 

 

 

 

 

BÌNH LUẬN MỚI NHẤT - TIN TỨC
BÌNH LUẬN MỚI NHẤT - WINDOWS
MỖI LÚC MỘT NỤ CƯỜI
Thống kê truy cập
  • Đang truy cập27
  • Máy chủ tìm kiếm5
  • Khách viếng thăm22
  • Hôm nay7,046
  • Tháng hiện tại187,999
  • Tổng lượt truy cập4,946,777
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây