Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 7-Bài 9. Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR

Tác giả: Dương Nguyễn Phú Cường
Số phút học: 170 phút

Ngày đăng: 1/11/2025, 20:59

Lượt xem: 648

Bộ công cụ Soạn thảo văn bản Trực quan

Để tiện dụng cho người dùng thông thường, chúng ta cần có một bộ công cụ soạn thảo văn bản dạng trực quan tương tự như Word trên nền web. Thuật ngữ sử dụng chung là WYSIWYG (What Your See Is What Your Get). Có rất nhiều hãng thiết kế các công cụ trực quan này. Nổi tiếng và thông dụng là thư viện CKEDITOR

Tích hợp CKEDITOR vào trang web

Step 1: download thư viện JQUERY

Do thự viện CKEDITOR được viết dựa vào JQUERY, nên chúng ta cần liên kết thư viện JQUERY trước
Truy cập: https://jquery.com/download/
Download thư viện vào thư mục: vendor/jquery/jquery.min.js
Cấu trúc thư mục như sau:

thu-muc-goc-du-an
--- vendor
    --- jquery
        --- jquery.min.js

--- index.html

Step 2: download thư viện CKEDITOR

Truy cập: https://ckeditor.com/ckeditor-4/download/
Download phiên bản là CKEDITOR 4
Xem hướng dẫn tại trang chủ: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
Download thư viện vào thư mục: vendor/ckeditor
Cấu trúc thư mục như sau:

thu-muc-goc-du-an 
--- vendor 
    --- jquery 
        --- jquery.min.js 
    --- ckeditor

--- index.html

Step 3: tạo file HTML đơn giản như sau

