如何在QuillJS中关闭拼写检查反应

编程问答 2022-08-14

问题描述

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

我发现this GitHub page展示了如何在普通JavaScript中禁用羽毛笔的拼写检查器：

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','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}
    />
  );
};

解决方法

为了访问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

javascriptpreactquillreactjsreactjsreactjsreactjs