Năm 2025 nên chọn framework trình soạn thảo rich text nào?

xguru · 2025-02-10T10:21:01+09:00

Trình soạn thảo rich text (WYSIWYG), vốn là thành phần thiết yếu của các ứng dụng ngày nay, đang được sử dụng phổ biến trong những dịch vụ như Linear, Notion và Google Docs Liveblocks đã phân tích nhiều trình soạn thảo phổ biến trong suốt một năm qua, đồng thời tổng hợp ưu và nhược điểm của từng trình soạn thảo Các trình soạn thảo nhìn chung được chia thành hai nhóm: “core” và “battery-included” Nếu chỉ cần một trình soạn thảo đơn giản, nên chọn phương án gọn nhẹ; còn nếu muốn xây dựng trình soạn thảo phức tạp với nhiều tính năng cộng tác, hãy cân nhắc giải pháp có khả năng mở rộng cao Nhìn chung, lựa chọn an toàn nhất là Tiptap, được đánh giá là có sự cân bằng tốt giữa bộ tính năng phong phú và mức độ can thiệp không quá áp đặt Cộng tác Chúng tôi (Liveblocks) đã tập trung vào các tính năng cộng tác, và với hầu hết trình soạn thảo, có thể triển khai cộng tác thời gian thực thông qua thư viện CRDT Yjs Khi dùng Yjs, cần có một dịch vụ backend để lưu trữ tài liệu và duy trì kết nối thời gian thực Liveblocks cung cấp backend Yjs tổng quát có thể dùng với nhiều trình soạn thảo hỗ trợ Yjs, đồng thời cũng có giải pháp tích hợp dành cho Tiptap và Lexical Một số trình soạn thảo cũng sử dụng giải pháp riêng dựa trên OT (Operational Transform) hoặc dịch vụ cloud mã nguồn đóng Lưu ý trước khi bắt đầu Bài viết loại trừ các trình soạn thảo đã ngừng bảo trì như Draft.js, các trình soạn thảo chỉ có cộng đồng nhỏ, hoặc trình soạn thảo nguồn riêng tư như Froala Khả năng truy cập (a11y) ở hầu hết trình soạn thảo đều cần thêm công sức triển khai, vì vậy nên tham khảo tài liệu của từng trình soạn thảo Tiptap Đây là trình soạn thảo chạy trên ProseMirror, giúp trừu tượng hóa sự phức tạp của ProseMirror để cải thiện trải nghiệm phát triển Phần lớn được cung cấp theo giấy phép MIT, và có thể dùng ngay tính năng cộng tác thời gian thực thông qua Tiptap Cloud hoặc Liveblocks Dù có nhiều tính năng, nó được thiết kế theo cấu trúc có thể tree-shaking, nên kích thước bundle lõi có thể nhỏ hơn Quill, Slate và Lexical Mở rộng Tiptap được thiết kế để dễ thêm node, mark, command và extension đơn giản Khi cần, có thể override hành vi của extension hiện có để tùy biến theo ý muốn Một số extension “pro” được cung cấp dưới dạng trả phí Tùy biến nâng cao Có thể sẽ cần trực tiếp xử lý cấu trúc của ProseMirror Cần một chút thời gian để làm quen với các lớp trừu tượng riêng của Tiptap như command chain Mô hình dữ liệu dựa trên schema; phần lớn được tạo tự động, nhưng với tính năng nâng cao thì cũng có thể phải thao tác trực tiếp với schema Hạn chế (Drawbacks) Có thể gây nhầm lẫn về hướng dẫn vì phải tham chiếu qua lại giữa tài liệu ProseMirror và tài liệu Tiptap Nội dung liên quan đến khả năng truy cập (a11y) phụ thuộc khá nhiều vào người triển khai Nếu duyệt trạng thái tài liệu không cần thiết trong lúc transaction, hiệu năng có thể bị giảm Thay đổi phía server Bản thân Tiptap không giúp việc thao tác tài liệu ở phía server trở nên dễ dàng Cần cân nhắc xử lý trực tiếp bằng ProseMirror hoặc sửa trực tiếp tài liệu JSON Liveblocks cung cấp thư viện giúp việc chỉnh sửa tài liệu ProseMirror dễ hơn Cộng tác thời gian thực Tiptap có extension cung cấp khả năng cộng tác thời gian thực bằng Yjs Có thể tích hợp với nhiều giải pháp cloud như Tiptap Cloud và Liveblocks Liveblocks Text Editor còn bổ sung nhiều tính năng ngoài cộng tác thời gian thực như hiển thị con trỏ, bình luận, nhắc tên và lịch sử phiên bản Ưu điểm (Pros) Tài liệu hướng dẫn rất tốt Khả năng cộng tác thời gian thực xuất sắc Độc lập với framework và có package riêng cho React Khả năng mở rộng cao Có thể tích hợp với Liveblocks hoặc Tiptap Cloud Nhược điểm (Cons) Hiệu năng có thể giảm nếu không tuân theo cách sử dụng tối ưu Cần học cấu trúc nội bộ của ProseMirror để phát triển tính năng nâng cao Mặc định còn thiếu khả năng chỉnh sửa headless phía server BlockNote BlockNote là trình soạn thảo dạng block mở rộng từ Tiptap và ProseMirror, cung cấp các tính năng kiểu Notion Do chủ yếu được phát triển xoay quanh React, nên khó tận dụng các UI component của nó trong framework khác Có thể sử dụng thuận tiện vì những tính năng cần thiết như slash menu và floating toolbar đã được tích hợp sẵn Hạn chế Dù bản thân BlockNote là mã nguồn mở, một số tính năng như exporter docx và PDF yêu cầu gói thuê bao trả phí Cộng tác thời gian thực Hỗ trợ tính năng cộng tác dựa trên Yjs và Liveblocks Sắp chính thức cung cấp tích hợp với Liveblocks Ưu điểm Dựa trên Tiptap và ProseMirror đã được kiểm chứng về độ ổn định Cung cấp tính năng cộng tác thời gian thực với Yjs và Liveblocks Có sẵn API chỉnh sửa dạng block và UI component Nhược điểm Chủ yếu được thiết kế riêng cho React Kích thước bundle lớn hơn so với các trình soạn thảo cơ bản Lexical Đây là trình soạn thảo được Facebook (Meta) hậu thuẫn và đang thu hút sự quan tâm lớn Sau khi Liveblocks phát triển các extension như bình luận, nhắc tên, lịch sử phiên bản và cộng tác thời gian thực trong vài tháng, cảm nhận chung là nó vẫn còn ở giai đoạn đầu Hiện vẫn chưa đạt bản 1.0 và đang tiếp tục được cập nhật rất nhanh Hạn chế Không có tính năng “pure decorations”, nên để triển khai các tính năng như hiển thị con trỏ, phải chồng riêng phần tử DOM lên trên trình soạn thảo Hỗ trợ cộng tác Yjs cơ bản hiện vẫn còn yếu trong việc xử lý các edge case Có vấn đề hardcode tên root node, khiến khó dùng đồng thời nhiều trình soạn thảo trong cùng một tài liệu Cộng tác thời gian thực Nếu không dùng package Liveblocks, việc triển khai cộng tác trên Lexical có độ khó cao Trong ví dụ StickyNotes, họ lách qua hạn chế này bằng cách dùng tài liệu và kết nối socket riêng cho từng root node khi tạo nhiều root node Các vấn đề đang liên tục được giải quyết nhờ tốc độ phát triển nhanh Mở rộng Lexical Lexical quản lý dữ liệu thông qua cấu trúc phân cấp node Có thể tạo node riêng bằng cách kế thừa 4 loại node lõi Có thể tăng tốc phát triển thông qua LexicalComposer và package @lexical/react dành riêng cho React Có thể dùng package @lexical/headless để chạy Lexical ở backend mà không cần DOM Thay đổi phía server Có thể chỉnh sửa tài liệu Lexical ở phía server, và Liveblocks cung cấp thư viện giúp đơn giản hóa việc này Ưu điểm Hỗ trợ cộng tác thời gian thực bằng Yjs Độc lập với framework và có package riêng cho React Hỗ trợ Liveblocks tích hợp với bình luận, nhắc tên và lịch sử phiên bản Được Meta hậu thuẫn, phát triển rất năng động và có cộng đồng quy mô lớn Nhược điểm Tính năng cộng tác thời gian thực với Yjs có thể phát sinh một số lỗi nếu không tự xử lý các edge case Thiếu tính năng pure decorations và cần xử lý vòng qua DOM cho các tính năng nâng cao Kích thước package lõi lớn hơn so với Tiptap và Slate Slate Framework trình soạn thảo có thể tùy biến, đang được sử dụng tại Discord, Grafana, Sanity.io, Slite và nhiều nơi khác Liveblocks chọn Slate làm mặc định cho trình soạn thảo bình luận của mình Cấu trúc dữ liệu đơn giản, có thể kiểm soát toàn diện và có thể dùng linh hoạt ngoài React Mở rộng Slate Có thể mở rộng Slate thông qua nhiều ví dụ và tài liệu Hệ sinh thái plugin còn hạn chế, nhưng việc tự triển khai không quá khó Có một dự án tên là Plate như một dạng mở rộng hơn Giới hạn Kích thước bundle hơi lớn hơn Tiptap Ít tính năng tích hợp sẵn nên sẽ có những phần phải tự triển khai Cộng tác thời gian thực Có thể triển khai cộng tác thời gian thực cho tài liệu Slate bằng slate-yjs, @liveblocks/yjs, v.v. Ưu điểm Hỗ trợ tài liệu rất tốt Hỗ trợ cộng tác thời gian thực với Yjs Độc lập với framework và cung cấp package riêng cho React Khả năng mở rộng cao Nhược điểm Kích thước bundle hơi lớn hơn một chút so với Tiptap Thiếu tính năng có sẵn Quill Trình soạn thảo từng được sử dụng trong Slack, LinkedIn, Figma, Zoom, Miro, Airtable và nhiều nơi khác Từng chững lại một thời gian, nhưng đã sôi động trở lại sau khi phát hành phiên bản 2 vào tháng 4/2024 với việc viết lại bằng TypeScript Sử dụng mô hình tài liệu riêng tên là Parchment, là một khái niệm tương tự schema của ProseMirror Giới hạn Không có tính năng pure decoration như Lexical, nên với các tính năng như tô sáng màu hoặc con trỏ cộng tác thì phải chồng thêm phần tử DOM riêng Nhiều plugin cho Quill 2 vẫn chưa được cập nhật Hoạt động cộng đồng có thể ít sôi nổi hơn so với các trình soạn thảo khác Cộng tác thời gian thực Có thể triển khai cộng tác thời gian thực bằng cách kết hợp Yjs và y-quill Backend riêng có thể dùng nhiều cách khác nhau như Liveblocks Ưu điểm Hỗ trợ tài liệu rất tốt Độc lập với framework và cung cấp package riêng cho React Hỗ trợ cộng tác thời gian thực với Yjs Sử dụng định dạng delta đơn giản Nhược điểm Thiếu tính năng có sẵn và plugin vẫn chưa được cập nhật đầy đủ cho Quill 2 Thiếu tính năng pure decoration Phát triển kém sôi động hơn tương đối và cộng đồng nhỏ hơn Kích thước bundle lớn gấp đôi so với Tiptap hoặc Slate ProseMirror Framework cốt lõi làm nền tảng cho nhiều trình soạn thảo như Tiptap, Remirror, BlockNote Bảo đảm hoạt động ổn định nhờ cấu trúc rõ ràng gồm schema, state, view, transform, v.v. Nếu tự xây dựng trình soạn thảo ngay từ đầu chỉ bằng core library thì lượng mã thường sẽ khá nhiều Giới hạn Tài liệu nêu rõ rằng ngay cả để tạo một trình soạn thảo đơn giản cũng cần một lượng mã đáng kể Khuyến nghị sử dụng các wrapper cấp cao hơn như Tiptap, Remirror, BlockNote Độ dốc học tập khá cao, nhưng tài liệu và cộng đồng được tổ chức tốt Ưu điểm Cung cấp tài liệu rất tốt cùng cộng đồng năng động Hỗ trợ cộng tác thời gian thực với Yjs Nhược điểm Cần nhiều mã để triển khai ví dụ cơ bản Thiếu tính năng có sẵn Đường cong học tập tương đối dốc Plate Dựa trên Slate, là dự án “kèm sẵn pin” cung cấp nhiều plugin phong phú như tính năng AI, mention, comment, v.v. Linh hoạt vì có thể chỉ chọn các tính năng cần dùng Cũng cung cấp template trả phí và được thiết kế riêng cho React Giới hạn Cộng tác hiện chỉ chính thức hỗ trợ Hocuspocus, và cần tự triển khai để kết nối với các backend Yjs khác (ví dụ: Liveblocks) Vì chỉ dành cho React nên khả năng tương thích với framework khác có thể bị hạn chế Do có nhiều tính năng nên kích thước bundle có xu hướng lớn hơn Ưu điểm Cung cấp thư viện plugin đa dạng Hỗ trợ chỉnh sửa phía máy chủ Cung cấp template giúp khởi đầu nhanh Nhược điểm Được thiết kế riêng cho React Tính năng cộng tác chỉ dùng được thông qua Hocuspocus Kích thước bundle lớn hơn so với các trình soạn thảo cơ bản Remirror Trình soạn thảo dựa trên ProseMirror, tương tự Tiptap nhưng theo đuổi cách tiếp cận có sẵn nhiều thứ hơn Hỗ trợ hơn 30 plugin, React hook, quốc tế hóa (i18n), khả năng truy cập (a11y), v.v. Là mã nguồn mở theo giấy phép MIT và cũng cung cấp tính năng cộng tác Giới hạn Cộng đồng nhỏ hơn Tiptap và tốc độ cập nhật có thể chậm hơn Có nhiều tính năng dành riêng cho React nên trong môi trường khác có thể gặp hạn chế Kích thước bundle khá lớn Cộng tác thời gian thực Remirror hỗ trợ cộng tác Yjs và Liveblocks thông qua YjsExtension Ưu điểm Hỗ trợ tài liệu rất tốt Cung cấp thư viện plugin đa dạng Hỗ trợ tính năng cộng tác với Yjs và Liveblocks Nhược điểm Được thiết kế riêng cho React Kích thước bundle lớn hơn Tần suất cập nhật thấp và cộng đồng nhỏ Editor.js Trình soạn thảo rich text hỗ trợ chỉnh sửa theo khối, có nhiều plugin và cộng đồng lớn Có cấu trúc dữ liệu gồm block, inline và tune Không phụ thuộc framework, đồng thời tích hợp sẵn nhiều tiện ích như tooltip Giới hạn Không có hỗ trợ cộng tác thời gian thực chính thức; đã có một số PR thử nghiệm nhưng tình trạng bảo trì vẫn chưa rõ ràng Ngay cả package cơ bản cũng khá nặng Cộng tác thời gian thực Không được hỗ trợ chính thức Ưu điểm Cung cấp thư viện plugin phong phú với nhiều tính năng Hỗ trợ tích hợp do cộng đồng xây dựng với nhiều CMS và backend framework Nhược điểm Kích thước bundle lớn hơn Không có tính năng cộng tác thời gian thực CKEditor Trình soạn thảo có lịch sử hơn 20 năm, và phiên bản hiện tại (5) cung cấp kiến trúc hiện đại cùng nhiều tính năng phong phú Hỗ trợ nhiều framework như Angular, React, Vue, Next Được phát hành theo giấy phép GPL-2; trong một số trường hợp yêu cầu mã nguồn mở, còn dùng thương mại thì cần mua giấy phép riêng Giới hạn Phần lớn plugin là trả phí, và tính năng cộng tác cũng chỉ dùng được với dịch vụ đám mây của CKEditor Giấy phép GPL-2 và mô hình tính phí dựa trên số lượt tải có thể là rào cản với nhiều người dùng Cộng tác thời gian thực Không cung cấp giải pháp cộng tác nào khác ngoài dịch vụ đám mây độc quyền của CKEditor Ưu điểm Mặc định đã cung cấp bộ tính năng rất phong phú Tương thích với nhiều framework Nhược điểm Tính năng cộng tác phụ thuộc vào dịch vụ đám mây của CKEditor Giấy phép GPL-2 có thể là ràng buộc với một số người dùng Một số tính năng được cung cấp theo mô hình tính phí dựa trên mức sử dụng TinyMCE Tương tự CKEditor, đây là trình soạn thảo có lịch sử hơn 20 năm và tuân theo giấy phép GPL-2 Có thể dùng trong nhiều môi trường như Angular, React, Vue Có dịch vụ cộng tác đám mây với mô hình tính phí dựa trên số lượt tải Giới hạn Các tính năng quan trọng như Markdown, mention, comment, typography nâng cao, v.v. được cung cấp dưới dạng plugin trả phí Thiếu tài liệu về cách thao tác tài liệu ở phía máy chủ Cộng tác thời gian thực Ngoài giải pháp cộng tác độc quyền của TinyMCE thì không có cách nào khác được công khai Ưu điểm Mặc định đã cung cấp bộ tính năng rất phong phú Tương thích với nhiều framework Nhược điểm Tính năng cộng tác phụ thuộc vào dịch vụ Tiny Cloud Giấy phép GPL-2 có thể là ràng buộc với một số người dùng Một số tính năng được cung cấp theo mô hình tính phí dựa trên mức sử dụng Tóm tắt so sánh các trình soạn thảo ProseMirror Framework: Vanilla Collaboration: Yjs Comments: Không cung cấp (có ví dụ) Mentions: Có thể dùng plugin Suggestion Server-side editing: Có thể chỉnh sửa tài liệu trên Node.js bằng prosemirror-state và prosemirror-model License: MIT GitHub Stars: ⭐ 7.8k Tiptap Framework: Vanilla, React, Vue, Svelte Collaboration: Liveblocks, Tiptap Cloud, Yjs Comments: Có thể dùng ngay không cần cấu hình nhờ tích hợp với Liveblocks, có thể tùy biến Mentions: Có thể dùng ngay không cần cấu hình nhờ tích hợp với Liveblocks, có thể tùy biến Server-side editing: Có thể thông qua ProseMirror hoặc gói Node.js ProseMirror của Liveblocks License: MIT GitHub Stars: ⭐ 20k Remirror Framework: React Collaboration: Yjs Comments: Có Mentions: Có Server-side editing: Có thể thông qua ProseMirror hoặc gói Node.js ProseMirror của Liveblocks License: MIT GitHub Stars: ⭐ 2.8k BlockNote Framework: React Collaboration: Yjs Comments: Có thể thông qua Liveblocks hoặc ví dụ tùy chỉnh Mentions: Có Server-side editing: Có thể thông qua ProseMirror hoặc gói Node.js ProseMirror của Liveblocks License: MPL 2 GitHub Stars: ⭐ 7.1k Lexical Framework: Vanilla, React, iOS, và khác Collaboration: Liveblocks, Yjs Comments: Có thể dùng ngay không cần cấu hình khi tích hợp với Liveblocks, có thể tùy biến Mentions: Có thể dùng ngay không cần cấu hình khi tích hợp với Liveblocks, có thể tùy biến Server-side editing: Có thể thông qua Lexical hoặc gói Node.js Lexical của Liveblocks License: MIT GitHub Stars: ⭐ 20k Slate Framework: Vanilla, React Collaboration: Yjs Comments: Không cung cấp (có ví dụ) Mentions: Có ví dụ Server-side editing: Không cung cấp License: MIT GitHub Stars: ⭐ 30k Plate Framework: Chỉ dành cho React Collaboration: Hocuspocus (Yjs) Comments: Có Mentions: Có Server-side editing: Có License: MIT GitHub Stars: ⭐ 13k Quill Framework: Vanilla Collaboration: Yjs Comments: Không cung cấp (có ví dụ) Mentions: Có thể dùng thư viện bên thứ ba Server-side editing: Không cung cấp License: BSD-3 GitHub Stars: ⭐ 45k Editor.js Framework: Vanilla Collaboration: Không hỗ trợ (có ví dụ bên thứ ba) Comments: Không cung cấp (có thư viện bên thứ ba) Mentions: Không cung cấp (có ví dụ) Server-side editing: Không cung cấp License: Apache 2 GitHub Stars: ⭐ 28k CKEditor Framework: Vanilla, React, Vue, Angular Collaboration: Tích hợp với CKEditor Cloud Comments: Có Mentions: Có Server-side editing: Có License: GPL-2+ GitHub Stars: ⭐ 8.8k TinyMCE Framework: Vanilla, React, Vue, Angular, và khác Collaboration: Tích hợp với Tiny Cloud Comments: Tích hợp với Tiny Cloud Mentions: Có Server-side editing: Không cung cấp License: GPL-2+ GitHub Stars: ⭐ 15k

