I have a CodeMirror instance embedded in a webapp I'm building. It works great - except that the initial content won't display until user enters a new character. So it is all there but hidden until the user forces a change. This is bad. Is there any way I can force a repaint or refresh of the browser of simulate a character enter - whitespace will do.

Here is the code...

<textarea id='code-mirror' ><?php echo $contents; ?></textarea>
<script>
    jQuery(document).ready(function(){
        var textarea = document.getElementById('code-mirror');
        var myCodeMirror = CodeMirror.fromTextArea(textarea,    
            {  
            onUpdate:codemirrorcallback,
            });
        // myCodeMirror.refresh(); ? is this an option?
     });
</script>

This producing a working editor that saves the content and displays the saved content inside the text area but ONLY displays it after the user begins editing it. Before that it is just blank.

Any help, even just links would be highly appreciated. Thanks guys!

UPDATE

Calling .refresh on myCodeMirror is printing an error in the Chrome console of Uncaught TypeError: Cannot call method 'focus' of undefined

I have a CodeMirror instance embedded in a webapp I'm building. It works great - except that the initial content won't display until user enters a new character. So it is all there but hidden until the user forces a change. This is bad. Is there any way I can force a repaint or refresh of the browser of simulate a character enter - whitespace will do.

Here is the code...

<textarea id='code-mirror' ><?php echo $contents; ?></textarea>
<script>
    jQuery(document).ready(function(){
        var textarea = document.getElementById('code-mirror');
        var myCodeMirror = CodeMirror.fromTextArea(textarea,    
            {  
            onUpdate:codemirrorcallback,
            });
        // myCodeMirror.refresh(); ? is this an option?
     });
</script>

This producing a working editor that saves the content and displays the saved content inside the text area but ONLY displays it after the user begins editing it. Before that it is just blank.

Any help, even just links would be highly appreciated. Thanks guys!

UPDATE

Calling .refresh on myCodeMirror is printing an error in the Chrome console of Uncaught TypeError: Cannot call method 'focus' of undefined

• php
• javascript
• jquery
• codemirror

3 Answers 3

You do indeed need to call a refresh() on your CodeMirror instance if this is happening. But due to space monkeys you'll need to wrap the refresh call in a timeout:

var editor = CodeMirror.fromTextArea( yourSourceDOM, { lineNumbers:true })
setTimeout( editor.refresh, 0 )

It's not pretty, but that solved it for me.

Using code mirror 5.14.2, if you refresh explicitly you must take care to invoke it properly (see this question) but it is most easily handled with the codemirror supplied autorefresh add on.

If you're using CodeMirror version 2+, you can call CodeMirror.refresh(). See the documentation on refresh().

Note: This must be called on the CodeMirror instance and not the element. See https://stackoverflow.com/a/5377029/526741