why does tinymce move content out of <pre><code> tags? - or auto-close the tags?

Question

Describe the problem... I am using tinymce in a proprietary CMS. I want to display code examples on a web page. I am using "pre" and "code" tags. Strangely, tinymce moves my code example out of the tags and puts it below the now empty "pre"/"code" tags. Or it is closing tags when it doesn't need to. Any insight into why tinymce is doing this would be greatly appreciated.

Actually, as I am typing this up, it occurs to me that possibly tinymce thinks that it needs to close the beginning and ending tags and is not actually moving anything.

Where I have searched... I have searched extensively and cannot find any examples of tinymce moving code out of tags or trying to close tags when not needed.

I did run across some responses that indicated that tinymce was not auto-closing tags, but that there was invalid html and the browser was doing the auto-closing. however, it looks to me like I have written valid html.

Show the code... Here is my code that I used to test this. keep in mind I am using a proprietary CMS.

<pre><code>
&lt;div class="pblk25"&gt;
   &lt;p&gt;blarg&lt;/p&gt;
&lt;/div&gt;
</code></pre>

I had initially used angle brackets for my example, but read that was supposed to used named entities to keep the example from being processed and displayed by the browser. Nevertheless - the result is the same each way.

Show expected and actual results... My expected result on the webpage is

<div class="pblk25">
    <p>blarg</p>
</div>

The actual result when doing "view source" is

<pre><code></code></pre>
<div class="pblk25">
<p>blarg</p>
</div>
<pre><code>
</code></pre>

Notice on the first line the appearance of </code></pre>. And on the next to last line the appearance of <pre<>code>.

Which is then displayed on the web page as

blarg

Thank you for your kind assistance with this puzzling situation.

I continue to work on trying to solve this. I have become convinced that it is not tinymce closing the pre/code, but rather the browser because of invalid html. I believe the invalid html is the "&" in front of lt and gt. If I replace it with &, then the pre/code are not auto-closed. still not working the way I want it to yet, but I believe I have solved at least part of this puzzling. — Dean Atteberry

Spyder Spyder · Accepted Answer · 2019-06-03T04:26:04

Are you loading TinyMCE using a textarea? It looks like you need to do an extra HTML encode pass on the entire content.

With the TinyMCE fiddle, if I paste the source code into the textarea tag used to load the editor I see the same results. However, if I paste into the editor's source code dialog it shows up correctly.

What you're seeing is an unfortunate historical fact about textarea tags; browsers appear to allow raw HTML inside them, but doing so is actually invalid. The standard says they HTML encoded. Textarea content is run through a HTML decoder before it's displayed to the user (or TinyMCE). Here's your code without TinyMCE running at all:

http://fiddle.tinymce.com/uJgaab/1

To fix your issue, HTML encode content loaded into the textarea. All of it, such that <pre><div class="pblk25"> becomes <pre>&lt;div class="pblk25"&gt;.

http://fiddle.tinymce.com/uJgaab

why does tinymce move content out of <pre><code> tags? - or auto-close the tags?

1 Answers