Trình soạn thảo văn bản giàu định dạng Quill v2 ra mắt

 (quilljs.com)
2 điểm bởi GN⁺ 2024-04-20 | 1 bình luận | Chia sẻ qua WhatsApp
  • Quill 2.0 là trình soạn thảo WYSIWYG mã nguồn mở miễn phí dành cho web hiện đại, cho phép tích hợp trực tiếp chức năng soạn thảo văn bản giàu định dạng vào sản phẩm
  • Dựa trên kiến trúc mô-đun và API giàu khả năng biểu đạt, có thể bắt đầu từ phần lõi cơ bản rồi tùy chỉnh trình soạn thảo theo yêu cầu
  • Nhà phát triển có thể truy cập chi tiết vào nội dung, thay đổi và sự kiện của trình soạn thảo, đồng thời có thể kỳ vọng hành vi nhất quán nhờ dùng JSON cho đầu vào và đầu ra
  • Hỗ trợ các trình duyệt hiện đại trên máy tính để bàn, máy tính bảng và điện thoại, với mục tiêu cung cấp cùng một hành vi và HTML được tạo ra trên nhiều nền tảng
  • Có thể mở rộng phạm vi áp dụng từ các dự án nhỏ đến doanh nghiệp Fortune 500, nên sau khi đưa vào một trình soạn thảo đơn giản, có thể mở rộng theo sự tăng trưởng của sản phẩm

Quill 2.0 và cách bắt đầu

  • Quill 2.0 đã ra mắt; có thể xem nội dung phát hành trong bài công bố riêng: Quill 2.0 is released!
  • Quill là trình soạn thảo WYSIWYG mã nguồn mở miễn phí được xây dựng cho web hiện đại
  • Ví dụ cơ bản tải quill.snow.css và quill.js từ CDN, rồi tạo trình soạn thảo bằng new Quill('#editor', ...)
    • Phiên bản trong ví dụ là quill@2.0.3
    • Chỉ định #toolbar trong modules.toolbar và dùng theme snow
  • Có thể thử trực tiếp API trong console dành cho nhà phát triển của trình duyệt