(liveblocks.io)

65 điểm bởi xguru 2025-02-10 | 14 bình luận | Chia sẻ qua WhatsApp

Trình soạn thảo rich text (WYSIWYG), vốn là thành phần thiết yếu của các ứng dụng ngày nay, đang được sử dụng phổ biến trong những dịch vụ như Linear, Notion và Google Docs
Liveblocks đã phân tích nhiều trình soạn thảo phổ biến trong suốt một năm qua, đồng thời tổng hợp ưu và nhược điểm của từng trình soạn thảo
Các trình soạn thảo nhìn chung được chia thành hai nhóm: “core” và “battery-included”
Nếu chỉ cần một trình soạn thảo đơn giản, nên chọn phương án gọn nhẹ; còn nếu muốn xây dựng trình soạn thảo phức tạp với nhiều tính năng cộng tác, hãy cân nhắc giải pháp có khả năng mở rộng cao
Nhìn chung, lựa chọn an toàn nhất là Tiptap, được đánh giá là có sự cân bằng tốt giữa bộ tính năng phong phú và mức độ can thiệp không quá áp đặt
Cộng tác
- Chúng tôi (Liveblocks) đã tập trung vào các tính năng cộng tác, và với hầu hết trình soạn thảo, có thể triển khai cộng tác thời gian thực thông qua thư viện CRDT Yjs
- Khi dùng Yjs, cần có một dịch vụ backend để lưu trữ tài liệu và duy trì kết nối thời gian thực
- Liveblocks cung cấp backend Yjs tổng quát có thể dùng với nhiều trình soạn thảo hỗ trợ Yjs, đồng thời cũng có giải pháp tích hợp dành cho Tiptap và Lexical
- Một số trình soạn thảo cũng sử dụng giải pháp riêng dựa trên OT (Operational Transform) hoặc dịch vụ cloud mã nguồn đóng
Lưu ý trước khi bắt đầu
- Bài viết loại trừ các trình soạn thảo đã ngừng bảo trì như Draft.js, các trình soạn thảo chỉ có cộng đồng nhỏ, hoặc trình soạn thảo nguồn riêng tư như Froala
- Khả năng truy cập (a11y) ở hầu hết trình soạn thảo đều cần thêm công sức triển khai, vì vậy nên tham khảo tài liệu của từng trình soạn thảo

