CodeMirror has content but won't display until keypress

Question

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

papercowboy papercowboy · Accepted Answer · 2012-10-02T22:02:52

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.

CodeMirror has content but won't display until keypress

3 Answers