WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 4 years ago

#26778 closed defect (bug) (invalid)

Visual editor not showing wysywig editor and white text on white background

Reported by: marcreck Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: TinyMCE Keywords:
Focuses: Cc:

Description

This happened on 5 of my 7 sites and ive just solved after 4 hours of trying thanks to a tip from inmotion hosting support (after trying the other suggestions id read of disabling all plugins, reinstalling wordpress manually and changing to a different theme)

Go to users >> profile, disable the visual editor, click save, then re-enable and click save again. Worked for all of my 5 sites. \o/

Thought id best file a bug report as quite a serious issue that needs remedying in next update.

All the best

Change History (34)

#1 @SergeyBiryukov
6 years ago

  • Component changed from General to TinyMCE

#2 @marcreck
6 years ago

Spoke to soon, it seems that method only worked for one of my sites :( Problem still remains for the rest. Any ideas as to something to try id really appreciate it, as been trying to solve it all day now :(

#3 @marcreck
6 years ago

Actually scrub that. Now only works on that site with default theme running so think that was the reason it worked before. Changing the theme doesnt work for any of the other sites :(

#4 @azaozz
6 years ago

  • Keywords reporter-feedback added

What JS errors do you see? Open the browser console (F12), load the Edit Post screen and paste any JS errors you see in a comment.

#5 @johnbillion
6 years ago

  • Keywords reporter-feedback removed

Are all users on your sites seeing the same problem?

Can you let us know which browser(s) and operating system you're using?

Are you using any browser add-ons that might be affecting things?

Do the "Visual/Text" tabs show up on the editor?

#6 @johnbillion
6 years ago

  • Keywords reporter-feedback added

#7 @marcreck
6 years ago

Thanks for your replies.

When opening the reckorder.com site loading the edit post screen i get this error below

GET http://www.reckorder.com/wp-includes/js/tinymce/plugins/wpgallery/editor_plugin.js?ver=359-20131026 522 (Origin Connection Time-out) tiny_mce.js?ver=359-20131026:1
b tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
c.each tiny_mce.js?ver=359-20131026:1
o tiny_mce.js?ver=359-20131026:1
loadScripts tiny_mce.js?ver=359-20131026:1
loadQueue tiny_mce.js?ver=359-20131026:1
n tiny_mce.js?ver=359-20131026:1
k.create.render tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
c.each tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
j tiny_mce.js?ver=359-20131026:1
y tiny_mce.js?ver=359-20131026:1
i tiny_mce.js?ver=359-20131026:1
Last edited 5 years ago by SergeyBiryukov (previous) (diff)

#8 @marcreck
6 years ago

With regards to the next questions
I am the only admin / user of the sites, the operating system is mavericks on macbook pro late oct 2011 model.
Its the same on safari and chrome
The visual and text tabs both show up, but its the visual tab that doesnt load the wysiwyg editor, and the black cursor doesnt show. You can type but its white font on white background.
I have 4 sites that its not working on all with pretty much the same plugins, and each with an elegant themes theme.
djnarrative.co.uk is the only one where i can disable the theme and load up the default 2014 theme and the visual tab starts to work. If i load the default theme for any of my other sites it makes no difference to the visual tab.

#9 @marcreck
6 years ago

In terms of chrome extensions i am using these chicklet extensions - evernote web clipper, diigo, add to feedly and speed dial 2. In safari i dont think im using any extensions

#10 @marcreck
6 years ago

Ive also just installed firefox and that is the same

#11 @marcreck
6 years ago

  • Keywords dev-feedback added; reporter-feedback removed

#12 @marcreck
6 years ago

Ive just done another error console for another site and it came up with this when i clicked a few times on the visual tab

GET http://www.djnarrative.co.uk/wp-content/themes/Fable/epanel/shortcodes/js/editor_plugin.js?ver=359-20131026 522 (Origin Connection Time-out) tiny_mce.js?ver=359-20131026:1
b tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
c.each tiny_mce.js?ver=359-20131026:1
o tiny_mce.js?ver=359-20131026:1
loadScripts tiny_mce.js?ver=359-20131026:1
loadQueue tiny_mce.js?ver=359-20131026:1
n tiny_mce.js?ver=359-20131026:1
k.create.render tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
c.each tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
j tiny_mce.js?ver=359-20131026:1
y tiny_mce.js?ver=359-20131026:1
i tiny_mce.js?ver=359-20131026:1
Failed to load: http://www.djnarrative.co.uk/wp-content/themes/Fable/epanel/shortcodes/js/editor_plugin.js tiny_mce.js?ver=359-20131026:1
Resource interpreted as Font but transferred with MIME type text/plain: "chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/fonts/GothamSSm-Medium.otf". filing_tools.html:1
Resource interpreted as Font but transferred with MIME type text/plain: "chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/fonts/GothamSSm-Bold.otf". email_sharing.html:1
Resource interpreted as Font but transferred with MIME type text/plain: "chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/fonts/GothamSSm-Book.otf". global_tools.html:1
Last edited 5 years ago by SergeyBiryukov (previous) (diff)

#13 @marcreck
6 years ago

And this for mrelephant.co.uk when typing in the visual tab (white font on the white background)

Failed to load resource: the server responded with a status of 522 (Origin Connection Time-out) http://www.mrelephant.co.uk/wp-includes/js/tinymce/wp-tinymce-schema.js?ver=359-20131026
GET http://www.mrelephant.co.uk/wp-includes/js/tinymce/plugins/paste/editor_plugin.js?ver=359-20131026 522 (Origin Connection Time-out) tiny_mce.js?ver=359-20131026:1
b tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
c.each tiny_mce.js?ver=359-20131026:1
o tiny_mce.js?ver=359-20131026:1
loadScripts tiny_mce.js?ver=359-20131026:1
loadQueue tiny_mce.js?ver=359-20131026:1
n tiny_mce.js?ver=359-20131026:1
k.create.render tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
c.each tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
j tiny_mce.js?ver=359-20131026:1
y tiny_mce.js?ver=359-20131026:1
i tiny_mce.js?ver=359-20131026:1
GET http://www.mrelephant.co.uk/wp-includes/js/tinymce/plugins/wpdialogs/editor_plugin.js?ver=359-20131026 522 (Origin Connection Time-out) tiny_mce.js?ver=359-20131026:1
b tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
c.each tiny_mce.js?ver=359-20131026:1
o tiny_mce.js?ver=359-20131026:1
loadScripts tiny_mce.js?ver=359-20131026:1
loadQueue tiny_mce.js?ver=359-20131026:1
n tiny_mce.js?ver=359-20131026:1
k.create.render tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
c.each tiny_mce.js?ver=359-20131026:1
(anonymous function) tiny_mce.js?ver=359-20131026:1
j tiny_mce.js?ver=359-20131026:1
y tiny_mce.js?ver=359-20131026:1
i tiny_mce.js?ver=359-20131026:1

Version 0, edited 6 years ago by marcreck (next)

#14 @marcreck
6 years ago

Aside from this the sites are all working as normal.

#15 @dd32
6 years ago

Seems you're using Cloudflare for all these domains, I'd first rule that out as being the common factor between them. Can you connect to one of your WordPress sites without using CF?

522 (Origin Connection Time-out) = This means that Cloudflare timed out while waiting for your server to respond with the JS files. All the URL's are loading fine for me at present, which suggests that cloudflare may have disabled caching for your user request (maybe because there were cookies involved) or your servers are under a high load causing the JS file never to be delivered to CF.

You may also want to check that the JS files are not being processed through PHP (It'd be a bad server configuration if that was the case) which might account for why the JS only times out on your requests and not others, but that's only a wild guess.

#16 @marcreck
6 years ago

Thanks for your reply

yes inmotion hosting asked me to use cloudflare to alleviate the cpu shared server load and address spam attacks. This is all above my level of understanding, but cloudflare were the 1st people i asked via support about this issue as i have 2 other sites that arent hosted on cloudflare and they work fine. Weirdly i also have another on this server which is through cloudflare and the visual tab is working as normal. Ive also asked inmotion currently in a support ticked and now your good selves. Its really frustrating as i dont really understand all this and inmotion and cloudflare seem to suggest each other is at fault. My other site project.reckorder.com is not even letting me access it also coming up with a 522 error and it quite clearly says that their service is working on the error screen, and that i need to contact the hosting, but the hosting are saying they can see the site fine.

If i repoint everything away from cloudflare and lose the spam protection and the cpu benefits i risk all my sites going down again. Plus it would take a while to propogate the dns.

Is there anything i can use here to inform either side and ask them to do something? Are those questions above things that i should ask them to check?

Thanks again for looking into it. Im thinking i should just ditch cloudflare and look for some other solution, but it was 3 month of support tickets to get them all back up. (i dont have a lot of visitors it was the spam attacks which ive know got a config of wordpress plugins installed alongside free cloudflare option)

#17 @marcreck
6 years ago

the other thing to mention is im running wp total cache plugin, which is setup on inmotion instructions. If theres any settings i could try changing in that please let me know (although i did disable it completely)

#18 @dd32
6 years ago

You should probably contact inmotion hosting and asking them to look into why you're receiving 522 errors from cloudflare (indicating a origin fetch failure), if Immotion can fix that, it'll probably fix your issues.

I do strongly believe that it's Immotion Hosting's issue, and not yours, CloudFlare's or WordPress's.

The only way I can suggest testing, would be to make a test install on a subdomain of your site, and have CloudFlare ignore the domain (In CF you can specify something to go through CF, or go around it).

#19 @nacin
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

#20 @marcreck
6 years ago

Thanks for your reply - Still in contact with inmotion after passing that on (and cloudflare) and seems that they dont seem to suggest any issue, with no resolution and still happening on my side whatever browser i use. Frustrating thing is that they cant see the error from their side. the project.reckorder.com site which comes up with a 522 cloudflare error screen / contact your hosting - doesnt show for them and it loads as it should. Then for some reason it will load for a short time for me and go back to the error screen for most of the day. The visual tab on wordpress started to work for a few of my sites so its now only the reckorder.com and the djnarrative.co.uk that doesnt show it. Again the tier 2 level of support cannot replicate the issue. It must be cloudflare, but i cant disable otherwise sites go down.

Anyway, apologies for confusion as seems wordpress is the only thing it isnt :) Hope someone suggests the resolution soon as getting to be a daily chore now. all the best and thanks for your work on wordpress.

#21 @johnbillion
6 years ago

  • Keywords dev-feedback removed
  • Summary changed from Wordpress 3.8 update - visual editor not showing wysywig editor and white text on white background to Visual editor not showing wysywig editor and white text on white background

This is probably moving into support forum territory now, but here's one suggestion for you. Does Cloudflare let you exclude certain URLs? If so you could exclude wp-admin and see if that resolves the issue.

#22 @marcreck
6 years ago

Thanks so much for the suggestion. Great idea. I've passed on to cloudflare and keeping fingers crossed. All the best

#23 @toscho
5 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

I have the same problem. The inspector says it comes from wp-includes/css/editor.css line 766.

.js .tmce-active .wp-editor-area {
	color: white;
}

See also this question on WordPress Stack Exchange.

The strange part is that it doesn’t affect all instances, and I could not find a common trigger.

#24 @nacin
5 years ago

I've probably seen this before, but assumed it was due to an incomplete TinyMCE load.

#25 @SergeyBiryukov
5 years ago

I see this on support forums once in a while. Usually it's caused by a plugin interfering with TinyMCE loading.

#26 @SergeyBiryukov
5 years ago

  • Milestone set to Awaiting Review

#27 follow-up: @toscho
5 years ago

Found it! The text is white when the name attribute contains brackets.

Test case:

add_action( 'add_meta_boxes_post', 'register_test_meta_boxes' );

function register_test_meta_boxes() {
	add_meta_box( 'test_meta_box_1', 'Test box 1', 'render_test_meta_box_1' );
	add_meta_box( 'test_meta_box_2', 'Test box 2', 'render_test_meta_box_2' );
}
function render_test_meta_box_1() {
	$name = 'Foo';
	echo "Name: $name <br>";
	wp_editor( "<p>hello?</p>\n", $name );
}
function render_test_meta_box_2() {
	$name = 'Foo[b]';
	echo "Name: $name <br>";
	wp_editor( "<p>hello?</p>\n", $name );
}

The second box content is white, and the markup renders as text.

#28 in reply to: ↑ 27 @azaozz
5 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from reopened to closed

Replying to toscho:

Found it! The text is white when the name attribute contains brackets.

This is actually the editor ID and should not contain square brackets. There is a special param that can be passed to wp_editor() to set the textarea name to a different value. Square brackets can be used there.

Re-closing as this is a known limitation.

Last edited 5 years ago by azaozz (previous) (diff)

#29 follow-ups: @toscho
5 years ago

I know it isn’t valid. But it breaks backwards-compatibility, and it doesn’t even throw a JavaScript error to explain it. Just leaving people alone with such a change is not a good solution.

#30 in reply to: ↑ 29 @nacin
5 years ago

  • Milestone set to 3.9

Replying to toscho:

I know it isn’t valid. But it breaks backwards-compatibility, and it doesn’t even throw a JavaScript error to explain it. Just leaving people alone with such a change is not a good solution.

toscho, can you open a new ticket for this? This bug report is kind of all over the place and isn't specific to the 3.8 regression you are reporting.

#31 in reply to: ↑ 29 @tollmanz
5 years ago

Replying to toscho:

I know it isn’t valid. But it breaks backwards-compatibility, and it doesn’t even throw a JavaScript error to explain it. Just leaving people alone with such a change is not a good solution.

I would argue that this is not a regression. In 3.8.1, the docblock states that the $editor_id value can only be /[a-z]+/. Before I realized this in 3.8, I used a bracket in $editor_id in an instance of wp_editor (not realizing that I could set the textarea_name value independently). This broke the link button for me because the $editor_id value is used as part of a jQuery selector, which does not allow brackets. I had to override this function for it to work.

WordPress 3.9 broke this further and I experienced the problems that you did; however, because WordPress' docs clearly advised that brackets are not allowed and because the editor did not work fully with brackets in the previous version, I do not see this as a regression given that the updated code is acting on assumptions that are articulated for appropriate use of the API. My solution was to update my code as it is clear that there is a good reason why brackets are not allowed for the $editor_id value.

#32 @toscho
5 years ago

See #27601 – Add a warning when $editor_id in TinyMCE is invalid

#33 @SergeyBiryukov
5 years ago

  • Milestone 3.9 deleted

#34 @azaozz
4 years ago

#33421 was marked as a duplicate.

Note: See TracTickets for help on using tickets.