Tiptap

Đây là trình soạn thảo chạy trên ProseMirror, giúp trừu tượng hóa sự phức tạp của ProseMirror để cải thiện trải nghiệm phát triển
Phần lớn được cung cấp theo giấy phép MIT, và có thể dùng ngay tính năng cộng tác thời gian thực thông qua Tiptap Cloud hoặc Liveblocks
Dù có nhiều tính năng, nó được thiết kế theo cấu trúc có thể tree-shaking, nên kích thước bundle lõi có thể nhỏ hơn Quill, Slate và Lexical
Mở rộng
- Tiptap được thiết kế để dễ thêm node, mark, command và extension đơn giản
- Khi cần, có thể override hành vi của extension hiện có để tùy biến theo ý muốn
- Một số extension “pro” được cung cấp dưới dạng trả phí
Tùy biến nâng cao
- Có thể sẽ cần trực tiếp xử lý cấu trúc của ProseMirror
- Cần một chút thời gian để làm quen với các lớp trừu tượng riêng của Tiptap như command chain
- Mô hình dữ liệu dựa trên schema; phần lớn được tạo tự động, nhưng với tính năng nâng cao thì cũng có thể phải thao tác trực tiếp với schema
Hạn chế (Drawbacks)
- Có thể gây nhầm lẫn về hướng dẫn vì phải tham chiếu qua lại giữa tài liệu ProseMirror và tài liệu Tiptap
- Nội dung liên quan đến khả năng truy cập (a11y) phụ thuộc khá nhiều vào người triển khai
- Nếu duyệt trạng thái tài liệu không cần thiết trong lúc transaction, hiệu năng có thể bị giảm
Thay đổi phía server
- Bản thân Tiptap không giúp việc thao tác tài liệu ở phía server trở nên dễ dàng
- Cần cân nhắc xử lý trực tiếp bằng ProseMirror hoặc sửa trực tiếp tài liệu JSON
- Liveblocks cung cấp thư viện giúp việc chỉnh sửa tài liệu ProseMirror dễ hơn
Cộng tác thời gian thực
- Tiptap có extension cung cấp khả năng cộng tác thời gian thực bằng Yjs
- Có thể tích hợp với nhiều giải pháp cloud như Tiptap Cloud và Liveblocks
- Liveblocks Text Editor còn bổ sung nhiều tính năng ngoài cộng tác thời gian thực như hiển thị con trỏ, bình luận, nhắc tên và lịch sử phiên bản
Ưu điểm (Pros)
- Tài liệu hướng dẫn rất tốt
- Khả năng cộng tác thời gian thực xuất sắc
- Độc lập với framework và có package riêng cho React
- Khả năng mở rộng cao
- Có thể tích hợp với Liveblocks hoặc Tiptap Cloud
Nhược điểm (Cons)
- Hiệu năng có thể giảm nếu không tuân theo cách sử dụng tối ưu
- Cần học cấu trúc nội bộ của ProseMirror để phát triển tính năng nâng cao
- Mặc định còn thiếu khả năng chỉnh sửa headless phía server

