เปิดตัว Quill v2 โปรแกรมแก้ไขข้อความแบบ Rich Text

 (quilljs.com)
2 คะแนน โดย GN⁺ 2024-04-20 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Quill 2.0 คือ โปรแกรมแก้ไข WYSIWYG แบบโอเพนซอร์สฟรี สำหรับเว็บสมัยใหม่ ที่ช่วยให้สามารถใส่ความสามารถในการแก้ไขข้อความแบบ rich text ลงในผลิตภัณฑ์ได้โดยตรง
  • ด้วย สถาปัตยกรรมแบบโมดูลาร์ และ API ที่ยืดหยุ่น จึงสามารถเริ่มจากคอร์พื้นฐานแล้วปรับแต่งตัวแก้ไขให้ตรงกับความต้องการได้
  • นักพัฒนาสามารถเข้าถึง เนื้อหา การเปลี่ยนแปลง และอีเวนต์ ของตัวแก้ไขได้อย่างละเอียด และใช้ JSON ทั้งฝั่งรับเข้าและส่งออกเพื่อให้คาดหวังพฤติกรรมที่สม่ำเสมอได้
  • รองรับเบราว์เซอร์รุ่นใหม่บนเดสก์ท็อป แท็บเล็ต และมือถือ โดยมีเป้าหมายเพื่อให้ได้พฤติกรรมและ HTML ที่สร้างขึ้นเหมือนกันในทุกแพลตฟอร์ม
  • สามารถขยายการใช้งานได้ตั้งแต่โปรเจ็กต์ขนาดเล็กไปจนถึงบริษัท Fortune 500 จึงเหมาะกับการเริ่มใช้ตัวแก้ไขแบบง่าย ๆ แล้วค่อยขยายตามการเติบโตของผลิตภัณฑ์

Quill 2.0 และวิธีเริ่มต้นใช้งาน

  • Quill 2.0 เปิดตัวแล้ว และสามารถดูรายละเอียดรีลีสได้จากโพสต์ประกาศแยก: Quill 2.0 is released!
  • Quill เป็น โปรแกรมแก้ไข WYSIWYG แบบโอเพนซอร์สฟรี ที่สร้างมาสำหรับเว็บสมัยใหม่
  • ตัวอย่างพื้นฐานจะโหลด quill.snow.css และ quill.js จาก CDN แล้วสร้างตัวแก้ไขด้วย new Quill('#editor', ...)
    • เวอร์ชันในตัวอย่างคือ quill@2.0.3
    • กำหนด #toolbar ให้กับ modules.toolbar และใช้ snow เป็น theme
  • สามารถลองทดสอบ API ได้โดยตรงจากคอนโซลนักพัฒนาในเบราว์เซอร์

