Skip to content

Blog Công Nghệ

MENUMENU
  • Trang chủ
  • Giới Thiệu
  • Lập Trình
    • Lập Trình Website
      • Laravel
        • Phân Tích Dự Án
      • PHP
      • SQL
      • HTML
      • CSS
      • Javascipt
      • My Project
      • Wordpress
    • Luyện Skill
    • Lập trình winform
    • CSDL
    • Lập Trình Android
    • Trí tuệ nhân tạo
    • Khai Khoáng Dữ Liệu
    • Arduino
    • Khác
    • Đồ án
  • Phần Mềm
    • Powerpoint
    • Tool
  • Cuộc sống và Giải trí
    • Hợp âm
    • web5ngay - youtube
    • Công Giáo
    • Kỹ Năng Sống
    • Street Workout
  • Danh sách bài viết
  • Guide line
    • Guild line phỏng vấn
    • Guide lines Laravel
    • Guide line Module Frontend
  • Tóm tắt sách
  • Fanpage

Blog Công Nghệ

Nơi chia sẻ kiến thức

CKEditor đơn giản nhưng mạnh mẽ

3 Tháng Mười Hai, 2020 by admin
Lượt xem: 18
ckeditor 4 skin

CKEditor là một trình soạn thảo văn bản HTML hỗ trợ người dùng trong việc soạn thảo văn bản HTML trong việc thiết kế website

Điểm nổi bật của CKEditor là đơn gian, nhẹ gọn mà đầy đủ chức năng, cài đặt dễ dàng, miễn phí.

Phiên bản hiện tại là 4.5.x các bạn có thể tải về từ website của nhà phát triển tại địa chỉ: http://ckeditor.com/download . CKEditor có 3 gói cài đặt do nhà phát tiển đưa ra là Basic, Standard và Full tương ứng với 17 plugins, 48 plugins và 72 plugins. Ngoài ra các bạn cũng có thể tự chọn các plugin theo ý của mình.

Contents

  • 1. Sử dụng CKEditor
    • Bước 1: Tải gói cài đặt CKEditor
    • Bước 2: Giải nén file vừa tải về
    • Bước 3: Chèn CKEditor vào mã HTML
  • 2. Upload Image CMS OpenCart
  • 4. Set and get data từ ckeditor
  • Kết Luận

1. Sử dụng CKEditor

Để chèn CKEditor vào website mà cụ thể là mã HTML chúng ta làm như sau:

Bước 1: Tải gói cài đặt CKEditor

Để tải CKEditor chúng ta truy cập địa chỉ http://ckeditor.com/download

download ckeditor

Ở đây tôi dùng gói Standard. Nhưng tôi khuyên các bạn nên tự chọn cho mình các plugins bằng cách chọn vào “Or let me custimize CKEditor” để có được các chức năng tốt nhất.

Bước 2: Giải nén file vừa tải về

Sau khi giải nén chúng ta được cấu trúc các thư mục của CKEditor như sau:

Bước 3: Chèn CKEditor vào mã HTML

Trình soạn thảo CKEditor sẽ được chèn vào thẻ textarea.

Ví dụ: Các bạn tạo file html với nội dung sau.

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Demo CKEditor</title>
   <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
   <h1>Demo CKEditor</h1>
   <form >
      <textarea name="ten" id="ten"></textarea>
      <script>CKEDITOR.replace('ten');</script>
   </form>
</body>
</html>

Chú ý:

  • Chèn script Ckeditor: <script src=”ckeditor/ckeditor.js“></script>
  • Khai báo CKEditor: <script>CKEDITOR.replace(‘ten‘);</script>. Trong dó “ten” là id của textarea

Kết quả hiển thị như sau:

demo ckeditor

Nguồn: http://laptrinhphp.info/PHP-Nang-cao/Bai-17-Tich-hop-editor-vao-trang-Web-(FCK-Editor).html

2. Upload Image CMS OpenCart

code giao diện

<fieldset>
  <legend>Introduce yourself</legend>
  <textarea class="form-control" rows="5" name="info-customer"><?php echo $infoCustomer; ?></textarea>
    </fieldset>
    <script src="https://cdn.ckeditor.com/4.15.0/standard/ckeditor.js"></script>

    <script>
    CKEDITOR.replace( 'info-customer' , {
      filebrowserUploadUrl: '<?php echo HTTP_SERVER.'index.php?route=account/uploadimage'; ?>',
      filebrowserUploadMethod: 'form',
    });
</script>

  <style>
  .ck-editor__editable_inline {
  min-height: 300px;
  max-height: 300px;
}
</style>

Code xử lý upload, Ở đây là controller uploadimage trong thư mục account

<?php
class ControllerAccountUploadimage extends Controller {
	public function index() {
		if(isset($_FILES['upload']['name']))
		{
			 $file = $_FILES['upload']['tmp_name'];
			 $file_name = $_FILES['upload']['name'];
			 $file_name_array = explode(".", $file_name);
			 $extension = end($file_name_array);
			 $new_image_name = rand() . $file_name_array[0] . '.' . $extension;

			 $allowed_extension = array("jpg", "gif", "png");
			 if(in_array($extension, $allowed_extension))
			 {
			  move_uploaded_file($file, DIR_UPLOAD . $new_image_name);
			  $function_number = $_GET['CKEditorFuncNum'];
			  $url = HTTP_SERVER. "system/upload/" . $new_image_name;
			  $message = '';
			  echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($function_number, '$url', '$message');</script>";
			 }
		}
	}
}

4. Set and get data từ ckeditor

var editor = CKEDITOR.replace('<%=txtNoiDungCauHoi.ClientID%>');
editor.on('change', function (evt) {
  // getData() returns CKEditor's HTML content.
  document.getElementById('content_txtNoiDungCauHoi').value = evt.editor.getData();
});

CKEDITOR.instances.<%=txtNoiDungCauHoi.ClientID%>.setData(document.getElementById('content_txtNoiDungCauHoi').value);

Kết Luận

Trên đây là phần mình học về CKEditor tại trang web laptrinhphp.info. Cảm ơn các bạn đã xem bài viết!

Related posts:

  1. Đăng ký web với google còn đơn giản hơn Bing
  2. Tạo một hosting miễn phí có đơn giản không?
  3. Những trang web luyện skill cực hay cho dân IT

Post navigation

Previous Post:

Action trong Photoshop lợi hại thế nào

Next Post:

Giao diện Admin – không còn khó khăn nữa

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Ẩn sidebar

Tìm kiếm

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Blog Công Nghệ

Bài viết mới

  • Master typescript
  • Sendmail trong Laravel sử dụng dịch vụ SES, SQS của Amazon
  • Install SSL in Nginx Ubuntu
  • Docker study
  • Bảo vệ: Hướng dẫn code bot Telegram easy game

Lượng truy cập

0074683
Visit Today : 279
Visit Yesterday : 178
This Month : 954
Who's Online : 3
© 2025 Blog Công Nghệ | WordPress Theme by Superbthemes