React Quill js. How to console log on change handler?

Question

I'm currently creating a blog dashboard, I'm beginner on web dev. and for the editor I'm using the React quill.. in the documentation there is a tutorial with on change handler. but it just console log "text change", and I'm trying to change the console log "text-change" with anything that I type on the quill editor.

My question is. How to do it? here my code for the useEffect:

   const { quill, quillRef } = useQuill();
    const [isi, setisi] = useState('')
    
   useEffect(() => {
      if (quill) {
        quill.on('text-change', () => { 
            console.log('teks-changed! ')
        })
        
        
        
      }
    }, [quill]);

Answer 1

You need to use quill.getText() to get the text. here is the full working code below.

const { quill, quillRef } = useQuill();
  React.useEffect(() => {
    if (quill) {
      quill.on('text-change', (e) => {
        const text = quill.getText();
        console.log(text);
      });
    }
  }, [quill]);

Answer 2

You've two options for getting quill data:

1. Delta
2. innerHTML

in the next example I've logged both:

import React, { useEffect } from "react";
import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css"; // Add css for snow theme

export default () => {
  const { quill, quillRef } = useQuill();

  useEffect(() => {
    if (quill) {
      quill.on("text-change", (delta) => {
        console.log("delta", delta);
        console.log("innerHTML", quill.root.innerHTML);
      });
    }
  }, [quill]);

  return (
    <div style={{ width: 500, height: 300 }}>
      <div ref={quillRef} />
    </div>
  );
};

Answer 3

inside useEffect you'd have to quill.on() and inside that use quill.getText() to get the data.

like this >>

useEffect(() => {
    if (quill) {
      quill.on('text-change', (e) => {
        const data = quill.getText();
        console.log(data);
      });
    }
  }, [quill])