Codemirror editor is not loading content until clicked

javascript jquery codemirror
Karl picture Karl · Dec 2, 2011 · Viewed 30.1k times · Source

I am using codemirror 2 and its working fine except that the editor's set value doesn't load into the editor until I click the editor and it becomes focused.

I want the editor to show the content of itself without it having to be clicked. Any ideas?

All of the codemirror demos work as expected so I figured maybe the textarea isn't focused so I tried that too.

$("#editor").focus();
var editor =    CodeMirror.fromTextArea(document.getElementById("editor"), {
                    mode: "text/html",
                    height: "197px",
                    lineNumbers: true
                });

Answer

nvd_ai picture nvd_ai · Nov 14, 2013

You must call refresh() after setValue(). However, you must use setTimeout to postpone the refresh() to after CodeMirror/Browser has updated the layout according to the new content: 

codeMirrorRef.setValue(content);
setTimeout(function() {
    codeMirrorRef.refresh();
},1);

It works well for me. I found the answer in here.

Related questions

When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery

The App: I have a textarea element in my page. It is transformed using CodeMirror, because I need to indent and highlight html code withing it. Pic is in the link: [textarea using codemirror] http://uploadingit.com/file/gxftd2cps9…

Read More
Codemirror Auto Format after setValue

http://liveweave.com/UxEJ0s I'm using Codemirror for my app. I noticed if I select all the text and press SHIFT+Tab it will auto align my code making it easier to read. Here's an example of what my …

Read More
JavaScript / CodeMirror - refresh textarea

How do I use the refresh function from CodeMirror 2? refresh() If your code does something to change the size of the editor element (window resizes are already listened for), or unhides it, you should probably follow up by calling this …

Read More