BlockNote

BlockNote là trình soạn thảo dạng block mở rộng từ Tiptap và ProseMirror, cung cấp các tính năng kiểu Notion
Do chủ yếu được phát triển xoay quanh React, nên khó tận dụng các UI component của nó trong framework khác
Có thể sử dụng thuận tiện vì những tính năng cần thiết như slash menu và floating toolbar đã được tích hợp sẵn
Hạn chế
- Dù bản thân BlockNote là mã nguồn mở, một số tính năng như exporter docx và PDF yêu cầu gói thuê bao trả phí
Cộng tác thời gian thực
- Hỗ trợ tính năng cộng tác dựa trên Yjs và Liveblocks
- Sắp chính thức cung cấp tích hợp với Liveblocks
Ưu điểm
- Dựa trên Tiptap và ProseMirror đã được kiểm chứng về độ ổn định
- Cung cấp tính năng cộng tác thời gian thực với Yjs và Liveblocks
- Có sẵn API chỉnh sửa dạng block và UI component
Nhược điểm
- Chủ yếu được thiết kế riêng cho React
- Kích thước bundle lớn hơn so với các trình soạn thảo cơ bản

Lexical

Đây là trình soạn thảo được Facebook (Meta) hậu thuẫn và đang thu hút sự quan tâm lớn
Sau khi Liveblocks phát triển các extension như bình luận, nhắc tên, lịch sử phiên bản và cộng tác thời gian thực trong vài tháng, cảm nhận chung là nó vẫn còn ở giai đoạn đầu
Hiện vẫn chưa đạt bản 1.0 và đang tiếp tục được cập nhật rất nhanh
Hạn chế
- Không có tính năng “pure decorations”, nên để triển khai các tính năng như hiển thị con trỏ, phải chồng riêng phần tử DOM lên trên trình soạn thảo
- Hỗ trợ cộng tác Yjs cơ bản hiện vẫn còn yếu trong việc xử lý các edge case
- Có vấn đề hardcode tên root node, khiến khó dùng đồng thời nhiều trình soạn thảo trong cùng một tài liệu
Cộng tác thời gian thực
- Nếu không dùng package Liveblocks, việc triển khai cộng tác trên Lexical có độ khó cao
- Trong ví dụ StickyNotes, họ lách qua hạn chế này bằng cách dùng tài liệu và kết nối socket riêng cho từng root node khi tạo nhiều root node
- Các vấn đề đang liên tục được giải quyết nhờ tốc độ phát triển nhanh
Mở rộng Lexical
- Lexical quản lý dữ liệu thông qua cấu trúc phân cấp node
- Có thể tạo node riêng bằng cách kế thừa 4 loại node lõi
- Có thể tăng tốc phát triển thông qua LexicalComposer và package @lexical/react dành riêng cho React
- Có thể dùng package @lexical/headless để chạy Lexical ở backend mà không cần DOM
Thay đổi phía server
- Có thể chỉnh sửa tài liệu Lexical ở phía server, và Liveblocks cung cấp thư viện giúp đơn giản hóa việc này
Ưu điểm
- Hỗ trợ cộng tác thời gian thực bằng Yjs
- Độc lập với framework và có package riêng cho React
- Hỗ trợ Liveblocks tích hợp với bình luận, nhắc tên và lịch sử phiên bản
- Được Meta hậu thuẫn, phát triển rất năng động và có cộng đồng quy mô lớn
Nhược điểm
- Tính năng cộng tác thời gian thực với Yjs có thể phát sinh một số lỗi nếu không tự xử lý các edge case
- Thiếu tính năng pure decorations và cần xử lý vòng qua DOM cho các tính năng nâng cao
- Kích thước package lõi lớn hơn so với Tiptap và Slate

