tinymce "codesample" plugin executes HTML tag

18
votes

I am using codesample plugin of tinymce which is mentioned here https://www.tinymce.com/docs/plugins/codesample/ in my custom portal.

Everything works fine, until, I have to "re-edit" the data stored in database.

When i go to edit, all data stored in database within

<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>

is stripped and shown as only

<pre><code>Text </code></pre>

when viewed from "Tools > Source"

I am already using "htmlentities" in my textarea like :-

<textarea><?php echo htmlentities($content); ?></textarea>

It still strips all html tag used inside the tag created by codesample plugin.

FAQ : 1. When adding data for the first time everything works fine. 2. Problem is only when i go to edit page. Tinymce strips only HTML code from codesample plugin. Rest all code that has been added using codesample like "css,python,php" etc., are displayed in editor.

4
phptinymce-4tinymce-plugins
htmlentities will have no effect on text which has already been converted to html entities. Your problem is probably somewhere else. – apokryfos
what does the raw data in the database look like? To establish if this htmlentities change is occuring on save or retrevial of said data. – Martin
It is exactly , what it is in "tools > source code" of tinymce. – John Cargo

4 Answers

5
votes

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.

3
votes

Ok, after lots of research, I found that it is an encoding issue. One need to encode each entity like :- < , > to &lt; , &gt; .

And & character inside <code> tag to &amp; , that means &lt; within <code></code> tag becomes &amp;lt;.

Thus, Code like below :-

<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>

should be like 

&lt;pre&gt;&lt;code&gt;&amp;lt;html&amp;gt; &amp;lt;p&amp;gt;Text&amp;lt;/p&amp;gt; &amp;lt;/html&amp;gt; &lt;/code&gt;&lt;/pre&gt;

So, for all users who are finding solution. This is the solution.

Remember, & inside <code> &amp;lt; </code> tag should only be converted to &amp; . Notice &lt; inside <code> tag is &amp;lt;

Cheers

0
votes

Use setContent function to add the content once TinyMCE is loaded:

setup: function (editor) {
    editor.on('init', function () {
    var theContent = '<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>';
    this.setContent(theContent);
    });
}

Source: Tags Get Removed When Using Codesample Plugin with TinyMCE

0
votes

Sorry to say but I find TinyMCE just too convoluted in dealing with "code". I put up with the numerous & n b s p ; that appear everywhere – but I've resorted to just adding images for code snippets or linking out to a modal popup.