Does not integrate with Chrome's spell check

[huangp]

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.

[marijnh]

This is unavoidable. A CodeMirror instance is, as far as the browser is concerned, not an editable control, so it won't apply spell checking to it. It would not be hard to write a custom spell checker that works on CodeMirror, and there has been talk about doing this, but no one has actually done it yet.

Closing this on the grounds of 'that's just the way things are'.

[0b10011]

Just for reference, it looks like someone has integrated typo.js with CodeMirror: http://stackoverflow.com/a/12462720/526741. It could do with some improvements, but it's a start.

[marijnh]

Neat. This is one of the use cases I had in mind when adding the addOverlay
functionality. If someone knows of a CDN-hosted way to run typo.js, I'll
add a demo to the website. (I don't want to include too much junk in the
repository, and the typo.js dictionaries are quite a lot of data.)

On Tue, Jan 22, 2013 at 6:07 PM, Brandon Frohs notifications@git.luolix.topwrote:

Just for reference, it looks like someone has integrated type.js with
CodeMirror: http://stackoverflow.com/a/12462720/526741. It could do with
some improvements, but it's a start.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1017#issuecomment-12554569.

[huangp]

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.

[friksa]

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.

[cben]

AFACIT disableSpellcheck only existed in codemirror v1.

[eduncan911]

FYI, I was able to enable spell checking using the HTML5 attribute spellcheck="true" on the <span> tags generated by CodeMirror.

prose/prose#169 (comment)

<pre> is not supported though.

Maybe CodeMirror can drop all of these <pre>s and use spans instead? Would require a small CSS tweak to mimic the standard behavior of <pre>; but, I think it would be very much worth it.

[marijnh]

Since version 4, each line is wrapped in a span already. But doing .setAttribute("spellcheck", "true") on that span does not seem to do anything (in Chrome or Firefox). Is it supported yet?

[eduncan911]

@marijnh the thread with many details was mentioned above:

prose/prose#169 (comment)

In short:

<span contenteditable="true" spellcheck="true">misssspelled wordds herre!</span>

[marijnh]

Okay, yeah, that uses contentEditable, which is not going to happen in CodeMirror.

[huangp]

Just FYI to anyone following this issue. We did manage to trick the browser by setting contenteditable=true and spellcheck=true. It appears to work on Firefox (will highlight wrong words) and sometimes on Chrome (not always highlight but sometimes it does). But it has a major show stopper problem: when you use browser's spellcheck correction function, i.e. right click on the wrong word and choose the correct word, the value change event is not detected by codemirror. I am using version 3 not sure about version 4.

[eduncan911]

👍

[eduncan911]

Perhaps each browser implements their own callback event when a spelling
correction has been performed.
On Aug 17, 2014 7:00 PM, "Patrick Huang" notifications@github.com wrote:

Just FYI to anyone following this issue. We did manage to trick the
browser by setting contenteditable=true and spellcheck=true. It appears to
work on Firefox (will highlight wrong words) and sometimes on Chrome (not
always highlight but sometimes it does). But it has a major show stopper
problem: when you use browser's spellcheck correction function, i.e. right
click on the wrong word and choose the correct word, the value change event
is not detected by codemirror. I am using version 3 not sure about version
4.

—
Reply to this email directly or view it on GitHub
#1017 (comment).

[tablatronix]

I just noticed that ckeditor seems to work, but probably because its using an iframe with

<body contenteditable="true"  spellcheck="true">

[scottlingran]

@huangp how exactly did you get it to work with contenteditable="true" spellcheck="true" ?

These method have not worked for me:

1. Attaching to the body <body contenteditable="true" spellcheck="true">
2. Attaching it to the CodeMirror element
3. Attaching it to individual span elements within .CodeMirror <span contenteditable="true" spellcheck="true">

[eduncan911]

@scottyli See my post #1017 (comment).

Which, points to my JS examples over in another comment thread:

prose/prose#169 (comment)

[WesCossick]

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

[eduncan911]

👍

[kofifus]

I created a spellchecker with typo corrections :
https://gist.github.com/kofifus/4b2f79cadc871a29439d919692099406

demo:
https://plnkr.co/iZ7ArW8sTMl8qU2VA0Bc

[WesCossick]

@kofifus would you be interested in submitting a PR with this functionality to https://github.com/NextStepWebs/codemirror-spell-checker?

[kofifus]

Thx Wes, I don't see how a PR will work as basically there is not much common code ..

[kofifus]

I have updated the gist to use an async version of typo.js, this gives much better speed/memory performance and shows suggestions as they are found .

gist
demo

[MikhailTymchukDX]

@kofifus what is the license for your gist code? If it's not explicitly stated, no one can use your code, just watch it :)

[kofifus]

gist licensing is https://gist.github.com/martinbuberl/c0de29e623a1e34d1cda7e817d18bafe

[terrylinooo]

I created a dictionary files source here:
https://spellcheck-dictionaries.github.io/

You can use it for typo.js or other spellcheck solutions as well.

[RomainLWiz]

Has someone managed to implement one of the proposed solutions ?
From my side I can only touch the sub folder to use the admin plugins.
If you have some tips or an example I am open.