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.
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.
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 <.
Thus, Code like below :-
<pre><code><html> <p>Text</p> </html> </code></pre>
should be like
<pre><code><html> <p>Text</p> </html> </code></pre>
So, for all users who are finding solution. This is the solution.
Remember, & inside <code> < </code> tag should only be converted to & . Notice < inside <code> tag is <
Cheers
Use setContent function to add the content once TinyMCE is loaded:
setup: function (editor) {
editor.on('init', function () {
var theContent = '<pre><code><html> <p>Text</p> </html> </code></pre>';
this.setContent(theContent);
});
}
Source: Tags Get Removed When Using Codesample Plugin with TinyMCE
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.
Related
Here's my problem: I am using for the first time TinyMCE for a textarea for data that is inserted into a database to display on a blog.
I type data into the textarea, insert into the database table, and when the text arrives in the database it has html tags. When it displays on the web page it display html tags. The tags are apparently added by TinyMCE, which might be okay if they worked. But they do not work. They only display.
I have searched but cannot find an understandable solution. I tried sanitizing the posted data. I tried removing all filters. Nothing works.
A solution suggested adding this, which I added to the head under the cdn link, but to no avail:
<script>
tinyMCE.init({
mode: "textareas",
theme: "advanced",
force_br_newlines: false,
force_p_newlines: false,
forced_root_block: '',
});
</script>
If anyone can help, I would appreciate it.
Try using the following tags when you output data from your database
echo htmlspecialchars_decode(stripslashes($your_custom_variable));
The reason I need to do this is that the website I'm working on uses the exact same template to display dynamic content for multiple pages. All pages replicate the exact same div id's because they display the content the same way (except for the header content!). The header content shortens however the div id's still remain within the source code.
The blog index page needs to display 1 background image while every other page on the website displays another background image.
Thanks in advance for any help.
This snippet of code will do what you want:
if (window.location.href.indexOf('somepart_of_the_url') != -1) {
//Change background to some div
$('#somediv').css('backgroundImage','url(images/mybackgroundimage.jpg)');
//Change background to page body
$("document.body").css('backgroundImage','url(images/mybackgroundimage.jpg)');
}
I often give the body class a name based on the template or request path. I know you said that they all use the same template, but that template takes params and one of the params should be
body_class
And whatever controller/dynamic thing you have populating your site and rendering the template, should pass in 'home' when you're at /. In my previous experience, I would pass in other things as well so that /blog/category/post might have a body class like
<body class="post two-column-a">
Then your selectors are something like:
body { ... }
body.home { ... }
This works:
<script language="javascript">
$(document).ready(function() {
if (window.location.href.indexOf('INDEX_URL') != -1) {
//Change background
$('#DIV_ID').css({'background-image': 'url(http://URL.com/images/BG.jpg)', 'background-repeat': 'repeat-x', 'background-position': 'center top', 'width': '100%!important', 'min-height': '400px'});
}
});
</script>
The flaw that this code has though is that if you insert a directory into "INDEX_URL" such as /folder/, any page after /folder/ will have that background.
I want to print only the image in a HTML page.
I used
function printImg(){
var URL = "image.png";
var W = window.open(URL);
W.window.print();
}
But executing the code, whole page prints rather the image. Are there any method to print only the image? Pls guide me.
Thanks.
create one print.css that hide all other unwanted divs except the image
If you heard about CSS Media types then you can achieve your desired task with this technique.
Example:
Define Media Type Print and then add a css class.noprint with a css rule display:none; in your css file like given below:
#media print {
.noprint{ display: none }
}
And then apply this class on the elements you don't want to print.
SEE AN EXAMPLE
Hope this will help you a lot.
Use
W.print();
instead of
W.window.print();
W.window makes reference to the parent's window of the pop-up.
Besides this you may consider using an empty page with a window.print triggered on load, instead of your current method which is not waiting for the image to be ready.
== EDIT ==
This can't be done. You can't modify browser settings (i.e. printer settings) from JavaScript
Finally I thought of convert my result to PDF format and print using FPDF Library
You can create an image element then append it to the DOM.
function printImg() {
var img = document.createElement( "img" );
img.src = "image.png";
document.body.appendChild( img );
}
I want to store html that isn't to be rendered until needed either within a tag that can hold raw html code without rendering it on page load or store it within a php or jquery variable for later use. I then want to be able to insert the html into the DOM on button click and have it render.
I've tried storing it within an xmp tag as that can store html code with the < and > characters without using character codes for them, but when trying to insert it into the DOM, the updated source shows it had been copied but it wouldn't render on screen. Also tried storing it within a code tag, which worked on a desktop browser but not in mobile safari. Since this is a webapp mobile browser compatibility is important.
Anyone know of a good method of doing this?
Try <script> tags with a type of text/plain or text/html:
<script type="text/plain" id="example">
<div class="example">
<h2>Hello</h2>
<p>World</p>
</div>
</script>
$(".button").click(function () {
var html = $("#example").text();
$("#destination").html(html);
});
It depends on where do you want to generate the content in question. If it's easier for you setup to generate it on the server side, you can use css to hide those parts (like display:none) and just remove the css property or grab the nodes with javascript and put them elsewhere with something like this:
$('.target').html($('.hidden_node').html());
If you want to generate the content on the js side, you can build it as a long string and just shove it into the target, or you can use jquery's node generation syntax like:
$('<div />').attr({
class: 'test'
}).appendTo("body");
Or you can use one of the various javascript templating solutions like mustache or handlebars.
i'm using tinyMCE and i can't find the answer for this in their forums.
I'm using the "media" plugin to embed flash. the html result in html preview is normal:
<p><iframe src="http://www.youtube.com/embed/lWRi7gDYjVY" frameborder="0" width="425" height="350"></iframe></p>
the result saved to the database is quite different though, using mysql_real_escape_string it saves:
<p><img data-mce-json="{'type':'iframe','video':{'sources':[]},'params':{'src':'http://www.youtube.com/embed/lWRi7gDYjVY','frameborder':'0'},'width':'425','height':'350'}" class="mceItemMedia mceItemIframe" src="http://localhost/assets/scripts/tiny_mce/themes/advanced/img/trans.gif" data-mce-src="assets/scripts/tiny_mce/themes/advanced/img/trans.gif" width="425" height="350"></p>
and that is what is rendered on my page's html, showing only a white space the size of the iframe...
I'm really stuck and i don't know what to do.
Thanks
/Update/
well, i found out the source of the problem: i am saving my contents through AJAX; i haven´t found a way to get the HTML content out of the editor with javascript so i was hacking it with a jQuery selector:
$('div').find('iframe').contents().find('body').html()
so that way i get the "wrong html" and it only happened with youtube videos so far.
My question is: how can i obtain the editor's HTML so i can post it through AJAX?
Thank you once again.
To obtain the editor's HTML use the following
// this is "content" by default else it is the id of your
// html element you get the editor for (usually a textarea)
var editor_id = 'put_your_editor_id_here';
editor = tinymce.get(editor_id);
var content = editor.getContent();
You may have a closer look at the tinymce API.
This is because the media plugin strips the tags that are considered invalid.
Can you try to change the option Valid_elements in Init and assign to [].
Try it.
good luck