如何在 QuillJS (React) 中关闭拼写检查

Question

你如何在 React 的quill.js中关闭拼写检查？

我发现这个 GitHub 页面显示了如何在普通 JavaScript 中禁用 quill 的拼写检查器：

const quill = new Quill('#editor-container')
quill.root.setAttribute('spellcheck', false)

但是，我看不到如何使用 React 组件来实现这一点。

我的 React 组件（实际上是 Preact）：

const quill = new Quill('#editor-container')
quill.root.setAttribute('spellcheck', false)

Answer 1

为了进入Quill编辑器，你必须创建一个ref到<Quill />组件，然后用它来设置属性。这是片段代码：

// For typings
import Quill from "react-quill";
import QuillEditor from "quill"

export const ContentEditor = ({ content, onChange }) => {
  const ref = React.useRef<Quill & { editor: QuillEditor }>(null);

  // Disable spellcheck as component is mounted
  React.useEffect(() => {
    ref.current?.editor.root.setAttribute("spellcheck", "false");
  }, []);

  return (
    <Quill
      // set the ref to access to quill editor
      ref={ref}
      theme="snow"
      value={content}
      onChange={onChange}
      modules={modules}
      formats={formats}
    />
  );
};

我也做了一个样本：https : //codesandbox.io/s/stoic-mendel-4g3jw?file=/src/App.js