Fix For CodeMirror Editor Not Displaying Default Value When Accompanying jQuery UI

I am working on a WordPress plugin that is fairly large in scope.  I hope to unveil this plugin in not too long.  But, that’s not the point of this post.  Instead, I wanted to address a problem I encountered along the way during development.  Part of this plugin allows the user to type in PHP, HTML, CSS, and JavaScript code.  To facilitate this, I wanted to include a browser based, syntax highlighting code editor.  After a few minutes of Googling, I decided to use the CodeMirror editor.

codemirror

Unfortunately, I was loaded down with problems getting the editor to work correctly.  Many of the issues were eventually traced back to a common operator head space error (A.K.A. dumb mistake on my part).  However, one was not my own fault, and was a bear to track down.  My plugin specifically has multiple sections of user interface, which I have broken down into “tabs” using jQuery UI tabs.  In one of the tabs is the CodeMirror editor in which I want to place some default values.  The problem was, that the default values would not appear in the editor until the user put the cursor in the editor and began typing.  Then, the default values would suddenly appear.

 

The cause, as I eventually discovered, was that I was creating the jQuery UI tabs prior to initializing the CodeMirror instance with the default text.  This caused some issues because jQuery tabs hid the CodeMirror instance (as it was not in the default tab) from sight using all that wonderful, magical jQuery voodoo.  Then CodeMirror would come on the scene and try and update the displayed content with the editor.  As the editor is hidden at the time, these changes do not fully register.

 

The first of two solutions is to create the CodeMirror instance before the jQuery tabs.  So instead of your JavaScript looking something like this:

Simply reverse it:

This solution is easy and requires less code than the one below; however, it is not always feasible or practical.

 

The second solution was pointed out by CodeMirror’s devloper in the comments below.  It is to use the CodeMirror refresh function.  However, the refresh function will only do the intended job if it is called after the CodeMirror instance is displayed.  In my case, after the tab containing the CodeMirror instance is activated.  The simplest way to do this is to call the refresh function when the jQuery UI tabs ‘activate‘ event is fired.  Along the lines of the following:

Unfortunately, the above code will call the refresh function every time a new tab is selected.  Technically, we only care about when the tab containing CodeMirror instance is selected.  As such, you may want to add some logic in your code to only refresh the CodeMirror instance if its tab was selected.  However, the refresh function has fairly low overhead and any code efficiency increases will be minimal when compared to checking the selected tab.  When you factor in code readability and maintainability, I do not find the tab checking to be worthwhile in most cases.  You can find a working JSFiddle of this solution to play around with at http://jsfiddle.net/jtmorris/rz3Uv/.

8 Comments

John Morris

Hmm. I seem to recall trying that, but didn’t see any change. Of course I didn’t put much effort into it. I put the majority of my troubleshooting effort into making sure the problem wasn’t with WordPress. Once I was satisfied it wasn’t a WordPress issue, I figured it was due to being hidden before setting it up.

I may go and retry the refresh method later and I’ll add that to the post.

Reply

Leave a Reply