Wordpress editor showing white text

6
votes

I have a problem with a Wordpress site, the editor is showing the text as white (on a white background) so unless you highlight the text, you can't see it. This is only in the admin section of the site, the front-end doesn't seem to be affected

enter image description here

I have found where the css is changing the text to white ( /wp-includes/css/editor.min.css ):

.js .tmce-active .wp-editor-area{color:#fff}

I have removed this and cleared the cache (even tried a different browser) but it's still showing in the editor.

Also, the 'Visual' and 'Text' buttons don't work.

Any ideas?

I have gone through an disabled each plugin, one at a time but it still is a problem.

5
csswordpresseditor
I don't think this is caused by a core file and you shouldn't edit those. Can you check with a different theme? Also use browser inspect to check the CSS selector – Aziz
This isn't frontend related, it's only affecting the admin part of the site. Have inspected the element, which is as shown above – RustyIngles
The fact that it's backend related doesn't mean that there isn't a plugin or a theme that can change the color of the editor text. First disable all the plugins one by one and then change the theme and see if the problem goes away. Text isn't white by default... – dingo_d
In my case it was a plugin conflict. De-activating all the plugins and one by one activating them until I saw the error show up in my Chrome dev tools console. – Grant
Can you identify the conflict please?? – Peter Kionga-Kamau

5 Answers

5
votes

Check your javascript console. If you see an error like:

"post.php?post=2840&action=edit:2783 Uncaught ReferenceError: tinymce is not defined"

Then the loading of wp-tinymce.php failing. Because the editor hasn't loaded, it appear as if your text is white, or "invisible" in the editor. This can be worked-around by adding:

define('CONCATENATE_SCRIPTS', false);

(Per Tijmen above, or https://wordpress.stackexchange.com/a/63172/118510)

(I use WP Fastest Cache plugin which has it's own concatenation, so if I use that plugin, then I'm OK skipping the default Wordpress concatenation.)

The root problem, however, is that a request to:

/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408

Is failing or receiving a 404. This could be due to a security restriction on your hosting or CDN.

4
votes

Let's start with the obvious: is your Wordpress install completely up-to-date, including all plug-ins, themes etc?

It could help to actively declare the color to be black, instead of simply removing the line of CSS you removed, so:

.js .tmce-active .wp-editor-area{color:#000000}

Alternatively, this issue has been known to be caused by several plugins, such as PS Disable Autoformatting, however that instance was a few years ago. Did you recently install a plug-in? If so, try disabling that plug-in to see if that returns the editor to normal.

If none of this solves the issue, you can also try downloading Wordpress and replacing the /wp-includes/js/tinymce/ folder. Although it's unlikely, it's not impossible that something went wrong during an update or so.

If nothing else works, according to this link, you can open your wp-config.php file and add the following line at the very top after the php opening tag.

define('CONCATENATE_SCRIPTS', false);
0
votes

I have just fixed this problem and thought it would be worth mentioning this basic check to others. If you are installing another theme or a second theme that installs it's own set of plugins, make sure you don't have any existing plugin composers installed or still activated. This can cause the conflict that makes the text white and the tabs to not work.

For me, I had both CMSMasters Content Composer (From previous theme) and WPBakery Visual Composer (From new theme) installed and active, which gave me this exact issue. I had also tried replacing the tinymce file and adding the extra line to wp-config, but none of these worked. Deactivating CMSMasters Content Composer fixed the white text issue for me.

0
votes

Go into your account settings and check "Disable the visual editor when writing" ... Now try your page and/or post again. You should have text, not in white, and now you should be able to edit your page. Of course, you won't have a visual editor and that isn't any fun. I think this eventually is a server problem where there are not enough resources for all the block rendering for both javascript and css. In Chrome, check the 'performance' of the page in developer tools ... it's likely less than 30.

0
votes

For me, the problem was caused by the way the wordpress editor interacts with vue.js in my plugin's custom admin page.

Specifically, the white-text issue on the editor was caused by being inside of a v-if. There must be some conflict in how v-if renders the content which breaks TinyMCE if it is inside of the v-if.

The fix was as simple as switching to v-show. This causes the TinyMCE to be rendered once on page load and then just hidden as needed. Using v-show causes the editor text and toolbar rendered normally.