如何在 QuillJS (React) 中关闭拼写检查 [英] How turn off spell check in QuillJS (React)
本文介绍了如何在 QuillJS (React) 中关闭拼写检查的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在 React 的 quill.js 中关闭拼写检查?
How do you turn off spellcheck in quill.js in React?
我发现 这个 GitHub 页面 展示了如何在普通 JavaScript 中禁用 quill 的拼写检查器:
I found this GitHub page that shows how disable quill's spellchecker in normal JavaScript:
const quill = new Quill('#editor-container')
quill.root.setAttribute('spellcheck', false)
但是,我看不到如何使用 React 组件来实现这一点.
However, I can't see how to implement this with a React component.
我的 React 组件(实际上是 Preact):
My React component (Preact actually):
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}
/>
);
};
推荐答案
为了访问 Quill
编辑器,您必须创建一个 ref
到 <Quill/>
组件,然后使用它来设置属性.这是片段代码:
In order to access to Quill
editor, you have to create an ref
to the <Quill />
component, then use it to set the attribute. Here is the snippet code:
// 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
这篇关于如何在 QuillJS (React) 中关闭拼写检查的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文