เข้าไปดูได้ที่เว็บ

Quill - Your powerful rich text editor

Quill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API.

https://quilljs.com/

เริ่มต้นใช้งานง่ายๆ แบบนี้ครับ

function Editor () {
    const quillRef = useRef()
    const editorRef = useRef()

    useEffect(() => {
            quillRef.current = new Quill(editorRef.current)
    })

    return <div ref={editorRef}/>
}

var quill = new Quill(editorRef.current, {
  modules: {
    toolbar: '#toolbar'
  }
});

เออ อันนี้มันประหลาดๆ ตอนแรกเข้าใจว่า เรากำหนด element ต้องการให้ toolbar ไปแสดงผลได้

แต่จริงๆ แล้ว ไอ้ตรง #toolbar นี่เราต้องสร้างปุ่มไว้เลย แบบนี้

<!-- Create toolbar container -->
<div id="toolbar">
  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="small"></option>
    <!-- Note a missing, thus falsy value, is used to reset to default -->
    <option selected></option>
    <option value="large"></option>
    <option value="huge"></option>
  </select>
  <!-- Add a bold button -->
  <button class="ql-bold"></button>
  <!-- Add subscript and superscript buttons -->
  <button class="ql-script" value="sub"></button>
  <button class="ql-script" value="super"></button>
</div>
<div id="editor"></div>

คือก็งงๆ ว่า เออมันดี รึมันไม่ดีกว่า แต่คิดว่า แบบนี้ ก็สะดวกในการปรับแต่งมากกว่าล่ะนะ

จุดสำคัญคือ ตัว className ของมันนี่ล่ะ จะไปเชื่อมโยงกับเรื่อง format