Tags Get Removed When Using Codesample Plugin With Tinymce

Since 4.3.0 TinyMCE includes Codesample plugin that lets you enter code snippets. This works very well for languages like Java, PHP, C# etc. that are not directly running in the br

Solution 1:

If you want to reload content into TinyMCE that was previously stored in your database I would use TinyMCE's JavaScript APIs to load the data after the editor is initialized. I have created a fiddle to show how you would do this.

http://fiddle.tinymce.com/50faab/3

In this example the content that would have come out of TinyMCE from a prior edit is in the theContent variable:

var theContent = '<preclass="language-markup"><code>&lt;ul&gt;&lt;li&gt;one&lt;/li&gt;&lt;li&gt;two&lt;/li&gt;&lt;/ul&gt;</code></pre>';

(In a real application you would of course grab this from the database and inject it into the web page instead of hard coding the value)

I then use the TinyMCE API for setContent to add the content to TinyMCE once its loaded:

setup: function (editor) {
    editor.on('init', function () {
    var theContent = '<preclass="language-markup"><code>&lt;ul&gt;&lt;li&gt;one&lt;/li&gt;&lt;li&gt;two&lt;/li&gt;&lt;/ul&gt;</code></pre>';
        this.setContent(theContent);
    });
}

When you do it this way the editor will properly syntax highlight the code sample content (as seen in the Fiddle).

<textarea> tags and HTML are a difficult combination if you have anything beyond the simplest of HTML so I would avoid dropping HTML directly into the <textarea>.

Solution 2:

Expanding on Michael's answer, putting your content into a hidden DIV, then grabbing it's html works better for me:

<div class="theDiv">
    <preclass="language-markup"><code>&lt;ul&gt;&lt;li&gt;one&lt;/li&gt;&lt;li&gt;two&lt;/li&gt;&lt;/ul&gt;</code></pre>
</div>

var theContent = $('.theDiv').html();

Solution 3:

The answer of Felix Riesterer in the forum of TinyMCE might be of help as well:

Yes, in the way I pointed out: < > and " need to be properly encoded as < > and " because these characters have a special meaning in HTML context. So if you want to comply with the specs (and TinyMCE expects you to do so!) you need to convert these characters accordingly. There is no way around that.

And yes, I forgot to mention that & (ampersand) needs to be encoded as & as well.

You might have to double-encode stuff: If you want to see "" you need to code &lt;h1&gt; so the HTML code renders as plain text. The logic behind it is like this:

1. content gets decoded into raw text (&lt; gets translated to <, &amp; becomes &)

2.raw text gets treated as original HTML code for the editor contents (&lt;h1&gt; renders as <h1>, <h1> renders as a first-level heading)