如何解决如何将 Quill 输出设置为 JSON/delta 而不是 html?
我需要怎么做才能将 Quill 的内容或输出设置为 JSON/delta 而不是 HTML?
我不敢相信我问了这么简单的问题,但我在任何地方都找不到答案。
没有关于如何在 QuillJS doc 或 react-quill doc 中设置格式。
import React,{ useState } from "react";
import ReactQuill,from 'react-quill';
import 'react-quill/dist/quill.snow.css';
export const Comment = () => {
const [value,setValue] = useState('');
function submit(e) {
e.preventDefault();
console.log(value) # This currently returns HTML instead of JSON
}
return (
<>
<ReactQuill theme="snow" value={value} onChange={setValue}/>
<p>{value}</p>
<button onClick={submit}>Submit</button>
</>
);
}
解决方法
看起来 onChange
prop 是一个函数,它以 HTML 内容作为第一个参数,这将是 setState
使用的值。您需要定义一个将 value
设置为 editor.getContents()
的自定义函数,该函数返回一个代表当前文档的 Delta。
import React,{ useState } from "react";
import ReactQuill,from 'react-quill';
import 'react-quill/dist/quill.snow.css';
export const Comment = () => {
const [value,setValue] = useState('');
function submit(e) {
e.preventDefault();
console.log(value);
}
// onChange expects a function with these 4 arguments
function handleChange(content,delta,source,editor) {
setValue(editor.getContents());
}
return (
<>
<ReactQuill theme="snow" value={value} onChange={handleChange}/>
<p>{value}</p>
<button onClick={submit}>Submit</button>
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。