codemirror5: Does not integrate with Chrome's spell check
Code snippet:
<div style="width:200px" contenteditable="true" spellcheck="true">
<textarea id="code" name="code">
javaCode {
stuff
}
aaaaaaaaaaaaaa
<a>abc</a>;
</textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"),
{
lineNumbers: true,
lineWrapping: true,
mode: "htmlxml"
});
</script>
<div contenteditable="true" spellcheck="true">
pure content editable div. asdf asdf yoh.
</div>
In Firefox if browser spell check is enabled then inside the editor words are marked. In Chrome, it doesn’t work (maybe not entirely. Sometimes I can trigger one word to be marked but not consistently).
NOTE
I also included a pure content editable div underneath. In Chrome, it won’t mark spelling error at page load time. But once focusing on the word or start editing the content, spell check take into effect. So not sure if is this a Chrome thing or CodeMIrror thing.
About this issue
- Original URL
- State: closed
- Created 12 years ago
- Comments: 26 (9 by maintainers)
CodeMirror documentation indicates that disableSpellcheck:false config option should do the trick, but it does not work. Using the built-in browser spell checking on a text area is a much better way to go than using a javascript library. Then I do not need to train multiple dictionaries and it knows my language regardless of where I am in the world. Seems like it is time to drop CodeMirror for Markdown and look at http://markitup.jaysalvat.com/home/ - sad… since I really like CodeMirror.
For those still wondering, or for future viewers, I’ve created a CodeMirror plugin that spell checks as your write. It’s super simple to set up. Check it out at: https://github.com/NextStepWebs/codemirror-spell-checker
I came across that stackoverflow link. But realize it only support a limit set of dictionaries. And type.js does NOT support Unicode languages. (Maybe this is the limitation of javascript?) I still think using browser’s built-in spell checker is the best way. Gmail is doing that with a contenteditable div.