[Resolved] WYSIWYG field not accepting input, buttons not working, etc

[Author]

Posts

[davidS-53]

A site user reported being unable to enter content in a WYSIWG field in a front-end form. My testing has confirmed the issue.

• In Visual mode, none of the buttons accept any clicks. Clicking them does nothing.
• Content cannot be typed into the text area.
• In Text mode, the buttons etc from Visual mode still display, but I'm able to enter text into what looks like a second field appearing below the visual text field.

I've tried disabling all plugins except Toolset ones and this hasn't helped. I've also cleared caches.

The page in question is hidden link
The page contains "tabbed" content. The form can be found under the Instructor Profile tab.

[Nigel]

Hi there

I notice on the front end where the problem occurs there are JS errors from tinyMCE, which is the WordPress library used to render WYSIWYG fields.

Checking the back-end I see that the page is created with a page builder, Cornerstone, which includes tabs, and the content for the Instructor Profile tab comes from another Cornerstone shortcode.

I suspect this combination is causing problems with the required assets being loaded properly.

To confirm and isolate the problem, could you create a test page that doesn't use the page builder, and insert the form which appears in the Instructor Profile tab directly in to the page.

Visit the page on the front end. Does it work correctly?

If so, can you remove the page content and now design the page with Cornerstone, just adding the Toolset Form without locating it inside tabs. Does it still work okay? I suspect the problem may arise because the form is initially hidden when the page loads and that affects the loading of the required assets, but I don't know, and this will help narrow down the source of the JS error.

[davidS-53]

Hi Nigel,

That's great advice, thank you! I too noticed the tinyMCE JS errors but was unable to isolate these to a plugin conflict. I didn't think to check if it was a theme conflict.

I've now tested the form on a blank page edited via Gutenberg rather than Cornerstone and unfortunately the issue remains, so that probably rules out Cornerstone being the issue. You can try it here: hidden link

We have a separate Post Form for editing profiles which is set up to only appear on instances of the custom post type. The template for this is managed with Toolset, not Cornerstone. It is exhibiting the same problem.

What should we try next?

[davidS-53]

Hi again,

I just tried swtiching to the default 2024 theme and this fixed the error so that isolates it to Themeco Pro and Cornerstone. I'll do some more digging on this, but let me know if you have any suggestions.

[Minesh]

That is it.

Glad that you found the conflict and feel free to share if you find resolution for that so it may help other users.

[davidS-53]

Hi team, I found the conflict in a piece of custom code in my Theme files. This code has been in the site for years so I'm not sure why it's suddenly causing an issue, but perhaps you can see something:

[code]
// Superscript all instances of the registered trademark symbol

var excludedPage = $("body").hasClass( "woocommerce-cart" );

$("body #x-root").html(function() {
if (!excludedPage) {
return $(this).html()
.replace(/<sup>&reg;<\/sup>/gi, '&reg;')
.replace(/&reg;/gi, '^&reg;')
.replace(/®/gi, '^&reg;');
}
});
[/code]