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]);

quill.getContents(); returns the current content on quill editor — Sunil Kumar, Dec 25 '20 at 18:05

score 3 · Accepted Answer · answered Dec 25 '20 at 18:09

3

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]);

answered Dec 25 '20 at 18:09

Sam

1,040
1
7
11

lemme try first sam – Tristianto Raflesia Dec 25 '20 at 20:59
it works bro.. btw i just wondering that, can i pass the text into state? and post it into DB with axios? – Tristianto Raflesia Dec 25 '20 at 21:08
1

you can simply call your function before console.log. basically, you need to declare params using use state and then call setstate function before console.log – Sam Dec 25 '20 at 21:12
im sorry i dont know i clicked it – Tristianto Raflesia Dec 26 '20 at 02:13

score 3 · Answer 2 · answered Dec 25 '20 at 18:11

You've two options for getting quill data:

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>
  );
};

hi! thats works.. but what is the difference ? im just beginner and just knewin that — Tristianto Raflesia, Dec 25 '20 at 21:07

score 0 · Answer 3 · answered Apr 06 '22 at 12:24

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])

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

3 Answers3