CodeMirror具有内容，但在按下之前不会显示

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

Answer 1

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.

Answer 2

使用代码镜像5.14.2，如果您明确刷新，则必须注意正确调用它（请参阅此问题 ），但最容易使用提供的代码镜像autorefresh add来处理它。

Answer 3

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