Slate

Framework trình soạn thảo có thể tùy biến, đang được sử dụng tại Discord, Grafana, Sanity.io, Slite và nhiều nơi khác
Liveblocks chọn Slate làm mặc định cho trình soạn thảo bình luận của mình
Cấu trúc dữ liệu đơn giản, có thể kiểm soát toàn diện và có thể dùng linh hoạt ngoài React
Mở rộng Slate
- Có thể mở rộng Slate thông qua nhiều ví dụ và tài liệu
- Hệ sinh thái plugin còn hạn chế, nhưng việc tự triển khai không quá khó
- Có một dự án tên là Plate như một dạng mở rộng hơn
Giới hạn
- Kích thước bundle hơi lớn hơn Tiptap
- Ít tính năng tích hợp sẵn nên sẽ có những phần phải tự triển khai
Cộng tác thời gian thực
- Có thể triển khai cộng tác thời gian thực cho tài liệu Slate bằng slate-yjs, @liveblocks/yjs, v.v.
Ưu điểm
- Hỗ trợ tài liệu rất tốt
- Hỗ trợ cộng tác thời gian thực với Yjs
- Độc lập với framework và cung cấp package riêng cho React
- Khả năng mở rộng cao
Nhược điểm
- Kích thước bundle hơi lớn hơn một chút so với Tiptap
- Thiếu tính năng có sẵn

