如何将Quill输出设置为JSON/delta而不是html？

Question

要将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>
    </>
  );
}

Answer 1

看起来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>
    </>
  );
}