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

Question

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

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

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

但是，我不知道如何使用 React 组件来实现它。

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

import { h, FunctionalComponent } from 'preact';
import './contentEditor.scss';
import Quill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

interface ContentEditorProps {
  content: string | undefined;
  onChange(value: string): void;
}

const modules = {
  toolbar: [
    [{ header: [1, 2, 3, 4, false] }],
    ['bold', 'italic', 'underline', 'blockquote'],
    [{ color: [] }],
    [{ align: [] }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ indent: '-1' }, { indent: '+1' }],
    ['link', 'image'],
  ],
};

const formats = [
  'header',
  'bold',
  'color',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'align',
  'indent',
  'link',
  'image',
];

export const ContentEditor: FunctionalComponent<ContentEditorProps> = ({
  content,
  onChange,
}) => {
  return (
    <Quill
      theme='snow'
      value={content}
      onChange={onChange}
      modules={modules}
      formats={formats}
    />
  );
};

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

Answer 2

这是一个简单的替代方案，不需要

useRef

钩子

<div spellCheck={false}>
  <ReactQuill
    value={note.content}
    modules={toolbar}
    onChange={handleOnchange}
    theme="snow"
  />
</div>

这是有效的，因为拼写检查属性是可继承的，因为编辑器是禁用它的父 div 的子级，所以编辑器也将被禁用。