Quill

Trình soạn thảo từng được sử dụng trong Slack, LinkedIn, Figma, Zoom, Miro, Airtable và nhiều nơi khác
Từng chững lại một thời gian, nhưng đã sôi động trở lại sau khi phát hành phiên bản 2 vào tháng 4/2024 với việc viết lại bằng TypeScript
Sử dụng mô hình tài liệu riêng tên là Parchment, là một khái niệm tương tự schema của ProseMirror
Giới hạn
- Không có tính năng pure decoration như Lexical, nên với các tính năng như tô sáng màu hoặc con trỏ cộng tác thì phải chồng thêm phần tử DOM riêng
- Nhiều plugin cho Quill 2 vẫn chưa được cập nhật
- Hoạt động cộng đồng có thể ít sôi nổi hơn so với các trình soạn thảo khác
Cộng tác thời gian thực
- Có thể triển khai cộng tác thời gian thực bằng cách kết hợp Yjs và y-quill
- Backend riêng có thể dùng nhiều cách khác nhau như Liveblocks
Ưu điểm
- Hỗ trợ tài liệu rất tốt
- Độc lập với framework và cung cấp package riêng cho React
- Hỗ trợ cộng tác thời gian thực với Yjs
- Sử dụng định dạng delta đơn giản
Nhược điểm
- Thiếu tính năng có sẵn và plugin vẫn chưa được cập nhật đầy đủ cho Quill 2
- Thiếu tính năng pure decoration
- Phát triển kém sôi động hơn tương đối và cộng đồng nhỏ hơn
- Kích thước bundle lớn gấp đôi so với Tiptap hoặc Slate

ProseMirror

Framework cốt lõi làm nền tảng cho nhiều trình soạn thảo như Tiptap, Remirror, BlockNote
Bảo đảm hoạt động ổn định nhờ cấu trúc rõ ràng gồm schema, state, view, transform, v.v.
Nếu tự xây dựng trình soạn thảo ngay từ đầu chỉ bằng core library thì lượng mã thường sẽ khá nhiều
Giới hạn
- Tài liệu nêu rõ rằng ngay cả để tạo một trình soạn thảo đơn giản cũng cần một lượng mã đáng kể
- Khuyến nghị sử dụng các wrapper cấp cao hơn như Tiptap, Remirror, BlockNote
- Độ dốc học tập khá cao, nhưng tài liệu và cộng đồng được tổ chức tốt
Ưu điểm
- Cung cấp tài liệu rất tốt cùng cộng đồng năng động
- Hỗ trợ cộng tác thời gian thực với Yjs
Nhược điểm
- Cần nhiều mã để triển khai ví dụ cơ bản
- Thiếu tính năng có sẵn
- Đường cong học tập tương đối dốc

Plate

Dựa trên Slate, là dự án “kèm sẵn pin” cung cấp nhiều plugin phong phú như tính năng AI, mention, comment, v.v.
Linh hoạt vì có thể chỉ chọn các tính năng cần dùng
Cũng cung cấp template trả phí và được thiết kế riêng cho React
Giới hạn
- Cộng tác hiện chỉ chính thức hỗ trợ Hocuspocus, và cần tự triển khai để kết nối với các backend Yjs khác (ví dụ: Liveblocks)
- Vì chỉ dành cho React nên khả năng tương thích với framework khác có thể bị hạn chế
- Do có nhiều tính năng nên kích thước bundle có xu hướng lớn hơn
Ưu điểm
- Cung cấp thư viện plugin đa dạng
- Hỗ trợ chỉnh sửa phía máy chủ
- Cung cấp template giúp khởi đầu nhanh
Nhược điểm
- Được thiết kế riêng cho React
- Tính năng cộng tác chỉ dùng được thông qua Hocuspocus
- Kích thước bundle lớn hơn so với các trình soạn thảo cơ bản

