/
githubmirror
/
quill
Обзор
Документация
Войти
/
githubmirror
/
quill
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
packages/website/src/playground/react/App.js
61 строка
2 KB
Zihua Li
Add an example for using Quill with React
13 фев 2024, 11:13
13 фев 2024, 11:13
cd3203f
Код
Авторство
О чём код?
import React, { useRef, useState } from 'react'; import Editor from './Editor'; const Delta = Quill.import('delta'); const App = () => { const [range, setRange] = useState(); const [lastChange, setLastChange] = useState(); const [readOnly, setReadOnly] = useState(false); // Use a ref to access the quill instance directly const quillRef = useRef(); return ( <div> <Editor ref={quillRef} readOnly={readOnly} defaultValue={new Delta() .insert('Hello') .insert('\n', { header: 1 }) .insert('Some ') .insert('initial', { bold: true }) .insert(' ') .insert('content', { underline: true }) .insert('\n')} onSelectionChange={setRange} onTextChange={setLastChange} /> <div class="controls"> <label> Read Only:{' '} <input type="checkbox" value={readOnly} onChange={(e) => setReadOnly(e.target.checked)} /> </label> <button className="controls-right" type="button" onClick={() => { alert(quillRef.current?.getLength()); }} > Get Content Length </button> </div> <div className="state"> <div className="state-title">Current Range:</div> {range ? JSON.stringify(range) : 'Empty'} </div> <div className="state"> <div className="state-title">Last Change:</div> {lastChange ? JSON.stringify(lastChange.ops) : 'Empty'} </div> </div> ); }; export default App;