如何在 Quilljs (React) 中更改拼写检查语言

Question

How do you change the language of the spellchecker in quill.js in React?

My app allows the user to edit content in either English or Spanish, saving results into different locations in the database. When loading English text, the spellcheck is great - but when loading the Spanish text the entire content is spellchecked as English. There must be a way to change that on the fly...?

This Stack Overflow answer shows how to disable the spellchecker entirely, but I cannot find information regarding switching to different languages.

Please also provide the source link where you found the info because I've been searching and didn't see it.

Answer 1

As seen per the quilljs source it seems that the container is just a plain HTML DOM Reference and the attribute you have to set in order to disable spellcheck is from the HTML Standard, so we can infer that the spellcheck job is taken by the browser and not by quill.

In this Stack Overflow answer's update it is stated that the spellchecking respects the lang attribute of the tags, so what you need to do is set that attribute accordingly to the language it should be using.

A code snipped for a component that I think it may work

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

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

  React.useEffect(() => {
    ref.current?.editor.root.setAttribute("lang", lang);
  }, [lang]);

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