Tôi luôn nghĩ rằng làm trình soạn thảo văn bản phong phú là một thứ gì đó từ khoa học tên lửa 😆. Đầu tiên, điều tôi nghĩ đến là lấy một văn bản từ một textarea vô hình và thêm văn bản đã nhập vào HTML phía sau đầu vào. Và khi bạn chọn thứ gì đó, hãy bọc lựa chọn bằng cách nào đó bằng thẻ hoặc thay thế bằng biểu thức thông thường. Nhưng mọi thứ dễ dàng hơn nhiều
Tất cả điều kỳ diệu xảy ra vì thêm một thuộc tính contenteditable=”true”. Bạn có thể thêm nó vào bất kỳ phần tử nào, vì vậy phần tử này và phần tử con của nó sẽ có thể chỉnh sửa được thông qua trình duyệt
Nội dung có thể chỉnh sửa trong trình duyệt với contenteditable=”true”
Như bạn có thể thấy, chúng ta có thể sửa đổi các phần tử hiện có. Ngoài ra, khi chúng tôi nhấp vào nhập, chúng tôi thêm phần tử khối div dưới dạng một dòng mới. Nhưng làm thế nào chúng ta có thể thay đổi văn bản đã chọn và tạo một số từ, chẳng hạn như in đậm hoặc in nghiêng?
Cách triển khai trình soạn thảo văn bản đa dạng thức
Cách dễ nhất là sử dụng document.execCommand()
Ở đây tôi phải nói rằng document.execCommand không được dùng nữa. Một số trình duyệt không thể chuẩn hóa nó và trong tài liệu, bạn sẽ thấy rằng tính năng này đã lỗi thời. Mặc dù nó vẫn có thể hoạt động trong một số trình duyệt, nhưng việc sử dụng nó không được khuyến khích vì nó có thể bị xóa bất cứ lúc nào
Nhưng nó không được dùng nữa trong nhiều năm. Mặc dù vậy, nó không có giải pháp thay thế nào và nhiều nhà phát triển vẫn sử dụng nó trong trình soạn thảo WYSIWYG
Với chức năng này, để in đậm văn bản đã chọn, chúng ta cần gọi hàm document.execCommand('bold', false);, thế là xong
Vậy nhiệm vụ của chúng ta là tạo một thanh công cụ với các nút. Sau đó gọi một dòng mã khi người dùng nhấn vào bất kỳ mã nào trong số chúng
Bây giờ, hãy tạo trình soạn thảo văn bản đa dạng thức dưới dạng thành phần tùy chỉnh với một số nút định dạng. Tôi thích thư viện Lit và hiện tại, đó là một lựa chọn tốt cho bản demo của chúng tôi
Tôi đã viết một số bài viết về thư viện này. Nếu bạn chưa có cơ hội đọc về một trong những thư viện hiệu suất cao nhất để tạo các thành phần web, thì đây là chúng
5 lý do tại sao bạn nên dùng thử LitElement trong dự án tiếp theo của mình
Có lẽ là thư viện tốt nhất để xây dựng các thành phần web
jav. tiếng Anh đơn giản. io
Quản lý trạng thái cho các thành phần web phức tạp
Cách sử dụng Redux trong các thành phần LitElement
jav. tiếng Anh đơn giản. io
Xây dựng thành phần web văn bản đa dạng thức với thư viện Lit
Nó chỉ là một hướng dẫn, vì vậy chúng tôi sẽ tải xuống bộ khởi động thành phần Lit để tiết kiệm thời gian cấu hình máy chủ dev. Hủy lưu trữ thư mục và cài đặt các phụ thuộc function bold() {
const boldEl = document.createElement("b");
const textSelection = window.getSelection();
userSelection.getRangeAt(0).surroundContents(strongElement);
}0
Ngoài ra, chúng tôi cần cài đặt thêm một gói để hiển thị các biểu tượng vật liệu đơn giản trong các nút
npm i @material/mwc-icon-buttonChúng tôi đã có function bold() {
const boldEl = document.createElement("b");
const textSelection = window.getSelection();
userSelection.getRangeAt(0).surroundContents(strongElement);
}1. Tôi thậm chí còn không đổi tên lớp. Tôi vừa nhập thành phần biểu tượng, thêm một số kiểu và trong chức năng kết xuất, tôi đã thêm thanh công cụ và thẻ nơi chúng tôi sẽ chỉnh sửa văn bản
Để hiển thị thanh công cụ, tôi đã tạo một mảng có tên và lệnh của các biểu tượng vật liệu mà chúng sẽ gọi
Bây giờ chúng ta chỉ cần sửa đổi chỉ mục demo. html với biểu tượng nhập và một số kiểu CSS
Bạn có thể chơi với thành phần trên sân chơi sáng
Cách tiếp cận khác
Có vẻ như sự thay thế cho function bold() {
const boldEl = document.createElement("b");
const textSelection = window.getSelection();
userSelection.getRangeAt(0).surroundContents(strongElement);
}0 sẽ là Sự kiện đầu vào cấp 2. Nhưng trong tương lai và hiện tại, nó không bao gồm một số chức năng như hoàn tác/làm lại
Hiện tại, bạn cũng có thể thực hiện sửa đổi HTML thủ công bằng cách chọn và gói nó vào thẻ định dạng
Ví dụ, một cái gì đó như thế này
function bold() {const boldEl = document.createElement("b");
const textSelection = window.getSelection();
userSelection.getRangeAt(0).surroundContents(strongElement);
}
Nhưng nó sẽ chỉ bao gồm chức năng gói. Để hoàn tác các thay đổi, chúng ta cần thực hiện một cái gì đó phức tạp hơn
Vì vậy, như bạn thấy, hiện tại, vào năm 2022, hàm function bold() {
const boldEl = document.createElement("b");
const textSelection = window.getSelection();
userSelection.getRangeAt(0).surroundContents(strongElement);
}0 gần như là lựa chọn đơn giản và duy nhất cho trình soạn thảo văn bản đa dạng thức
Cảm ơn vì đã đọc
Nếu bạn thích bài đăng của tôi và vì lý do nào đó, bạn vẫn chưa phải là thành viên của Medium, bạn có thể ủng hộ tôi và nhận tư cách thành viên bằng liên kết này
Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Kiểm tra Sự bất hòa trong cộng đồng của chúng tôi và tham gia Tập thể tài năng của chúng tôi