Codemirror editor does not load content until click

Question

I use codemirror 2 and its working mode, except that the editor set value is not loaded into the editor until I click on the editor and is focused.

I want the editor to show content on its own, without having to click it. Any ideas?

All codemirror demos work as expected, so I decided that the text box was out of focus, so I tried this too.

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

Answer 1

After setValue () you should call refresh (). However, you must use setTimeout to defer updating () before CodeMirror / Browser updates the layout to match the new content:

 this.codeMirrorInstance.setValue(content); var that = this; setTimeout(function() { that.codeMirrorInstance.refresh(); },1); 

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

Answer 2

I expect you (or some script you downloaded) to intervene in the DOM so that the editor is hidden or otherwise in a strange position when created. This will invoke its refresh() method after it becomes visible.

Answer 3

Just in case, and for everyone who does not read the documentation carefully enough (like me), but is faced with this. There's an autorefresh addon just for that.

You need to add autorefresh.js to your file. Now you can use it like this.

 var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), { mode: "javascript", autoRefresh:true, lineNumbers: false, lineWrapping: true, }); 

works like a charm.

Answer 4

I am using CodeMirror in the boot tab. I suspected that the bootstrap tabs were what prevented him from appearing until he clicked. I fixed this by simply calling the refresh() method on display.

 var cmInstance = CodeMirror.fromTextArea(document.getElementById('cm'), { lineNumbers: true, lineWrapping: true, indentUnit: 4, mode: 'css' }); // to fix code mirror not showing up until clicked $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function() { this.refresh(); }.bind(cmInstance)); 

Answer 5

Something worked for me.

 $(document).ready(function(){ var editor = CodeMirror.fromTextArea(document.getElementById("code2"), { //lineNumbers: true, readOnly: true, autofocus: true, matchBrackets: true, styleActiveLine: true }); setTimeout(function() { editor.refresh(); }, 100); }); 

Answer 6

Version codecirror 5.14.2 fully allows the addition. See this answer for more details.

Answer 7

Another solution (which I also understood, because the editor had to be visible for proper creation) is to temporarily bind the parent to the body element during construction, and then set it again.

Thus, you do not need to interfere with the elements or worry about visibility in any existing hierarchies that might be buried in your editor.

In my case, for processr.com , I have several elements of nested code, all of which need to be created on the fly as the user makes updates, so I do the following:

 this.$elements.appendTo('body'); for (var i = 0; i < data.length; i++) { this.addElement(data[i]); } this.$elements.appendTo(this.$view); 

It works great, and so far there has been no visible flicker or anything like that.

Answer 8

Something worked for me! :)

  var sh = setInterval(function() { agentConfigEditor.refresh(); }, 500); setTimeout(function(){ clearInterval(sh); },2000) 

Answer 9

Try calling focus on the DOM element instead of the jQuery object.

 var editor=$( '#editor' ); editor[0].focus(); // or document.getElementById( 'editor' ).focus(); 

Answer 10

This evening I just ran into the problem of this problem.

Several other posts consider the visibility of the textarea parent as important, if it's hidden, you might run into this problem.

In my situation, the form itself and the immediate environment were great, but the problem with the Backbone view manager up the rendering chain was a problem.

My view element does not fit into the DOM until the view is fully completed, so I think that the element that does not contain the DOM is considered hidden or simply not processed.

To get around this, I added a post-rendering phase (pseudo-code):

 view.render(); $('body').html(view.el); view.postRender(); 

In postRender, the view can do what it needs, knowing that all the content is now visible on the screen, this is where I moved CodeMirror and worked fine.

This can also be explained by why you might run into problems with things like pop-ups, as in some cases they might try to create all the content before displaying it.

Hope this helps someone.

Toby

Answer 11

 <div class="tabbable-line"> <ul class="nav nav-tabs"> <li class="active"> <a href="#tabXml1" data-toggle="tab" aria-expanded="true">Xml 1</a> </li> <li class=""> <a href="#tabXml2" id="xmlTab2Header" data-toggle="tab" aria-expanded="true">Xml 2</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tabXml1"> <textarea id="txtXml1" /> </div> <div class="tab-pane" id="tabXml2"> <textarea id="txtXml2" /> </div> </div> </div> <link rel="stylesheet" href="~/Content/codemirror.min.css"> <style type="text/css"> .CodeMirror { border: 1px solid #eee; max-width: 100%; height: 400px; } </style> <script src="~/Scripts/codemirror.min.js"></script> <script src="~/Scripts/codemirror.xml.min.js"></script> <script> $(document).ready(function () { var cmXml1; var cmXml2; cmXml1 = CodeMirror.fromTextArea(document.getElementById("txtXml1"), { mode: "xml", lineNumbers: true }); cmXml2 = CodeMirror.fromTextArea(document.getElementById("txtXml2"), { mode: "xml", lineNumbers: true }); // Refresh code mirror element when tab header is clicked. $("#xmlTab2Header").click(function () { setTimeout(function () { cmXml2.refresh(); }, 10); }); }); </script> 

Answer 12

I work with responsive and all these answers do not work with me ... After reading the documentation, it works like this:

in the constructor, I initialized the Mirror code instance:

 this.mirrorInstance = null; 

and when I open the tab containing codeEditor, I updated the instance after 1 milliseconds:

 toggleSubTab() { setTimeout(() => { this.mirrorInstance.refresh(); }, 1); } 

and here is the JSX code:

 <CodeMirror value={this.state.codeEditor} options={{ mode: "htmlmixed", theme: "default", lineNumbers: true, lineWrapping: true, autoRefresh: true }} editorDidMount={editor => { this.mirrorInstance = editor; }} /> 

Answer 13

Using the update will help solve this problem. But it seems not friendly