Render the presence of a <script> tag in TinyMCE

Question

I managed to get TinyMCE to keep my <script> tag in the source, so it is no longer stripped as an invalid tag. However, in edit mode, it doesn't render anything. The script tag is there in the html view, but it's just a blank line in edit mode.

Instead, I want tinyMCE to render anything instead of nothing. Even if it is just simple text like [here lies a script]. Is this possible? How? I can't get it working for the life of me. Thanks!

Answer 1

You can use stylesheets to style script elements, I would advise trying that in TinyMCE, here's a fiddle so you can see what I mean:

https://jsfiddle.net/plenuM/m9zr1dqw/

script {
 display:block;
 height:20px;
 width:100%;
 background:red;
 text-align:center;
 color:#fff;
 overflow:hidden;
}
script:before {
 content:"(SCRIPT)";
}

You will want to only import the CSS when TinyMCE is active though, the TinyMCE documentation can assist you with that.