Is it possible to add a custom spellchecker function to an HTML textarea?

Question:

I’d like to know if it is possible to add a custom spellchecker function to a Textarea.

Background:

I am currently using bootstrap-vue’s b-form-textarea component to display a textarea that accepts a list of values from a user.

I am already validating state and displaying whether the textarea is valid or invalid. However, I’d like like to show a “red squiggly” (similar to spellcheck) under each “invalid” entry.

As an example, user enters (up to 1,000) car manufacturers

• “Toyota, Honda, Dodge, Harley Davidson”.

I’d like to display that “Harley Davidson” is an invalid car manufacturer.

It’d be nice to leverage the spellchecker’s “red squiggly” to denote an “invalid” entry. If this is not possible would you have any other suggestions?

Answer

From what I’ve read, it does not seem possible to add the spellchecker functionality I required to a textarea. What I ended up using instead was a package, found in npm, called “vue-codemirror“. It is an extension of the CodeMirror project.

Using CodeMirror, I was able to add gutters with red error icons next to each line (similiar to an IDE displaying syntax errors). In my opinion, the CodeMirror documentation was lackluster and I spent more time looking at source code than I wanted. However, it does seem like very powerful tool.

Notes:

• I am using Vue 2.x. As such, I was not able to use the latest version of vue-codemirror (which requires Vue 3).
• Vue-codemirror 4.x uses CodeMirror 5