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
Related
I need to read a text file on a server and display its content in a blog post on Blogger. The text file is a result of a simple download counter and contains a number. The problem is the Blogger does not support PHP codes in a post. My current solution is to use OBJECT tag to call PHP script that displays the text file content with ECHO. It works. But the result is displayed inside a small frame and I can't apply CSS style to it or align it properly with the existing text. Is there another way? I understand it can be done with AJAX call but my scripting knowledge is basic and I wouldn't know where to begin. Help would be appreciated.
To display the result in the blog I used this code:
<p>File test.zip downloaded
<object type="text/plain"
data="http://example.com/statistics.php?dname=test"
width="30" height="30"></object> times</p>
EDIT: I have tried to follow #Toni suggestion but it only leads to more questions. Looks like Ajax call is way beyond my current level of knowledge. Sorry and thank you again.
Here is what I'm currently trying. I have moved the text that goes with the counter inside PHP file so the script now returns a string like "file has been downloaded 8 times" instead of just number "8". Also instead of OBJECT tag I'm using IFRAME.
<iframe src="http://example.com/mystats.php?dname=test"
frameborder="0" border="0" cells pacing="0" height="30"></iframe>
The iframe seems to be easier to style. If I can't figure out how to find which CSS is applied to a blog post and how to apply it to iframe, I can at the minimum mimic the style by using similar font.
You can use javascript with your blogger web-site.
Using javascript on your web-page, you can invoke a GET request to your PHP code and get the data you want, to display it on your web-page.
Below, there are links, to help you with this task:
How to invoke GET request in vanilla JavaScript
Invoking GET with jQuery
Use JavaScript to alter text dynamically
I made it work with JavaScript! Here is how. Server side PHP script reads and echoes a text file inside document.write().
<?php
$varcontent = #file_get_contents('yourtextfile.txt');
echo 'document.write("'.$varcontent.'")';
?>
The resulting string looks like this:
document.write("your text file content here")
Inside the Blogger post add the JavaScript code with the PHP script file as a source:
<script type="text/javascript"
src="http://example.com/yourfile.php">
</script>
Done! The content of your text file is displayed and styled with your current CSS.
Hey guys so I have a basic PHP application that loads a page with a video on it from one of those free TV streaming sites. You set the episode, season and show you wish to view and the server application parses the HTML tag of the iFrame that contains that video. The application works by parsing the HTML page with the PHP preg_match_all() method to get all occurrences of the iFrame HTML tag. I use the following string as the pattern, "/iframe .*\>/". This works for about half of the video players on the site, but for some reason comes up dry with all of the others.
For examples the video at http://www.free-tv-video-online.me/player/novamov.php?id=huv5cpp5k8cia which hosted on a video site called novamov is easily parsed. However, the video displayed at http://www.free-tv-video-online.me/player/gorillavid.php?id=8rerq4qpgsuw which is hosted on gorillavid, is not found by the preg_match_all() function despite it clearly being displayed in the HTML source when the element is inspected using chrome. Why is my script no returning the proper results and why is this behaviour dependant on the video player the video is using? Please could someone explain?
Try:
$dom = new DOMDocument; #$dom->loadHTML('yourURLHere');
$iframe = $dom->getElementsByTagName('iframe');
foreach($iframe as $ifr){
$ifrA[] = $ifr->getAttribute('src');
}
Now, the $ifrA Array should have your iframe src's.
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 am using curl to get the images from html source code of an external webpage. I am getting img original='imageurl' on view page source in Firefox. But when i select the particular images then it shows img src='imageurl' on view selection source in in Firefox.
How can I get this type of image using curl?
Currently I am using regex to get the image:
preg_match_all('/<img[^>]+>/i',$output, $result);
print_r($result);
But it doesn't display any image.
I am very confused about what to do here. Anyone have any thoughts?
I am very confused about what to do here.
The confusion probably results from that you use your webbrowser to view the source of an URL. Even if it's often the case that the source of the page displayed by the webbrowser is the data that curl would return as well, this is not always the case.
Especially the Firefox feature view selection source will not display that selection from the original resource, but often something else. To prevent that, you need to disable javascript in your Firefox browserÂDocs. Because often documents are modified with javascript and you want to see the original, not the modification because curl is not able to run javascript, it can only get "the original".
Anyone have any thoughts?
Disable javascript in your browser.
Reload the page.
Locate the fragment of the HTML-source-code you're interested in.
Write it down, e.g. into a string.
Request the page with CURL. Output the source.
Locate that string in there. If it's not in there, search the curl request result for the string you're interested and use that instead.
Write a regular expression that is able to obtain what you need from that string.
Use that regular expression in your program then.
Your web browser is reformatting the HTML according to how it understands/parses the HTML page.
When you choose "View Page Source" it shows you the original source code served from the server.
When you select content and choose "View Selection Source" it shows what the browser has parsed into DOM (what the browser understands) for the selected content.
I am guessing you're using Firefox
If you are attempting to use cURL to process the HTML served from the server, you must not look at "View Selection Source" of the page, always refer to "View Page Source"..
Ultimately
You should rather refer to the ACTUAL result from cURL
For example:
$content = curl_exec($ch);
header("Content-type: text/plain");
echo $content;
That should echo exactly what cURL has received from the server...
NOTE: This is a re-post of https://stackoverflow.com/questions/8754844/can-not-get-images-using-curl
Furthermore
If you want to fetch the actual image inside a <img src=""> tag then you need to pin-point the IMG tag in the result HTML response using preg_match, and do a seperate cURL request to the IMG SRC
i have problem in displaying an image in textarea
please help me to solve it
thanks
Textareas can only hold plain text. Use contenteditable or a fully functional editor, like TinyMCE to save you the troubles.
As anothershrubery already mentioned, textarea can only hold plain text.
You can instead use a div element with the contenteditable attribute set to true.
<div contenteditable="true">
You can edit this text and also add images! <img src="smiley.jpg" alt=":)" />
</div>
There are also many different JavaScript WYSIWYG editors which uses the above method or an iframe in designmode.
Here's a couple of them:
Aloha Editor
MarkItUp
TinyMCE
Lightweight RTE
CKEditor
You cannot display images in a textarea. Textarea's just accept plain text.
Textarea support text only, if you want to display image/ link or any thing else, use WYSIWYG HTML Editor
You can try this, a really good one ;)
http://premiumsoftware.net/cleditor/
You can try this:
HTML:
<div id="image_txtarea" style="width:auto">
<img src="image/Example.jpg" id="image" style="position:absolute"/>
<textarea id="some" style="position:absolute;display:none"></textarea>
</div>
JQUERY
$('#image').click(function(){
var img = $('#image');
$(this).hide().next('textarea').show().css({'background':'url('+ img.attr('src') +') no-repeat center center','width':img.width(),'height':img.height()});
});
The answer is yes, image can be placed in textarea.
I placed an animated gif in textarea (worked in ie-6 and ff-13.0.1) with this technique:
Convert any image into a base64 string. (free online converters available, there is a limit to the base 64 file size - around 30k image size); a simple url() background statement did not show image for me.
The online converters usually output both an <img> tag and a CSS background property with the correct values from the uploaded image. Just copy and paste the CSS output into your own file. use url data statement - url(data:image/ext.....)
use the base64 css as a background in the style statement.
to change images, you'll have to change div id="" or class where you have base 64 defined as background-image in the class or id.
time consuming to do conversions so make sure that you really want an image in a textarea before you start.