0

I'm using React/MobX. Chrome is the target browser. I have a contenteditable div and the spellcheck button, which simply changes the spellcheck attribute of the contenteditable div. Once it's set to true, the whole text is checked and all the mistakes are underlined. But if it's set to false, these underlined words are still underlined. The only way to remove underline is to start editing the corresponding word. How to remove them by the button click?

Update: actually I'm using react-quill and I don't control the editable container in the React way. Quill gives access to the corresponding contenteditable element so I manually change the attribute

Yaroslav Putria
  • 1
  • 1
  • If you are using react it should be `spellCheck` instead of `spell-check`. Maybe you already have it in such a way, if not, it may help. – Keff Jun 22 '20 at 13:22
  • Does it hide all of the underlines once you edit one word, or just for the edited word? – Keff Jun 22 '20 at 13:23
  • Maybe this can help: https://stackoverflow.com/questions/4524000/turn-off-chrome-safari-spell-checking-by-html-css – Keff Jun 22 '20 at 13:24
  • 1
    actually I'm using react-quill and I don't control the editable container in the React way. Quill gives access to the corresponding contenteditable element so I manually change the attribute. – Yaroslav Putria Jun 22 '20 at 13:29
  • Ohh, I see, it would be worth mentioning in the question though. – Keff Jun 22 '20 at 13:30
  • it hides only the focused word underline – Yaroslav Putria Jun 22 '20 at 13:31
  • I haven't worked with react-quill, so I can't help you with that. But may I ask what the thinking is behind such a feature? Is there any reason you want to hide the spellcheck underlines? – Keff Jun 22 '20 at 13:33
  • it a rich-text editor, redundant underlines are not needed (if spell check is disabled) – Yaroslav Putria Jun 22 '20 at 13:37
  • Ohh okay, I understand. You could try this if you have access to the Quill class instance, `quill.root.setAttribute('spellcheck', false)`. Otherwise, there seem to not be many fixes from what I have seen. I got that solution from https://github.com/quilljs/quill/issues/2225 – Keff Jun 22 '20 at 13:41
  • If not, you could always access the element by hand and then set the attribute – Keff Jun 22 '20 at 13:41
  • that's exactly what I'm doing, it's not a problem to change the attribute, the problem is that after changing it to false, previously typed words are still underlined until you edit each of them. Newly typed words are not spellchecked also. The point is to remove underlines of all of the previously added text by my button click. – Yaroslav Putria Jun 22 '20 at 13:50
  • I guess it's something to do with the attribute being changed dynamically. Maybe re-writing the content after changing the attribute would work? If this does not solve the problem, I will do some tests tonight and let you know, if nobody has posted an answer, – Keff Jun 22 '20 at 13:58

0 Answers0