Remirror

Trình soạn thảo dựa trên ProseMirror, tương tự Tiptap nhưng theo đuổi cách tiếp cận có sẵn nhiều thứ hơn
Hỗ trợ hơn 30 plugin, React hook, quốc tế hóa (i18n), khả năng truy cập (a11y), v.v.
Là mã nguồn mở theo giấy phép MIT và cũng cung cấp tính năng cộng tác
Giới hạn
- Cộng đồng nhỏ hơn Tiptap và tốc độ cập nhật có thể chậm hơn
- Có nhiều tính năng dành riêng cho React nên trong môi trường khác có thể gặp hạn chế
- Kích thước bundle khá lớn
Cộng tác thời gian thực
- Remirror hỗ trợ cộng tác Yjs và Liveblocks thông qua YjsExtension
Ưu điểm
- Hỗ trợ tài liệu rất tốt
- Cung cấp thư viện plugin đa dạng
- Hỗ trợ tính năng cộng tác với Yjs và Liveblocks
Nhược điểm
- Được thiết kế riêng cho React
- Kích thước bundle lớn hơn
- Tần suất cập nhật thấp và cộng đồng nhỏ

Editor.js

Trình soạn thảo rich text hỗ trợ chỉnh sửa theo khối, có nhiều plugin và cộng đồng lớn
Có cấu trúc dữ liệu gồm block, inline và tune
Không phụ thuộc framework, đồng thời tích hợp sẵn nhiều tiện ích như tooltip
Giới hạn
- Không có hỗ trợ cộng tác thời gian thực chính thức; đã có một số PR thử nghiệm nhưng tình trạng bảo trì vẫn chưa rõ ràng
- Ngay cả package cơ bản cũng khá nặng
Cộng tác thời gian thực
- Không được hỗ trợ chính thức
Ưu điểm
- Cung cấp thư viện plugin phong phú với nhiều tính năng
- Hỗ trợ tích hợp do cộng đồng xây dựng với nhiều CMS và backend framework
Nhược điểm
- Kích thước bundle lớn hơn
- Không có tính năng cộng tác thời gian thực

CKEditor

Trình soạn thảo có lịch sử hơn 20 năm, và phiên bản hiện tại (5) cung cấp kiến trúc hiện đại cùng nhiều tính năng phong phú
Hỗ trợ nhiều framework như Angular, React, Vue, Next
Được phát hành theo giấy phép GPL-2; trong một số trường hợp yêu cầu mã nguồn mở, còn dùng thương mại thì cần mua giấy phép riêng
Giới hạn
- Phần lớn plugin là trả phí, và tính năng cộng tác cũng chỉ dùng được với dịch vụ đám mây của CKEditor
- Giấy phép GPL-2 và mô hình tính phí dựa trên số lượt tải có thể là rào cản với nhiều người dùng
Cộng tác thời gian thực
- Không cung cấp giải pháp cộng tác nào khác ngoài dịch vụ đám mây độc quyền của CKEditor
Ưu điểm
- Mặc định đã cung cấp bộ tính năng rất phong phú
- Tương thích với nhiều framework
Nhược điểm
- Tính năng cộng tác phụ thuộc vào dịch vụ đám mây của CKEditor
- Giấy phép GPL-2 có thể là ràng buộc với một số người dùng
- Một số tính năng được cung cấp theo mô hình tính phí dựa trên mức sử dụng

TinyMCE

Tương tự CKEditor, đây là trình soạn thảo có lịch sử hơn 20 năm và tuân theo giấy phép GPL-2
Có thể dùng trong nhiều môi trường như Angular, React, Vue
Có dịch vụ cộng tác đám mây với mô hình tính phí dựa trên số lượt tải
Giới hạn
- Các tính năng quan trọng như Markdown, mention, comment, typography nâng cao, v.v. được cung cấp dưới dạng plugin trả phí
- Thiếu tài liệu về cách thao tác tài liệu ở phía máy chủ
Cộng tác thời gian thực
- Ngoài giải pháp cộng tác độc quyền của TinyMCE thì không có cách nào khác được công khai
Ưu điểm
- Mặc định đã cung cấp bộ tính năng rất phong phú
- Tương thích với nhiều framework
Nhược điểm
- Tính năng cộng tác phụ thuộc vào dịch vụ Tiny Cloud
- Giấy phép GPL-2 có thể là ràng buộc với một số người dùng
- Một số tính năng được cung cấp theo mô hình tính phí dựa trên mức sử dụng

