CodeMirror: textarea setValue() pro

Question

I was trying to apply codemirror to my textarea after ajax query is done, but always get blank textarea (text is loaded, but hidden, so textarea is blank). When I right-click on the textarea and simply open Chrome DevTools text magically appears, same problem in all browsers I tried - Mozilla (FireBug), Opera

Here is my codemirror code:

CodeMirror.fromTextArea(result).setValue(JSON.stringify(data,null,'\t'));

CodeMirror version 3.21

Answer 1

I suspect the textarea is hidden, or some other factor is preventing the editor from rending when it is initialized. CodeMirror can't properly build up its display when hidde, so you have to call its refresh method when you unhide it. A window resize (as triggered by opening devtools) will cause it to refresh automatically.

Answer 2

Do something like this (I presume your "result" field is under a tag identified as such):

CodeMirror.fromTextArea(document.getElementById('result'), {
    theme: 'default', // the theme can be set here
    lineNumbers: true,
    lineWrapping: true,
    styleActiveLine: true
}).setValue(JSON.stringify(data, '\t')

The parameters for the "setValue" function are 1) element 2) value 3) code. Each is optional.