Blank Editor In WordPress Fix

 

I recently encountered a problem where when I went to edit posts on a wordpress site and found myself in a situation where I had a blank editor. No editing buttons and no text. It looked something like the image at the top of this post.

Naturally the first thing a seasoned professional does in such circumstances is go to the university of Google. I have long since stopped storing things in my head when anyone who is computer savvy can generally find the answer to any problem they are encountering. Of course it is necessary that for this to work you need to have a very solid base in computing, but since I do, I can utilize the university of Google strategy very effectively.

So, a quick look and trying a few solutions, and nothing’s working. I’ve done the standard disable all plugins, changed a few settings in the wpconfig.php file, even replaced the directory in which the tinymce editor is stored, all to no avail.

So what next? When you’re at a dead end, you look for for something in logs that helps you. This is an eternal truth that you know by heart after years troubleshooting computer systems.

In this case we can inspect elements in Firefox. This is easy to do on any web page. You simply right click on the web page and choose inspect element to open up the inspector. You have the same functionality in Chrome by the way; it’s part of any currrent browser.

Under inspect element there are various options that allow you to look at every aspect of of a web page. Web pages these days are quite complex, with many elements combining to create the active pages that we are used to.

When it comes to WordPress, both on the front end and the back, there is a lot of javascript used. Javascript is a scripting language that is extensively used on web pages.

On the default page – the inspector – we see all of the HTML on the page. Move across one tab  – the console tab – we see any issues associated with the loading of any javascript files.

A bit of background. This site operates via Cloudflare CDN and I’d decided to use Cloudflare to route all my traffic via HTTPS.

This, it turns out is where the problem lies. Once you attempt to use HTTPS, it has a real problem with mixed content, mixed content being any content that is not HTTPS. In this case I see this message, “blocked loading mixed active content”, To the right of the entry, I can tell which javascript file has a problem. No surprises in this case; it’s wp-tinymce.js.

Finally I have the information I need to solve this problem. Simply turning off HTTPS until I have addressed the issue of mixed content and I have it fixed. But how do you turn off HTTPS in such a case I hear you ask. Simple. You can edit wp-config.php and add the lines:

define( ‘WP_HOME’, ‘http://www.example.com’ );
define( ‘WP_SITEURL’, ‘http://www.example.com’ );

making sure that the protocol you are using is HTTP.

Altermatively you can go to Settings-> general and change the URL information in the following fields:

So if you’ve tried everything else to fix the WordPress  blank editor and it hasn’t worked, give this a try. As soon as you see blocked content, you have got to the root cause of the issue.

The solution to this problem also illustrates the troubleshooting process. Logging and inspection is always your friend. It was instantly apparent once I inspected the page where the problem lay. In this case Google had given me nothing, so I had to take these steps. This is an important skill for anyone who seeks to resolve problems they encounter.

As for turning HTTPS on, that happens after a mixed content search and is a story for another day.