CODEWITHSUNDEEP
javascriptjquerycodemirror
Karl
Karl

Reputation: 1813

Codemirror editor is not loading content until clicked

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
                });

Upvotes: 93

Views: 40326

Answers (16)

sainu
sainu

Reputation: 2701

autorefresh doesn't helps me because in my case code mirror editor is coming inside a popup window. So call the editor instance’s refresh() method after the popup opens. It has to be visible to be able to draw itself.

Upvotes: 0

dizad87
dizad87

Reputation: 468

chain this to the master codemirror object, make sure that nothing else is chained

.on('change', editor => {
   globalContent = editor.getValue();
});;

Upvotes: 0

Keifer Gu
Keifer Gu

Reputation: 1

The reason:

CodeMirror won't update DOM content when it's DOM Node is unvisible.

For example:

when the CodeMirror's Dom is setted style to 'display: none'.

The way to fix:

when CodeMirror's Dom is visible, manual excute the cm.refresh() method.

For example in my application, the CodeMirror Dom will visible when the tab element clicked.

So the simple method is:

window.onclick = () => {
    setTimeout(() => {
        codeMirrorRef.refresh();
    }, 10);
};

You can add event listener on more specific element to improve the performance.

Upvotes: 0

nvd_ai
nvd_ai

Reputation: 1100

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.

Upvotes: 70

MuYunyun
MuYunyun

Reputation: 64

using refresh help solve this problem. But it seems not friendly

Upvotes: 0

Ammar Ismaeel
Ammar Ismaeel

Reputation: 803

I am working with react, and all these answers did not work with me...After reading the documentation it worked like this:

in the constructor, I initialized an instance of code Mirror:

this.mirrorInstance = null;

and on opening the tab that contains the codeEditor, I refreshed the instance after 1 millisecocnd:

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;
           }}
        />

Upvotes: 2

Vikash Saini
Vikash Saini

Reputation: 709

Just in case, and for everyone who doesn't read the documentation carefully enough (like me), but stumbles upon this. There's an autorefresh addon just for that.

You need to add autorefresh.js in 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.

Upvotes: 49

Yes Barry
Yes Barry

Reputation: 9846

I happen to be using CodeMirror within a bootstrap tab. I suspected the bootstrap tabs were what was preventing it from showing up until clicked. I fixed this by simply calling the refresh() method on show.

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));

Upvotes: 12

Paul Whipp
Paul Whipp

Reputation: 16521

The 5.14.2 version of codemirror addresses this fully with an add on. See this answer for details.

Upvotes: 2

cnwangzd
cnwangzd

Reputation: 9

Something worked for me! :)

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

      setTimeout(function(){
        clearInterval(sh);  
      },2000)

Upvotes: 0

Koray Bayram
Koray Bayram

Reputation: 91

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

Upvotes: 0

Jinu
Jinu

Reputation: 103

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);

        });

Upvotes: 6

davestewart
davestewart

Reputation: 725

Yet another solution (which I also realised was because the editor needed to be visible to create properly) is to temporarily attach the parent element to the body element during construction, then reattach once complete.

This way, you don't need to meddle with elements, or worry about visibility in any existing hierarchies that your editor might be buried.

In my case, for processr.com, I have multiple, nested code editing elements, 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 there's been no visible flicker or anything like that so far.

Upvotes: 1

Toby Skinner
Toby Skinner

Reputation: 88

I just ran into a version of this problem myself this evening.

A number of other posts regard the visibility of the textarea parent as being important, if it's hidden then you can run into this problem.

In my situation the form itself and immediate surroundings were fine but my Backbone view manager higher up the rendering chain was the problem.

My view element isn't placed on the DOM until the view has rendered itself fully, so I guess an element not on the DOM is considered hidden or just not handled.

To get around it I added a post-render phase (pseudocode):

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 the CodeMirror and it worked fine.

This might also go some of the way to explain also why one may run into problems with things like popups as in some cases they may try to build all content before displaying.

Hope that helps someone.

Toby

Upvotes: 1

Marijn
Marijn

Reputation: 8929

I expect you (or some script you loaded) is meddling with the DOM in such a way that the editor is hidden or otherwise in a strange position when created. It'll require a call to its refresh() method after it is made visible.

Upvotes: 28

czarchaic
czarchaic

Reputation: 6318

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

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

Upvotes: 0

Related Questions