Tạo file index.html
Nội dung file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Học JQuery | NenTang.vn</title>

  <style>
    body {
      height: 100vh;
      background-color: #89d4cf;
      background-image: linear-gradient(315deg, #89d4cf 0%, #6e45e1 74%);
    }

    .watermark {
      color: #fff;
      text-align: center;
    }

    #frmGhiDanh {
      width: 968px;
      margin: 0 auto;
    }

    #frmGhiDanh #thongtinDonGian {
      border: 1px solid red;
      background-color: #f1dfd1;
      background-image: linear-gradient(315deg, #f1dfd1 0%, #f6f0ea 74%);
    }

    #frmGhiDanh .tblThongTinCaNhan {
      border-collapse: collapse;
      width: 100%;
      border-color: red;
    }

    #frmGhiDanh #thongtinPhucTap {
      border: 1px solid red;
      background-color: #ebbe9b;
      background-image: linear-gradient(315deg, #ebbe9b 0%, #e7a977 74%);
    }

    #frmGhiDanh .tblThongTinCaNhan {
      border-collapse: collapse;
      width: 100%;
      border-color: red;
    }

    #frmGhiDanh .tblThongTinCaNhan td {
      padding: 5px;
    }

    #frmGhiDanh .tieude {
      font-weight: bold;
      text-align: right;
    }

    #frmGhiDanh #txtSoThichCaNhan {
      width: 90%;
    }

    #frmGhiDanh #btnGoiDuLieu {
      padding: 10px;
      color: #fff;
      font-weight: bold;
      border: 1px solid #fff;
      background-color: #27ae60;
      cursor: pointer;
    }

    #frmGhiDanh #btnXoaTrangDuLieu {
      padding: 10px;
      color: #fff;
      font-weight: bold;
      border: 1px solid #fff;
      background-color: #e74c3c;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- Phần trình bày Giao diện HTML - START -->

  <h1 class="watermark">Nền tảng Kiến thức | https://nentang.vn</h1>


  <form name="frmGhiDanh" id="frmGhiDanh" method="post" action="#">
    <fieldset id="thongtinDonGian">
      <h3 align="center">Các thành phần nhập liệu (controls/fields) đơn giản (text, textarea, select)</h3>
      <table border="1" class="tblThongTinCaNhan">
        <tr>
          <td class="tieude" width="150px">Họ tên</td>
          <td>
            <input type="text" name="txtHoTen" id="txtHoTen" />
          </td>
        </tr>
        <tr>
          <td class="tieude">Địa chỉ</td>
          <td>
            <input type="text" name="txtDiaChi" id="txtDiaChi" />
          </td>
        </tr>
        <tr>
          <td class="tieude">Ngày/tháng/năm sinh</td>
          <td>
            Ngày sinh
            <select name="slNgaySinh" id="slNgaySinh">
              <script>
                for (var i = 1; i <= 31; i++) {
                  document.write('<option value="' + i + '">Ngày ' + i + '</option>');
                }
              </script>
            </select>

            Tháng sinh
            <select name="slThangSinh" id="slThangSinh">
              <script>
                for (var i = 1; i <= 12; i++) {
                  document.write('<option value="' + i + '">Tháng ' + i + '</option>');
                }
              </script>
            </select>

            Năm sinh
            <select name="slNamSinh" id="slNamSinh">
              <script>
                var objNgayGioHienTai = new Date();
                var namHienTai = objNgayGioHienTai.getFullYear();
                for (var i = namHienTai; i >= 1900; i--) {
                  document.write('<option value="' + i + '">Năm ' + i + '</option>');
                }
              </script>
            </select>
          </td>
        </tr>
        <tr>
          <td class="tieude">Sở thích cá nhân</td>
          <td>
            <textarea name="txtSoThichCaNhan" id="txtSoThichCaNhan" rows="5"></textarea>
          </td>
        </tr>
      </table>
    </fieldset>
    <fieldset id="thongtinPhucTap">
      <h3 align="center">Các thành phần nhập liệu (controls/fields) (radio/checkbox) </h3>
      <table border="1" class="tblThongTinCaNhan">
        <tr>
          <td class="tieude" width="150px">Giới tính</td>
          <td>
            <!--
              Quy định trong dữ liệu
              - 0: Nam
              - 1: Nữ
            -->
            <label><input type="radio" name="rdGioiTinh" id="rdGioiTinh_1" value="0" /> Nam </label>
            <br />
            <label><input type="radio" name="rdGioiTinh" id="rdGioiTinh_2" value="1" /> Nữ </label>
          </td>
        </tr>
        <tr>
          <td class="tieude">Đăng ký môn học</td>
          <td>
            <!--
              Quy định trong dữ liệu
              - W1: Khóa học Web căn bản HTML, CSS, JS
              - W2: Khóa học Web nâng cao MySQL, PHP
              - TD1: Khóa học Tư duy Giải thuật
            -->
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_1" value="W1" /> Khóa học Web căn bản HTML,
              CSS, JS </label>
            <br />
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_2" value="W2" /> Khóa học Web nâng cao MySQL,
              PHP </label>
            <br />
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_3" value="TD1" /> Khóa học Tư duy Giải thuật
            </label>
          </td>
        </tr>
      </table>
    </fieldset>
    <center>
      <input type="button" name="btnGoiDuLieu" id="btnGoiDuLieu" value="Gởi dữ liệu" />
      <input type="reset" name="btnXoaTrangDuLieu" id="btnXoaTrangDuLieu" value="Xóa trắng dữ liệu" />
    </center>
  </form>


  <!-- Phần trình bày Giao diện HTML - END -->



  <!-- Phần xử lý code JavaScript - START -->
  <!-- Nên viết tất cả các đoạn xủ lý JavaScript vào phần cuối trang, trước khi đóng thẻ <body> là cách viết tốt nhất -->
  <!-- Liên kết thư viện Jquery -->
  <script src="vendor/jquery/jquery.min.js"></script>

  <!-- Liên kết thư viện CKEDITOR -->
  <script src="vendor/ckeditor/ckeditor.js"></script>

  <!-- Viết code Jquery -->
  <script>
    // Yêu cầu CKEDITOR thay thế textarea đơn giản thành Bộ công cụ soạn thảo trực quan
    CKEDITOR.replace('txtSoThichCaNhan');
  </script>
  <!-- Phần xử lý code JavaScript - END -->
</body>

</html>

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo