thumb I am used CodeMirror 5 in different projects. Now I using it with WordPress plugin API and it’s working perfectly except that the editor is not loading all content until clicked. Nothing appears below line 26 until you click the mouse below that line. The content is there, but it is not visible. It just comes up as a large blank white space. If you click above it, it doesn’t appear, you need to click below it.

In my WordPress plugin, there is a textarea, and i am replacing it with CodeMirror editor.

This is a Javascript that I use:

var editor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), {
	lineNumbers: true,
	matchBrackets: true,
	mode: 'application/x-httpd-php',
	indentUnit: 4
});

All of the CodeMirror editor work as expected so I figured maybe the textarea isn’t focused so I tried to calling focus() on the DOM element.

jQuery:

$("#editor").focus();

Javascript:

document.getElementById( 'editor' ).focus();

But it is not worked because you need to click below the line 26 and not above.

Then I tried to call refresh() method after editor is made visible:

setTimeout(function() {
	editor.refresh();
},1);

The above Javascript code will refresh the CodeMirror editor after 1 second.

And it’s work.

Now, all Javascript code looks like this:

var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
	lineNumbers: true,
	matchBrackets: true,
	mode: 'application/x-httpd-php',
	indentUnit: 4
});
setTimeout(function() {
	editor.refresh();
},1);

Arthur Gareginyan

Arthur Gareginyan

Arthur is a designer and full stack software engineer. He is the founder of MyCyberUniverse.com. His personal website can be found at arthurgareginyan.com. Check out his free WordPress plugins at wordpress.org.

Follow Arthur: