quill - 如何将 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

看起来onChangeprop是一个将 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>
    </>
  );
}