javascript - 我应该将 react-quilljs 对象的哪一部分保存到后端的数据库中？

Question

我正在尝试使用react-quilljs在完整的 mern 堆栈应用程序中实现文本编辑器，但我不确定应该将 quill 对象的哪一部分保存到后端的数据库中。我有编辑器的以下代码：

import React, { useState } from 'react';

import { useQuill } from 'react-quilljs';
// or const { useQuill } = require('react-quilljs');

import 'quill/dist/quill.snow.css'; // Add css for snow theme
// or import 'quill/dist/quill.bubble.css'; // Add css for bubble theme

export default () => {
  const { quill, quillRef } = useQuill();

  const [content, setContent] = useState('');

  console.log(quill); // undefined > Quill Object
  console.log(quillRef); // { current: undefined } > { current: Quill Editor Reference }

  React.useEffect(() => {
    if (quill) {
      quill.on('text-change', () => {
        setContent(?) // What part of the quill object I need to use here to set the content before sending it to the backend <-----------------
        console.log(quill.getFormat());
        console.log('Text change!');
      });
    }
  }, [quill]);

  const submitHandler = (e) => {//here I will send the editor content to the bakcend};

  return (
    <div style={{ width: 500, height: 300 }}>
      <div ref={quillRef} />
      <form onSubmit={submitHandler}>
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
};

标签： javascriptreactjsmernrich-text-editor

Answer 1

您应该分别保存两件事，一件是 Quill 的原始数据，另一件是仅从中提取文本

参考下面的沙箱，需要保存内容

https://codesandbox.io/s/react-quill-demo-forked-0qr5f?file=/src/editor.js