reactjsreact-quill

Add text to console from quill texteditor in React


I have an task where I want to save the text from the texteditor in the console.

I use ReactQuill as a text editor and I know how to add it with the Onchange function.

But what if I instead what to have a button that have a onClick function that adds the text from the text editor to the console. How do I do that? my code looks like this right now, but cant get it to work.

export default function Editor() {
    const [text, setText] = useState("");

    const handleText = e => {
        console.log(e);
        setText(e);
    }
    return (
        <>
            <button type="button" onClick={handleText}>
                Click Me
            </button>
            <ReactQuill
                placeholder="Write something"
                value={text}

            />

        </>
    )
}

How do I connect the button with the ReactQuill text?


Solution

  • If you just want to log the text to the console

    export default function Editor() {
        const [text, setText] = useState("");
    
        const handleText = e => {
            console.log(text);
        }
        return (
            <>
                <button type="button" onClick={handleText}>
                    Click Me
                </button>
                <ReactQuill
                    placeholder="Write something"
                    value={text}
                    onChange={setText}
                />
    
            </>
        )
    }