Menu
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><html> <p>Text</p> </html> </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.
394
The TinyMCE getContent and setContent methods You can do this using the getContent() API method. Let's say you have initialized the editor on a textarea with id=”myTextarea”. This will return the content in the editor marked up as HTML.
The Advanced Code Editor Plugin To open the Code dialog: On the menu bar, open View > Source code. On the menu bar, open Tools > Source code. Click the Source code toolbar button.
TinyMCE is an incredibly powerful, flexible and customizable rich text editor. This section will help configure and extend the editor by using TinyMCE plugins.
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.
90
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
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With