I know nothing about programming so apologies if I get terminologies wrong.
I need to embed a video from vimeo into tinyMCE editor. This is the embed code that Vimeo provides for its videos:
<iframe src="http://player.vimeo.com/video/24676022" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
When I paste that into the editor and click update, nothing happens. Does it just hate it and won't let me do it or is there a simple workaround?
Are you pasting that HTML code into the HTML version of your tinyMCE editor?
You cannot simply copy and paste HTML into the editor's WYSIWYG editor.
Unless you are doing any post-processing of the HTML you are trying to save, the iframe should be saved (and shown in the final version) as well.
The solution is simply to configure TinyMCE to accept the iframe tag as a valid element.
You can learn more here: http://www.frederikvig.com/2010/10/how-to-add-support-for-iframes-and-other-elements-to-tinymce-in-episerver-cms/
you can use htmlspecialchars_decode($data_from_mysql)
it will display the video in your web browser....
well this works perfect for me..
You can use the following jquery code to embedd iframes into your tinymce created pages:
$(document).ready(function() {
var $obj = $('.mce-object-iframe');
var video_url = $obj.attr('data-mce-p-src');
var width = $obj.attr('width');
var height = $obj.attr('height');
$obj.replaceWith('<iframe width="'+width+'" height="'+height+'" src="'+video_url+'" style="border:0px;"></iframe>');
});
Related
The queston is in the tittle. When I paste an image url into the textarea tinymce converts it into the image, How to force it leave only link?
Testing this on TinyMCE 4, on the full featured example given in the TinyMCE documentation, this does not seem to happen... When I paste an image URL there, the URL keeps there, no image replaces it.
What version of TinyMCE do you have? Do you have any custom plugin? Maybe this is being triggered by custom code?
You have to delete the plugin "paste"
I know I can import the font I would like to use into the CSS file with the Devtools open. It just seems like a no-brainer for Google to have their massive Fonts library linked to Devtools. Is there a way to do this?
The answer is too old, but this might help others. Type in console following code, then you can use it in Element>styles
var link = document.createElement('link');
link.href = "https://fonts.googleapis.com/css?family=Roboto";
link.rel = "stylesheet";
document.body.prepend(link);
Select an element in Elements panel > DOM Tree and press F2 to edit the <head> tag of your HTML. From there, just add the <link> tag to your HTML. Press Command+Enter (Mac) or Control+Enter to save your changes.
In the Network panel you'll see a request for the font file.
I recently did a small jQuery snippet that allows me to show a loading img until the real image is loaded.
The snippet seems to work in Safari, Chrome but not FireFox.
FireFox only displays a loading alt and never switches to the loaded image.
Here is the snippet
var loading = $('<img src="/media/ajax-loader.gif" alt="loading" />');
$('.thumbnail').each(function(){
var loadIMG = loading.clone();
$(this).after(loadIMG).load(function(){
$(this).fadeIn('fast');
loadIMG.hide();
}).hide();
});
Any ideas why?
You haven't said what exactly is happing on FF but below can be one of the problem. From jquery documentation
It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.
Here's the link for plugin.
Edit:
Based on comments from load event, try below:
$('.thumbnail').each(function(){
var loadIMG = loading.clone();
$(this).after(loadIMG).load(function(){
$(this).fadeIn('fast');
loadIMG.hide();
}).hide();
if (this.complete) $(this).trigger("load");
});
Of course, the plug-in seems to be doing same thing along with handling some other scenarios as well as.
I have seen some write about making a UIWebView editable. I would like to be able to compose a message containing both text and images the WYSIWYG way, and I thought that I might do it with a UIWebView.
Is this a good solution and how do I do this? I have searched the web for examples, but found none.
Thank you
UIWebView content can be made editable starting with iOS 5.0+.
A very nice tutorial can be viewed here: http://ios-blog.co.uk/tutorials/rich-text-editing-a-simple-start-part-1/
The tutorial goes beyond the question, so here's a resume of how to make the UIWebView editable:
//index.html
<html>
<body>
<div id="content" contenteditable="true" style="font-family: Helvetica">This is out Rich Text Editing View </div>
</body>
</html>
//somewhere.m
NSBundle *bundle = [NSBundle mainBundle];
NSURL *indexFileURL = [bundle URLForResource:#"index" withExtension:#"html"];
[webView loadRequest:[NSURLRequest requestWithURL:indexFileURL]];
Anyway, I suggest reading the tutorial, since it shows how to do other stuff as well (changing fonts, colors, embedding images etc.)
You could use the loadHTML:baseURL method from the UIWebView class reference:
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html
Place this in the textViewDidEndEditing: delegate method of the UITextView:
http://developer.apple.com/library/ios/#documentation/uikit/reference/UITextView_Class/Reference/UITextView.html
Actually UIWebView way is so painful, mobile safari does not support WYSIWYG rich text editor area.
From Zoho FAQ :
I can't create or edit documents on my iPhone, the keyboard doesn't show up when opening iZoho on iPhone. What's the problem?
It is an issue with the iPhone as the safari browser doesn't seem to recognize the rich text editor area and hence the keyboard isn't appearing. This is not an iZoho specific problem as all the applications that use a WYSIWYG editor face the same issue. We hope that Apple will address this issue soon and come up with the next version of iPhone's Safari that supports rich text editing. As a workaround, we may give a plain text editor for users to edit/create their documents if this isn't corrected in Safari's next version.
You should implement rich text editing by yourself :(
This is question about tinymce... Current image editor is slow for because it demands opening popup for every new picture I want to add. I have my own external image gallery where each image contains it's url so copy-paste of url's is very easy and fast...
I would like to have button similar to Bold that does following:
To editor I paste url of image (for example: www.site.com/image.jpg) and when i select this url and click on my new button it converts image url to <img src='www.site.com/image.jpg'> and shows image in editor.
I searched plugins and found nothing similar to this.
Any ideas?
Thanks in advance!
Ilija
solved!
In documentation there is example how to manipulate text in editor from external commands... end even set them as button