M2 - TinyMCE4 JavaScript disappear after switch to TinyMCE and back to HTML editor

Question

I am using the TinyMCE to add content to CMS pages and static blocks. With TinyMCE editor disabled I add HTML and javascript code. For example

<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button> 

Save the page and reopen it. The page opens with a TinyMCE editor showing the content. But when I switch to a simple editor to edit the content, the js code is stripped. This is what I see.

<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<p><button type="button">Click Me!</button></p>

I have this problem with Magento 2.3 & 2.4 What am I doing wrong?

Thanks

Answer 1

You are not doing anything wrong, it is just the behavior of the Wysiwyg text editor.

What I do recommend is not to add Javascript in the Wysiwyg editor at all (rather use code editor), but unfortunately once anyone switches from code editor to Wysiwyg editor and save; all your Javascript changes will be gone immediately.

Suggestion: Disable Wysiwyg editor completely.

However that prevents users that do not understand HTML to edit at all, if that is an issue, at least prevent Wysiwyg editor from being shown by default, in other words show code editor first.

Change default editor/Disable Completely

Go to the Backend settings -> Store -> Configuration -> General -> Content Management -> Wysiwyg settings -> Disable as default or Disabled Completely

Answer 2

You can open js lib/web/tiny_mce_4/tinymce.min.js and search for extended_valid_elements and add y("script[src|async|defer|type|charset]"), in your tinymce.min.js .This will allow your javascript in TinyMCE. Warning: Allowing script elements () in TinyMCE exposes users to cross-site scripting (XSS) attacks.