javascript - 如何使用基于函数的组件向 QuillJS 插入数据

Question

我想将数据库中的数据插入到 QuillJS，但我无法让它工作，我尝试了很多东西但没有工作。我已经尝试过 setContent 但不起作用，但除此之外，我还想在 quillJS 上监听变化并获取 Init 数据，以便我可以发布到数据库。

这是它的代码：

import * as style from '../../constants/styles/Notes.module.scss';
import React from 'react';
import { useQuill } from 'react-quilljs';
import '../../constants/styles/Quill.scss';
import { useEffect, useState } from 'react';

export default function View({ note }) {
  const [isSaving, setIsSaving] = useState(false);
  const { quillRef } = useQuill({
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ align: [] }],

        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ indent: '-1' }, { indent: '+1' }],

        [{ size: ['small', false, 'large', 'huge'] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['link', 'image', 'video'],
        [{ color: [] }, { background: [] }],

        ['clean'],
      ],
    },
    formats: [
      'bold',
      'italic',
      'underline',
      'strike',
      'align',
      'list',
      'indent',
      'size',
      'header',
      'link',
      'image',
      'video',
      'color',
      'background',
      'clean',
    ],
  });

  return (
    <section className={style.view}>
      <div style={{ width: '100%', height: '100%', border: '0 !important' }}>
        {isSaving === true ? (
          <div className={style.saving}>Saving the new changes.</div>
        ) : null}
        <div ref={quillRef} />
        <div id='toolbar'>
          <button className='ql-bold' />
          <button className='ql-script' value='sub' />
          <button className='ql-script' value='super' />
        </div>
        <div id='editor' />
      </div>
    </section>
  );
}