Alex Rivera | Logout

CodeMirror has content but won't display until keypress

Asked 2012-05-13T22:46:31.467
11

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
Edit
Report

2 Answers

11

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.

answered 2012-10-02T22:02:52.097
2

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

answered 2012-09-11T20:52:10.183

Your Answer