tinymce "codesample" plugin executes HTML tag
Ok, after lots of research, I found that it is an encoding issue. One need to encode each entity like :- < , > to < , > .
And & character inside <code> tag to & , that means < within <code></code> tag becomes &lt;.
Thus, Code like below :-
<pre><code><html> <p>Text</p> </html> </code></pre>
should be like
<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>
So, for all users who are finding solution. This is the solution.
Remember, & inside <code> &lt; </code> tag should only be converted to & . Notice < inside <code> tag is &lt;
Cheers
The correct way to insert data into tinymce would not be to print it out or even using htmlentities. Consider the following code
<div class="editor" id="editor">
</div>
<script>
tinymce.init({
selector: 'div.editor',
theme: 'inlite',
plugins: 'image table link paste contextmenu textpattern autolink',
insert_toolbar: 'quickimage quicktable',
selection_toolbar: 'bold italic | quicklink h1 h2 h3 blockquote',
inline: true,
paste_data_images: true,
automatic_uploads: true,
init_instance_callback : function(ed) {
// ed.setContent("<h1>Title</h1><p>Content...</p>");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
ed.setContent(xhttp.responseText);
}
};
xhttp.open("GET", "content.php", true);
xhttp.send();
},
content_css: [
'//www.tinymce.com/css/codepen.min.css'
]
});
</script>
and the file content.php should just simply print the html content
<?php
$content = ''; // Fetch from database
print $content;
?>
notice the function at init_instance_callback while i initialize tinymce. That is the function called after tinymce is initialized. Now rather that directly using print inside the editor, make a ajax call inside init_instance_callback and render it there. I have put in a sample commented line just to help you out with the same. This will also take care of security validation (no script tag execution if any).
Also at the same time to get the contents of the editor while saving it to database is
var content = tinyMCE.get('editor').getContent();
And then you can make an ajax post request to save data to database.
Now why am i using ajax is important. I tried a lot of other methods where i could get away with directly printing it. But that causes a security flaw as script tags could run before the editor is initialized.
I used div in this example but it would be all the same even for text area. Also don't use htmlentities because that would escape the html content and you want to see the content rendered in tinymce and not the escaped version.