Wordpress - how to fix a broken visual editor
This almost certainly happens because WordPress cannot load the TinyMCE editor files or the TinyMCE javascript code could not be run. Try these things:
1) Make sure your browser has javascript enabled!
2) Open this URL in your browser http://<yoursite>/wp-includes/js/tinymce/wp-tinymce.php
You should see a lot of text, starting something like this:
// 4.0.21.1 (2014-04-09)
!function(e,t){"use strict";function ...
If you see this text then go to point 3 below, otherwise you possibly see one of those responses:
- You get a 403 error: There's a problem with your .htaccess or other web server configuration.
- You get a 404 error: Check if the file
wp-includes/js/tinymce/wp-tinymce.phpexists; if it does then make sure the permissions of all directories and the .php file itself are set to to 755 (read + execute) - You get a 500 error or a white page: There's something fundamently wrong on the page. Try to disable all your plugins and switch to the Twentyfourteen theme. Then turn on each plugin one by one and test the page after each plugin is enabled
3) With Firefox or Google Chrome log into your WordPress Admin. Hit F12 if you are using Windows or Cmd+Alt+I if you have a Mac -> this brings up some developer tools. Now edit your post and check if there is an error message displayed in the console of the developer tools.
Most likely there is a javascript error. You need to deal with that JS error to solve the issue; I cannot give a general tip how to do this, as this is very individually. However, any error could be caused by a plugin or the theme you are using. You can try the same stuff as for the 500-error above.
In case this did not solve your problem or you need more help please post additional information as a comment here what both tests did return (i.e. which JS error or what error code you got)
After days of researching old posts regarding the TinyMCE errors (not finding a URL that was totally ok), I found that Sucuri or Wordfence had added an .htaccess file to the wp-includes folder which was causing conflicts.
Check wp-includes for any rules that may not allow the site to read the proper files.
To do a quick test, backup wp-includes/.htaccess, then empty the file, then reload the page you're trying to edit.
In our case it was the host. Besides the permission level of the wp-tinymce.php file set to 644 (we changed is to 755), the host was blocking all php execution in that folder wp-includes/js folder. An appreciative strategy but now a headache.
Contrary to another user's response, Wordfence did not add any htaccess file to block this section nor did the issue resolve after disabling all plugins.
In fact, I was able to read any file located at that folder except for any PHP file. That's when I learned about the host restriction.
Hope that helps others with a similar hosting environment.