Thursday, 3 September 2020

How turn off spell check in QuillJS (React)

How do you turn off spellcheck in quill.js in React?

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)

However, I can't see how to implement this with a React component.

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


from How turn off spell check in QuillJS (React)

No comments:

Post a Comment