Tùy chỉnh và phạm vi áp dụng

  • Quill có thể điều chỉnh trình soạn thảo theo yêu cầu thông qua kiến trúc mô-đun và API
  • Nhà phát triển có thể truy cập chi tiết vào nội dung, thay đổi và sự kiện của trình soạn thảo bằng API đơn giản
  • Sử dụng JSON cho cả đầu vào lẫn đầu ra để cung cấp hành vi nhất quán và có tính xác định
  • Hỗ trợ các trình duyệt hiện đại trên máy tính để bàn, máy tính bảng và điện thoại, đồng thời cung cấp cùng một hành vi và HTML được tạo ra giữa các nền tảng
  • Có thể dùng cho cả dự án nhỏ lẫn doanh nghiệp Fortune 500; có thể bắt đầu với Quill core rồi tùy chỉnh hoặc thêm phần mở rộng khi cần
  • Số GitHub Star hiển thị là 47.204

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-04-20
Ý kiến trên Hacker News

  • Ở công ty trước, tôi từng xây một hệ thống cho phép người dùng nhập văn bản có định dạng vào ô văn bản Quill, rồi lưu vào cơ sở dữ liệu ở định dạng Delta
    Sau đó, một thành viên khác trong nhóm lấy nội dung đó vào một plugin InDesign, đọc các định dạng đã áp dụng trong Quill và áp dụng lại thành các style phía InDesign
    Luồng làm việc là nhân viên tuyến đầu nhập các thông báo pháp lý trên báo, rồi đội sản xuất chuyển sang InDesign để dàn trang in; nếu lưu HTML như hầu hết các trình soạn thảo khác thì việc này đã khó hơn nhiều, còn định dạng Quill Delta đã làm nó dễ hơn đáng kể
    Vài năm rồi tôi không nghe đến hay dùng Quill, nên rất vui khi thấy nó vẫn còn sống

  • Ghi chú phát hành: https://github.com/quilljs/quill/releases/tag/v2.0.0
    Bài công bố: https://slab.com/blog/announcing-quill-2-0/
    Tôi đã dùng Quill khá nhiều; nó dễ tích hợp, định dạng JSON Delta cũng khá ổn, và cấu trúc tương đối đơn giản
    Tuy nhiên mỗi lần dùng lại nghĩ “hay là cứ dùng ProseMirror cho rồi?”
    Khi cần nhanh chóng có tính năng chỉnh sửa, Quill là một giải pháp tạm thời tốt, nhưng nếu yêu cầu của tính năng đó phình to, tôi cứ tự tính trong đầu rằng rồi sẽ cần một kế hoạch migration vào lúc nào đó

    • Sẽ tốt hơn nếu đổi liên kết gửi bài thành [1], vì thực ra nội dung là về phiên bản mới
      Mặt khác, đôi khi tôi tự hỏi tại sao không thể chuẩn hóa trình soạn thảo văn bản có định dạng
      [1] https://slab.com/blog/announcing-quill-2-0/
    • Tôi đang xem xét ProseMirror, chủ yếu thông qua tiptap2, có vẻ là một lớp bọc khá tốt cho nó
      Nhưng việc chuyển sang thực sự thì khá nặng nề, nên tôi tò mò về trải nghiệm của những người khác
    • Ở công ty, chúng tôi phải triển khai soạn thảo văn bản có định dạng nên đã đánh giá nhiều lựa chọn; Quill là một trong những ứng viên ban đầu, nhưng cuối cùng chúng tôi chọn ProseMirror
      Lý do chọn là vì nó ở mức rất thấp và có tài liệu khổng lồ, cảm giác hơi gợi nhớ đến D3
      Sau đó chúng tôi tạo node tùy chỉnh, command tùy chỉnh, toolbar tùy chỉnh, tích hợp với Markdown và các plugin Markdown tùy chỉnh; chỉ cần một ít mã kết nối là cũng gắn với Vue khá gọn
      Cho đến nay tôi rất hài lòng với lựa chọn ProseMirror

  • Tôi không biết có kỳ lạ không khi mình có quan điểm quá mạnh về việc phím Return nên được xử lý thế nào trong trình soạn thảo văn bản
    Trong văn bản thuần, Return là xuống dòng mới; trong văn bản có định dạng, Return phải là đoạn văn mới
    Nếu muốn xuống dòng mới thì dùng Shift+Return
    Ở các phiên bản trước đây, đây là một vấn đề lớn, còn hiện giờ tôi không biết có thể tùy biến hành vi này đến mức nào
    Tôi thừa nhận mình quá để tâm đến chuyện này, nhưng TipTap thì hợp với tôi

    • Việc thiết lập nên dễ, nhưng tôi không nghĩ hành vi đó nên là mặc định
      Vì nó không phổ biến hơn, và chỉ hoạt động khi nhấn Return trong một số loại block nhất định
      Shift+Return cũng không dùng được trên di động, và việc phải biết một tổ hợp phím ẩn để có được hành vi mong muốn cũng phiền
      Trình soạn thảo có định dạng của Reddit dùng kiểu này nên tôi thường phải vật lộn với nó
      Rốt cuộc chỉ là để khỏi phải nhấn Return hai lần
      Tôi hiểu sự gọn gàng của việc luôn giữ người dùng trong đoạn văn và để họ chủ động chọn xuống dòng bằng Shift+Return, nhưng trong một lĩnh vực khó nhằn như trình soạn thảo văn bản có định dạng, tôi sẽ ưu tiên trải nghiệm người dùng hơn sự gọn gàng
    • Hoàn toàn đồng ý. Thậm chí hỗ trợ Shift+ đó cũng không ổn định, nhưng có lẽ tôi vẫn có thể nhượng bộ
      Cách xử lý đoạn văn trong ví dụ của Quill trông khá gượng
    • Nếu tôi đọc đúng thì có vẻ giống hành vi của ô nhập văn bản trong Confluence/JIRA

  • Tài liệu rất tuyệt. Ước gì mọi dự án mã nguồn mở đều có một trang như “Why Quill”[1], để có thể nhanh chóng hiểu triết lý của dự án và xem nó có phù hợp với mục tiêu của mình không
    Tốt hơn nữa là có cả nội dung kiểu “Why Not Quill”, để nhanh chóng biết nó không phù hợp trong những tình huống nào
    Dự án nào cũng có đánh đổi, nên nếu truyền đạt điều đó trực tiếp và rõ ràng thì người dùng sẽ có trải nghiệm tốt hơn
    [1] https://quilljs.com/docs/why-quill

  • Chỉ nhìn liên kết thì không rõ, nhưng có lẽ bài được đưa lên vì v2 đã được phát hành 3 ngày trước
    Gần đây tôi còn làm việc với Quill v1 và trải nghiệm khá tệ
    Làm cho bảng hoạt động bằng plugin cũng rất đau khổ, và còn có vấn đề cuộn kỳ lạ
    Tôi hy vọng v2 đã sửa được nhiều thứ, nhưng tôi sẽ tiếp tục dùng TinyMCE, vốn tốt hơn về mặt tính năng

    • Tôi cũng thích TinyMCE nên 6 tháng trước đã thay trình soạn thảo Quill bằng TinyMCE
      Nhưng tôi khó chịu vì dù site dùng JS tĩnh vẫn cần API key, và vài ngày trước họ còn nhanh chóng giảm “mức sử dụng” render trình soạn thảo ở gói miễn phí, điều đó cũng bất tiện [0]
      Tôi tò mò liệu điều đó có phải vấn đề với bạn không
      [0] https://news.ycombinator.com/item?id=40044544

  • Ban đầu tôi không hiểu vì sao Quill lại xuất hiện trở lại, nhưng giờ mới biết phiên bản 2.0 được chờ đợi lâu nay đã phát hành 3 ngày trước
    Xem https://slab.com/blog/announcing-quill-2-0/

    • Tôi nghĩ liên kết này và tiêu đề đó là điểm vào tốt hơn cho chủ đề

  • Tôi từng có một dự án trước đây gặp rắc rối lớn vì dùng Quill
    Cá nhân tôi nghĩ vấn đề là đã không xem xét đủ kỹ các giới hạn của trình soạn thảo so với yêu cầu dự án, nhưng cách tài liệu nhấn mạnh khả năng mở rộng của thư viện cũng có vẻ có thể gây hại
    Nếu ở trong phạm vi giới hạn của nó thì đây là một thư viện tuyệt vời. Ví dụ nên tránh những thứ quá phức tạp như nội dung lồng nhau
    Nếu trang web có một mục kiểu “Why You Should NOT Use Quill?” thì có lẽ sẽ khá hữu ích

  • Tùy trường hợp, nhưng tôi không có ý định dùng lại Quill trong dự án production nữa
    Tôi bắt đầu dùng Quill 1.x khoảng năm 2016 và ban đầu khá thích nó
    Khi tôi tweet rằng mình đang đánh giá Quill, Jason đã chủ động liên hệ và cũng giúp trả lời các câu hỏi liên quan đến triển khai
    Đến năm 2019, tôi gặp một số lỗi, Quill 1.x đang ở chế độ bảo trì, còn 2.0 thì gần như không có tài liệu [1]
    Tôi đã liên hệ với Jason trên Twitter để nắm được đại khái lịch trình [2], nhưng về cơ bản nhận được câu trả lời kiểu bảo tôi biến đi
    Công ty Slab của anh ấy hiện cũng chặn tôi trên Twitter, có lẽ lẽ ra anh ấy định chặn bằng tài khoản cá nhân
    Ai đang xây startup cũng có những ngày căng thẳng, nên có thể thời điểm tôi liên hệ không tốt
    Tôi đoán là anh ấy đang tập trung vào công ty của mình, và dù có đủ thời gian để vừa đủ duy trì Quill cho nhu cầu nội bộ, anh ấy gần như không có dư địa để phát hành nó dưới dạng mã nguồn mở. Nếu vậy thì tôi đã muốn anh ấy nói thẳng như thế hơn
    5 năm sau Quill v2 cuối cùng cũng ra mắt, và tôi mừng vì Slab vẫn còn tồn tại
    Hy vọng họ sẽ có đủ nguồn lực để duy trì Quill công khai trong tương lai, nhưng nếu định dùng trong production thì bạn nên xác nhận mức độ cam kết hỗ trợ đến đâu, và cũng lập kế hoạch cho trường hợp họ ngừng phản hồi
    Nếu Jason có trong thread này thì tôi không có ác cảm gì, chuyện đã qua rồi. Anh có thể bỏ qua hoặc bổ sung góc nhìn của mình
    [1] https://github.com/quilljs/quill/issues/2435
    [2] https://twitter.com/nickbaum/status/1177240103925796865

    • Tôi không có trải nghiệm gì liên quan đến Jason, nhưng đã tốn quá nhiều thời gian đọc mã Quill để vá vòng qua các hành vi kỳ lạ
      Lý do dùng thư viện trình soạn thảo rich text thay vì tự làm chính là để tránh những việc như vậy, nên càng bực hơn
      Tôi không biết v2 thế nào, nhưng mã v1 không được tổ chức tốt cho lắm
      Có cả những tính năng cơ bản mà tôi đã trì hoãn triển khai vì sợ phát sinh cả triệu lỗi nhỏ
      Điểm tốt nhất của Quill chắc chắn là định dạng Delta
      Nhưng với ai muốn nhiều hơn chữ đậm/gạch chân/in nghiêng, tôi sẽ khuyên dùng ProseMirror

  • Các bài liên quan. Còn bài nào nữa không?
    Announcing Quill 1.0 - https://news.ycombinator.com/item?id=12437345 - tháng 9 năm 2016, 82 bình luận
    Quill – A cross browser rich text editor with an API - https://news.ycombinator.com/item?id=10446865 - tháng 10 năm 2015, 47 bình luận
    Quill – An Open Source Rich Text Editor with an API - https://news.ycombinator.com/item?id=7716376 - tháng 5 năm 2014, 60 bình luận

    • Thông báo lần này là về phiên bản 2, có vẻ đã được phát hành vài ngày trước

  • Tôi nhớ khoảng một năm trước có dùng https://github.com/facebook/lexical trong một dự án, và phần lớn chạy tốt ngay từ đầu
    Có lý do nào để ưu tiên Quill hơn không?