how to fix a broken visual editor

9 comments

1. 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.php exists; 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)

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

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

4. After migrating to a new host I found I had the same problem. By adding the Database Charset to wp-config.php everything resolved as normal.

   define('DB_CHARSET', 'utf8')

5. I had this exact issue. Could not toggle between Visual / Text tabs on the editor.

   My issue turned out to be some dodgy coding in the .htaccess file where I’d specified that all .php file types need to have that extension removed from the URL.

   Browser error log pointed out I was missing the …/wp-includes/js/tinymce/wp-tinymce.php file from the server. I checked the server and it definitely was there, checked file permissions and they were fine too. Must mean that the link to the file was causing the issue!

   Added the following code in the rewrite .php section of the .htaccess file and this sorted my issue.

   RewriteCond %{REQUEST_URI} !/wp-includes/js/tinymce/wp-tinymce.php
   

   Hope this helps.

6. None of the solutions above worked for me. Then I found help at 1:55 in the following Youtube video: https://www.youtube.com/watch?v=tGdj1lKPTs8

   Ie I pasted the following code into my site’s wp-config.php file just below the ?php part

   define('CONCATENATE_SCRIPTS', false);
   

   I have no idea what this code means or does, but it fixed the problem for me.

7. There is an interesting post here. WordPress not being able to know the version of a browser breaks some of its functionality, as claimed in the linked source. Some of them were able to fix broken visual editor problem by changing ‘anonymity’ settings either on Anti-Virus or on Firewall.

   If this approach works then I think a firewall rule to allow sharing browser information for requests from a specific IP(where WordPress is installed) would be the solution. I also can’t see this as a solution if ‘Wp Admin’ is being accessed from outside of a network.

8. I had a similar problem. My text and visual editor were totally screwed up. I discovered that this is because of the SiteOrigin Page Builder Plugin I’m using for several pages.

   But after installing the SiteOrigin Widgets Bundle, this two editor views were fixed. This might be a hotfix for other people not using the page builder. Just install both plugins and you have a working text editor. It might not be the default WP editor but the one from SiteOrigin but that’s fine for my usecase.

9. I checked all over about this. I could not edit or see text in wordpress posts or pages. It seemed to narrow down to the tinymce plugin where I found errors through the Chrome console. I tried a number of things without luck. So I disabled tinymce and all is running smoothly. How simple for a problem with so many variables and options for a fix.

Comments are closed.