การปรับแต่งและขอบเขตการใช้งาน

  • Quill สามารถปรับตัวแก้ไขให้ตรงกับความต้องการได้ผ่าน สถาปัตยกรรมแบบโมดูลาร์ และ API
  • นักพัฒนาสามารถเข้าถึง เนื้อหา การเปลี่ยนแปลง และอีเวนต์ ของตัวแก้ไขได้อย่างละเอียดผ่าน API ที่เรียบง่าย
  • ใช้ JSON ทั้งสำหรับอินพุตและเอาต์พุต เพื่อให้การทำงานมีความสม่ำเสมอและกำหนดผลลัพธ์ได้แน่นอน
  • รองรับเบราว์เซอร์รุ่นใหม่บนเดสก์ท็อป แท็บเล็ต และมือถือ พร้อมมอบพฤติกรรมและ HTML ที่สร้างขึ้นเหมือนกันข้ามแพลตฟอร์ม
  • ใช้งานได้ทั้งในโปรเจ็กต์ขนาดเล็กและบริษัท Fortune 500 โดยสามารถเริ่มจาก Quill core แล้วค่อยปรับแต่งหรือเพิ่มส่วนขยายตามความต้องการ
  • จำนวน GitHub Star แสดงอยู่ที่ 47,204

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-04-20
ความคิดเห็นบน Hacker News

  • ที่ทำงานเก่า เคยสร้างระบบที่ให้ผู้ใช้ป้อนข้อความแบบ rich text ลงใน กล่องข้อความ Quill แล้วบันทึกลงฐานข้อมูลใน รูปแบบ Delta
    ภายหลังสมาชิกทีมอีกคนดึงเนื้อหานั้นเข้าไปในปลั๊กอิน InDesign อ่านการจัดรูปแบบที่ใช้ใน Quill แล้วนำไปปรับใช้ใหม่เป็นสไตล์ฝั่ง InDesign
    เวิร์กโฟลว์คือเจ้าหน้าที่หน้าร้านป้อนประกาศทางกฎหมายของหนังสือพิมพ์ แล้วทีมผลิตส่งต่องานสำหรับพิมพ์ไปยัง InDesign และรูปแบบ Quill Delta ช่วยให้งานนี้ง่ายขึ้นมาก ซึ่งถ้าบันทึกเป็น HTML เหมือนเอดิเตอร์ส่วนใหญ่คงยากกว่านี้มาก
    ไม่ได้ยินหรือใช้ Quill มาหลายปีแล้ว ดีใจที่ยังอยู่

  • บันทึกการปล่อยเวอร์ชัน: https://github.com/quilljs/quill/releases/tag/v2.0.0
    บทความประกาศ: https://slab.com/blog/announcing-quill-2-0/
    เคยใช้ Quill มาค่อนข้างเยอะ ผสานเข้าระบบได้ง่าย รูปแบบ JSON Delta ก็ค่อนข้างดี และโครงสร้างก็ค่อนข้างเรียบง่าย
    แต่ทุกครั้งที่ใช้ก็จะคิดว่า “ควรใช้ ProseMirror ไปเลยไหม?”
    เวลาต้องการฟีเจอร์แก้ไขอย่างรวดเร็ว Quill เป็นทางออกชั่วคราวที่ดี แต่เมื่อข้อกำหนดของฟีเจอร์นั้นใหญ่ขึ้น ก็อดคำนวณในหัวไม่ได้ว่าสักวันต้องมี แผนการไมเกรต

    • ถ้าเปลี่ยนลิงก์ที่ส่งมาเป็น [1] ได้ก็คงดี เพราะจริง ๆ แล้วเป็นเนื้อหาเกี่ยวกับเวอร์ชันใหม่
      อีกด้านหนึ่ง บางครั้งก็สงสัยว่าทำไมเราถึงทำให้ เอดิเตอร์ rich text เป็นมาตรฐานไม่ได้
      [1] https://slab.com/blog/announcing-quill-2-0/
    • กำลังดู ProseMirror อยู่ โดยหลัก ๆ ดูผ่าน tiptap2 ซึ่งดูเหมือนจะห่อมันไว้ได้ดี
      แต่การย้ายจริง ๆ นั้นรู้สึกหนักใจ และอยากฟังประสบการณ์ของคนอื่น ๆ
    • ที่ทำงานต้องทำระบบแก้ไข rich text จึงพิจารณาตัวเลือกหลายอย่าง และ Quill ก็เป็นหนึ่งในตัวเลือกที่ดูตั้งแต่แรก แต่สุดท้ายเลือก ProseMirror
      เหตุผลที่เลือกคือมันอยู่ในระดับค่อนข้างต่ำมากและมีเอกสารจำนวนมาก ให้ความรู้สึกคล้าย D3 เล็กน้อย
      หลังจากนั้นก็สร้างโหนดแบบกำหนดเอง คำสั่งแบบกำหนดเอง แถบเครื่องมือแบบกำหนดเอง และผสานกับ Markdown รวมถึงปลั๊กอิน Markdown แบบกำหนดเอง และถ้ามีโค้ดเชื่อมเล็กน้อยก็ใช้กับ Vue ได้ค่อนข้างสะอาด
      จนถึงตอนนี้พอใจกับการเลือก ProseMirror มาก

  • ไม่รู้ว่ามันแปลกไหมที่มีความเห็นแรงเกินไปเกี่ยวกับวิธีที่เอดิเตอร์ข้อความควรจัดการกับ ปุ่ม Return
    ในข้อความธรรมดา Return คือขึ้นบรรทัดใหม่ ส่วนใน rich text Return ควรเป็นย่อหน้าใหม่
    ถ้าต้องการขึ้นบรรทัดใหม่ก็ใช้ Shift+Return
    ในเวอร์ชันเก่านี่เป็นปัญหาใหญ่ และตอนนี้ไม่รู้ว่าสามารถปรับแต่งพฤติกรรมนี้ได้แค่ไหน
    ยอมรับว่าผมใส่ใจกับเรื่องนี้มากเกินไป แต่ TipTap ทำได้ตรงใจ

    • การตั้งค่าควรทำได้ง่าย แต่ไม่คิดว่าพฤติกรรมนั้นควรเป็นค่าเริ่มต้น
      เพราะมันไม่ใช่แบบที่พบทั่วไปกว่า และทำงานเฉพาะเมื่อกด Return ในบล็อกบางชนิดเท่านั้น
      Shift+Return ใช้บนมือถือไม่ได้ด้วย และการต้องรู้คีย์ลัดที่ซ่อนอยู่เพื่อให้ได้พฤติกรรมที่ต้องการก็น่ารำคาญ
      เอดิเตอร์ rich text ของ Reddit เป็นแบบนี้ เลยต้องต่อสู้กับมันบ่อย ๆ
      สุดท้ายก็แค่พยายามทำให้ไม่ต้องกด Return สองครั้ง
      เข้าใจความเรียบร้อยของการให้ผู้ใช้อยู่ในย่อหน้าเสมอ และให้เลือกขึ้นบรรทัดใหม่อย่างชัดเจนด้วย Shift+Return แต่ในพื้นที่ที่ยุ่งยากอย่างเอดิเตอร์ rich text ผมจะให้ ประสบการณ์ผู้ใช้ มาก่อนความเรียบร้อย
    • เห็นด้วยอย่างยิ่ง แม้แต่การรองรับ Shift+ นั้นก็ยังไม่นิ่ง แต่คงยอมรับได้
      การจัดการย่อหน้าในตัวอย่างของ Quill ดูแปลก ๆ
    • ถ้าอ่านถูก ดูเหมือนจะคล้ายพฤติกรรมของช่องป้อนข้อความใน Confluence/JIRA

  • เอกสารยอดเยี่ยมมาก อยากให้ทุกโปรเจกต์โอเพนซอร์สมีหน้าแบบ “Why Quill”[1] เพื่อให้เข้าใจปรัชญาของโปรเจกต์และดูว่าเข้ากับเป้าหมายของตัวเองไหมได้อย่างรวดเร็ว
    ถ้าดีกว่านั้นคือมีเนื้อหาอย่าง “Why Not Quill” ด้วย จะได้รู้เร็วว่าไม่เหมาะกับสถานการณ์แบบไหน
    ทุกโปรเจกต์ล้วนมีการแลกเปลี่ยนข้อดีข้อเสีย ดังนั้นถ้าสื่อสารเรื่องนี้โดยตรงและชัดเจน ผู้ใช้จะได้รับประสบการณ์ที่ดีกว่า
    [1] https://quilljs.com/docs/why-quill

  • ดูจากลิงก์อย่างเดียวอาจไม่ชัดเจน แต่น่าจะถูกโพสต์ขึ้นมาเพราะ v2 เพิ่งปล่อย เมื่อ 3 วันก่อน
    เมื่อไม่นานมานี้ทำงานกับ Quill v1 และมันไม่ค่อยดีเท่าไร
    การทำให้ตารางใช้งานได้ด้วยปลั๊กอินก็ทรมาน และยังมีปัญหาการเลื่อนแปลก ๆ ด้วย
    หวังว่า v2 จะแก้ไปได้เยอะ แต่คิดว่าจะใช้ TinyMCE ต่อไป เพราะดีกว่าในแง่ฟีเจอร์

    • ผมก็ชอบ TinyMCE และเมื่อ 6 เดือนก่อนก็เปลี่ยนเอดิเตอร์ Quill เป็น TinyMCE
      แต่หงุดหงิดที่แม้ไซต์จะใช้ JS แบบสแตติกก็ยังต้องมี API key และไม่กี่วันก่อนพวกเขาก็ลด “ปริมาณการใช้งาน” การเรนเดอร์เอดิเตอร์ในเทียร์ฟรีลงอย่างรวดเร็วด้วย [0]
      เลยสงสัยว่านั่นไม่เป็นปัญหาหรือ
      [0] https://news.ycombinator.com/item?id=40044544

  • ตอนแรกไม่เข้าใจว่าทำไม Quill ถึงถูกดันขึ้นมาอีก แต่ตอนนี้รู้แล้วว่า เวอร์ชัน 2.0 ที่รอกันมานานเพิ่งปล่อยเมื่อ 3 วันก่อน
    ดู https://slab.com/blog/announcing-quill-2-0/

    • ผมคิดว่าลิงก์นี้และชื่อเรื่องนี้เป็นจุดเริ่มต้นที่ดีกว่าสำหรับหัวข้อนี้

  • เคยมีโปรเจกต์ที่ทำไว้ก่อนหน้านี้เจอปัญหาใหญ่เพราะใช้ Quill
    โดยส่วนตัวแล้ว ปัญหาคือไม่ได้ตรวจสอบข้อจำกัดของ editor ให้เพียงพอเมื่อเทียบกับ requirements ของโปรเจกต์ แต่ลักษณะที่เอกสารเน้น ความสามารถในการขยาย ของไลบรารีก็ดูเหมือนอาจทำให้เกิดความเสียหายได้
    ถ้าอยู่ภายในข้อจำกัดของมัน ก็เป็นไลบรารีที่ยอดเยี่ยม เช่น ควรหลีกเลี่ยงสิ่งที่ซับซ้อนเกินไปอย่างเนื้อหาแบบซ้อนกัน
    ถ้าในเว็บไซต์มีส่วนอย่าง “Why You Should NOT Use Quill?” ก็น่าจะช่วยได้มากทีเดียว

  • แล้วแต่กรณี แต่ผมไม่คิดจะใช้ Quill ในโปรเจกต์ production อีกแล้ว
    เริ่มใช้ Quill 1.x ราวปี 2016 และตอนแรกก็ค่อนข้างชอบ
    ตอนที่ทวีตว่ากำลังพิจารณา Quill อยู่ Jason เป็นฝ่ายติดต่อมาก่อน และช่วยตอบคำถามเกี่ยวกับการ implement ด้วย
    พอถึงปี 2019 ผมเจอบั๊กบางอย่างอยู่ Quill 1.x อยู่ใน maintenance mode และ 2.0 แทบไม่มีเอกสารเลย [1]
    ผมติดต่อ Jason ทาง Twitter เพื่อพยายามจับ timeline [2] แต่คำตอบที่ได้โดยรวมเหมือนบอกให้ไปไกล ๆ
    บริษัทของเขา Slab ตอนนี้ก็บล็อกผมใน Twitter ด้วย ซึ่งอาจจะเป็นเพราะตั้งใจจะบล็อกจากบัญชีส่วนตัวก็ได้
    ถ้ากำลังสร้างสตาร์ทอัพ ใคร ๆ ก็ย่อมมีวันที่เครียด ดังนั้นจังหวะที่ผมติดต่อไปอาจจะแย่ก็ได้
    ผมเดาว่าเขากำลังโฟกัสกับบริษัทของตัวเอง และแม้จะมีเวลาพอประคอง Quill ไว้ใช้ภายใน แต่แทบไม่มีเวลาพอสำหรับการปล่อยเป็นโอเพนซอร์ส ถ้าเป็นอย่างนั้นก็น่าจะพูดตรง ๆ ไปเลยมากกว่า
    ผ่านไป 5 ปี Quill v2 ก็ออกมาในที่สุด และผมดีใจที่ Slab ยังอยู่รอด
    หวังว่าต่อไปจะมีแรงพอที่จะดูแล Quill แบบสาธารณะ แต่ถ้าจะใช้ใน production ก็ควรตรวจสอบว่ามี commitment ต่อ support มากแค่ไหน และวางแผนไว้ด้วยหากการตอบสนองขาดหายไป
    ถ้า Jason อยู่ในเธรดนี้ ก็ไม่ได้มีเจตนาร้ายอะไร และเรื่องมันก็ผ่านไปแล้ว จะเมินก็ได้ หรือจะเพิ่มมุมมองของตัวเองก็ได้
    [1] https://github.com/quilljs/quill/issues/2435
    [2] https://twitter.com/nickbaum/status/1177240103925796865

    • ผมไม่มีประสบการณ์เกี่ยวกับ Jason แต่ใช้เวลาไปมากเกินไปกับการอ่าน โค้ด Quill เพื่อทำ workaround แก้พฤติกรรมแปลก ๆ
      ที่น่าหงุดหงิดยิ่งกว่า เพราะเหตุผลที่ใช้ไลบรารี rich text editor แทนที่จะทำเอง ก็เพื่อหลีกเลี่ยงเรื่องแบบนั้นนั่นแหละ
      v2 ไม่รู้ แต่โค้ด v1 โครงสร้างไม่ได้ดีนัก
      มีฟีเจอร์พื้นฐานบางอย่างที่เลื่อนการ implement ออกไป เพราะกลัวว่าจะเกิดบั๊กเล็ก ๆ เป็นล้านตัว
      สิ่งที่ดีที่สุดของ Quill คือ รูปแบบ Delta อย่างไม่ต้องสงสัย
      แต่ถ้าใครต้องการมากกว่าแค่ตัวหนา/ขีดเส้นใต้/ตัวเอียง ผมจะแนะนำ ProseMirror

  • บทความที่เกี่ยวข้อง มีอีกไหม?
    Announcing Quill 1.0 - https://news.ycombinator.com/item?id=12437345 - กันยายน 2016, 82 คอมเมนต์
    Quill – A cross browser rich text editor with an API - https://news.ycombinator.com/item?id=10446865 - ตุลาคม 2015, 47 คอมเมนต์
    Quill – An Open Source Rich Text Editor with an API - https://news.ycombinator.com/item?id=7716376 - พฤษภาคม 2014, 60 คอมเมนต์

    • ประกาศครั้งนี้เกี่ยวกับ เวอร์ชัน 2 ซึ่งดูเหมือนเพิ่งปล่อยเมื่อไม่กี่วันก่อน

  • จำได้ว่าประมาณหนึ่งปีก่อนเคยใช้ https://github.com/facebook/lexical ในโปรเจกต์หนึ่ง และส่วนใหญ่ก็ทำงานได้ดีทันที
    มีเหตุผลอะไรไหมที่ควรชอบ Quill มากกว่า?