Tóm tắt so sánh các trình soạn thảo

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: Không cung cấp (có ví dụ)
- Mentions: Có thể dùng plugin Suggestion
- Server-side editing: Có thể chỉnh sửa tài liệu trên Node.js bằng prosemirror-state và prosemirror-model
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: Có thể dùng ngay không cần cấu hình nhờ tích hợp với Liveblocks, có thể tùy biến
- Mentions: Có thể dùng ngay không cần cấu hình nhờ tích hợp với Liveblocks, có thể tùy biến
- Server-side editing: Có thể thông qua ProseMirror hoặc gói Node.js ProseMirror của Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: Có
- Mentions: Có
- Server-side editing: Có thể thông qua ProseMirror hoặc gói Node.js ProseMirror của Liveblocks
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: Có thể thông qua Liveblocks hoặc ví dụ tùy chỉnh
- Mentions: Có
- Server-side editing: Có thể thông qua ProseMirror hoặc gói Node.js ProseMirror của Liveblocks
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, và khác
- Collaboration: Liveblocks, Yjs
- Comments: Có thể dùng ngay không cần cấu hình khi tích hợp với Liveblocks, có thể tùy biến
- Mentions: Có thể dùng ngay không cần cấu hình khi tích hợp với Liveblocks, có thể tùy biến
- Server-side editing: Có thể thông qua Lexical hoặc gói Node.js Lexical của Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: Không cung cấp (có ví dụ)
- Mentions: Có ví dụ
- Server-side editing: Không cung cấp
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: Chỉ dành cho React
- Collaboration: Hocuspocus (Yjs)
- Comments: Có
- Mentions: Có
- Server-side editing: Có
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: Không cung cấp (có ví dụ)
- Mentions: Có thể dùng thư viện bên thứ ba
- Server-side editing: Không cung cấp
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: Không hỗ trợ (có ví dụ bên thứ ba)
- Comments: Không cung cấp (có thư viện bên thứ ba)
- Mentions: Không cung cấp (có ví dụ)
- Server-side editing: Không cung cấp
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: Tích hợp với CKEditor Cloud
- Comments: Có
- Mentions: Có
- Server-side editing: Có
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, và khác
- Collaboration: Tích hợp với Tiny Cloud
- Comments: Tích hợp với Tiny Cloud
- Mentions: Có
- Server-side editing: Không cung cấp
- License: GPL-2+
- GitHub Stars: ⭐ 15k

14 bình luận

bingo992000 2025-03-15

Việc áp dụng QuillJS vào dự án SvelteKit khá bất tiện. Với React thì nhờ có thư viện nên vẫn dễ hơn phần nào.

firea32 2025-02-17

Cuối cùng thì tiptap là lựa chọn tốt nhất vì khá thuận tiện cho việc phát triển custom component trong React.

vb6ko 2025-02-11

Tôi cũng đã tìm hiểu gần đây, cảm ơn bạn đã tổng hợp rất rõ ràng.

Với tiếng Hàn của chúng tôi, một số editor có lỗi vặt khi nhập trên di động.
Khi nhập <동해물과> thì lại thành <ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ>
hoặc khi nhập <동해물과> thì lại thành <동동해해물물과과>.
(Tham khảo: https://github.com/ckeditor/ckeditor5/issues/13693)

Tôi không dùng framework như react, vue, và cũng ngại mua license editor nên phạm vi lựa chọn rất hẹp.

Vì vậy ngoài các nội dung trong bài, tôi còn xem thêm 4 lựa chọn dưới đây.

https://trix-editor.org/
Đây là editor do 37signals, công ty do DHH của Ruby on Rails dẫn dắt, tạo ra. Nó được làm bằng JavaScript thuần (nghĩa là không dùng React hay tương tự), và việc tùy biến cũng không quá khó. (Ví dụ tự động chuyển sang YouTube embed khi dán link YouTube)

https://ui.toast.com/tui-editor
Đây là công cụ do nhncloud tạo ra.

https://naver.github.io/smarteditor2/demo/
Đây là Naver SmartEditor2. Dù khá cổ điển, nhưng với các dịch vụ hướng tới người Hàn Quốc thì tôi nghĩ nó có thể mang lại cảm giác quen thuộc được yêu thích.

https://summernote.org/
Đây là Summernote do một người Hàn Quốc phát triển, và tôi đã chọn cái này. Khi áp theme vào thì trông khá hiện đại. Các tính năng mà người Hàn Quốc thường mong đợi đã được built-in nên rất tiện. (Như chuyển đổi nhúng link YouTube nói trên) Tuy nhiên tôi muốn trang trí bằng tailwind prose, nhưng vì nó có sẵn typography style riêng nên vẫn phải chỉnh tay khá nhiều.

teddy418 2025-02-11

Tôi muốn đính chính một điểm ở công cụ số 2: tui editor không phải là dự án do Toss phát triển, mà là một dự án mã nguồn mở đang được NHN Cloud phát triển.

vb6ko 2025-02-12

Đúng vậy, xin đính chính lại (tôi không biết chỗ sửa ở đâu.. )

moderator 2025-02-16

Đã sửa thành nhncloud.

carnoxen 2025-02-14

Vốn dĩ trang này không có chức năng chỉnh sửa. Chỉ có quản trị viên mới có thể sửa.

carnoxen 2025-02-10

Dù không có trong đây, tôi vẫn mong WordPress Gutenberg được phát hành như một thư viện độc lập.

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
Có đề cập đến, nhưng so với những thứ được giới thiệu trong bài thì các trường hợp ứng dụng của nó rõ ràng là ít hơn hẳn.

carnoxen 2025-02-11

Ồ! Hóa ra Automattic đã lưu trữ nó dưới một cái tên khác. Đây là tính năng tôi thích nhất khi công ty dùng WordPress.

winterjung 2025-02-10

Liên kết là blog của liveblocks.io, nhưng URL xem trước lại hiện là (github.com/US-Artificial-Intelligence) nhỉ?

xguru 2025-02-10

Khi đăng bài, tôi đã giữ nguyên địa chỉ của bài trước nên đã phát sinh vấn đề trong lúc chỉnh sửa. Tôi đã sửa lại rồi.

tsboard 2025-02-10

Tôi đã lần đầu áp dụng và dùng tiptap trong một dự án, và so với các editor truyền thống khác thì tài liệu, tính năng lẫn cách triển khai đều rất tốt nên tôi đang dùng khá hài lòng. Cảm giác chỉ lấy đúng những gì cần rồi tự triển khai UI theo đúng ý mình để dùng rất thích, nhưng có một phần hơi quá sức là khối lượng công việc để tùy biến theo đúng ý đó thực sự không hề nhỏ...!

babadudu 2026-03-30

TinyMCE rất tốt