I am using tinymce v5. I have enabled the media plugin and configure it to get the following html when a user insert a video:
<div class="embed-responsive embed-responsive-16by9"><iframe src="' + newUrl + '" class="embed-responsive-item" allowfullscreen="allowfullscreen"></iframe</div>';
In the editor, I can not find a way to center the video on the page. When "selecting" the video, i clicked on the align center button but nothing happen and nothing is added in the html code. Is there anything special that needs to be done? I would like to get the same thing as when I center an image.
Thx!
Related
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>');
});
I am looking to find a way to shoot and record video using the iPhone's camera using HTML 5. I referred this document.
http://www.w3.org/TR/html-media-capture/
I have tried using the HTML Media Capture API as told in several posts. But I cannot access the camera. I'm using the following code in my HTML file which is rendered in an UIWebView.
//A choose file button which is actually disabled came up.
<input type="file" accept="image/*" capture="camera" id="capture">
which didn't work.
And this code,
//Didn't worked
window.navigator.getUserMedia('audio, video', function(){
alert('Success');
}
, function(){
alert('Error');
});
and finally this one,
//This came up as [object Navigator]
alert(navigator);
//This came up as undefined.
alert(navigator.device);
Is video capture in iPhone actually possible via HTML 5? Does this means that Media Capture API of HTML 5 is not yet fully deployed? If so will it be in near future? Could someone point me in the right direction?
Not currently. You will have to use a framework like AppMobi or Apache DeviceReady(Phonegap) to get access to the native camera via JavaScript in a UIWebview.
I am currently using tinyMCE to edit content within my site and I am looking for a way display an image within the tinyMCE once it has been uploaded to the site.
Note: I am not looking for a means to upload an image directly into tinyMCE. I am looking for the tinyMCE command which would allow me to display an image within the content in the editor after I have uploaded it.
Thanks
You could insert a regular img-tag inside tinymce using a custom plugin or using the setup parameter in your tinymce init. The src should refer to the html location of the image to be uploaded. As soon as the image is available the image will become visible on next reload of the editors content. If you need further assistance feel free to ask.
After successfull uploaded you have the source of the image (img_src). Now you need to add it to the editor like this
tinymce.activeEditor.insertContent('<img alt="photo" src="' + img_src + '"/>');
I would like to get jw player to play nicely with tinymce. Currently, tinymce just strips the embed code out, or converts it to ... which breaks it.
first aim is to even allow the jw player code
a nice-to-have would be a button to add the code through the interface.
any help much appreciated
Here's how you can insert video to play in the JW Player in TinyMCE. You need to have the Media plugin added to the TinyMCE editor the ImageManager add-on installed.
Edit /tiny_mce/plugins/media/langs/en_dlg.js:
Anywhere after the first line insert:
allowfullscreen:"Allow Full Screen",
Edit /tiny_mce/plugins/media/media.htm:
Immediately after line 216 (contains the that ends the row that adds the Menu and Live Connect checkboxes to the Advanced section of the Insert Media dialog) insert:
{#media_dlg.allowfullscreen}
Edit /tiny_mce/plugins/media/js/media.js:
After line 73:
setBool(pl, 'flash', 'swliveconnect');
insert:
setBool(pl, 'flash', 'allowfullscreen');
After line 307 insert (Just before the code that detects a URL for YouTube has been used):
if (v.match(/(.+)(.*)\.flv/) || v.match(/(.+)(.*)\.mp4/)) {
f.width.value = '328';
f.height.value = '200';
f.src.value = '/mediaplayer/player.swf?file=' + v;
return 'flash';
}
(change '/mediaplayer/player.swf' to the location and name of your jw player swf file).
After line 382:
s += getBool('flash', 'swliveconnect', false);
insert:
s += getBool('flash', 'allowfullscreen', false);
Edit the ImageManager config file to allow upload of flv and mp4 files.
To insert a video, click the Insert Media button in the TinyMCE Editor Toolbar. Leave it set to Flash and Browse for the file. This will open the ImageManager. Upload the video file or select the file if it has already been uploaded to your ImageManager. The URL to the file will be inserted into the URL field of the Media dialog. This will give a preview of the video. You can change the size here is you like. Click the Insert button and a Flash Placeholder is inserted.
The answer from Barry Dixon worked from me, with a little fix in media.htm.
the onchange event did not fire in my case, as I use a personal file manager to choose the media file.
I just added an onblur event:
<td><input id="src" name="src" type="text" value="" class="mceFocus" onblur="switchType(this.value);generatePreview();" onchange="switchType(this.value);generatePreview();" /></td>
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