在TinyMCE中使用Codesample插件时，标签会被删除

Question

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 browser. You save your code snippet to the server, load it back into the browser, edit it, and save it back to the server again - no hassle.

If you want to do it with HTML, JavaScript, or XML, then it seems not to be possible to load the code snippet back into the browser after saving it to the server. Most of the tags will be removed, despite being already encoded before.

See TinyMCE Fiddle 1 and TinyMCE Fiddle 2 that try to illustrate the problem.

Any ideas? Many thanks in advance!

Answer 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 = '<pre class="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 = '<pre class="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> .

Answer 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">
    <pre class="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();

Answer 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 )