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
|