Summernote
Trình soạn thảo WYSIWYG siêu đơn giản.
Summernote
Summernote là một thư viện JavaScript giúp bạn tạo ra các trình soạn thảo WYSIWYG trực tuyến.
Tại sao nên sử dụng Summernote?
Summernote có một số tính năng đặc biệt:
- Dán hình ảnh từ clipboard
- Lưu trữ hình ảnh trực tiếp trong nội dung của trường sử dụng mã hóa base64, vì vậy bạn không cần thực hiện xử lý hình ảnh
- Giao diện người dùng đơn giản
- Chỉnh sửa WYSIWYG tương tác
- Tích hợp tiện lợi với máy chủ
- Hỗ trợ tích hợp Bootstrap 3, 4 và 5
- Rất nhiều plugins and connectors được cung cấp kèm theo
Cài đặt và phụ thuộc
Summernote được xây dựng trên jQuery.
1. Bao gồm JS/CSS
Hãy bao gồm mã sau trong thẻ <head> của HTML của bạn:
<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- include summernote css/js-->
<link href="summernote-bs5.css" rel="stylesheet">
<script src="summernote-bs5.js"></script>
2. Chọn một phần tử
Sau đó đặt một thẻ div ở đâu đó trong thẻ body. Phần tử này sẽ được thay thế bằng trình soạn thảo summernote.
<div id="summernote">Hello Summernote</div>
3. Sử dụng Summernote!
Cuối cùng, chạy đoạn mã này sau khi DOM đã sẵn sàng:
$(document).ready(function() {
$('#summernote').summernote();
});
Để biết thêm ví dụ, vui lòng truy cập homepage.
API
code – lấy mã nguồn HTML nằm dưới văn bản trong trình soạn thảo:
var html = $('#summernote').summernote('code');
Để biết thêm chi tiết về API, vui lòng tham khảo document.
Cảnh báo – tiêm mã
Chế độ xem mã cho phép người dùng nhập nội dung mã script. Hãy đảm bảo lọc/sanitize the HTML on the server. Nếu không, một kẻ tấn công có thể tiêm mã JavaScript tùy ý vào máy khách.
Đóng góp
https://github.com/summernote/summernote/blob/develop/.github/CONTRIBUTING.md
Liên hệ
- Nhóm người dùng Facebook: https://www.facebook.com/groups/summernote
- Summernote Slack: Join the Summernote Slack community
Trang chủ: https://summernote.org
Chi tiết Tải về:
Tác giả: summernote
Mã nguồn: https://github.com/summernote/summernote
Giấy phép: MIT license
