I can't find any examples where I can insert a video player code into the tinymce 4.x, I'have a jwplayer downloaded, but I don't know how to insert the javascript code into the editor to execute this for each added video:
jwplayer(id).setup({
file: video.href,
image: video.img,
title: video.title,
width: '640',
height: '360',
primary: 'flash',
aspectratio: '16:9'
});
please any help!
You should try initialising the player in the onLoadContent event handler of TinyMCE.
E.g.
tinyMCE.init({
...
setup : function(ed) {
ed.onLoadContent.add(function(ed, o) {
jwplayer(id).setup({
file: video.href,
image: video.img,
title: video.title,
width: '640',
height: '360',
primary: 'flash',
aspectratio: '16:9'
});
});
}
});
The pont is that you need an element in user provided content to be available for DOM manipulation before setting up the player.
Related
How to prevent tinymce loading things from the cloud, but instead loading them from the local path?
tinymce.init({
selector:'textarea',theme: "modern",
height: 400,
document_base_url : "http://my_domain.com/",
relative_urls : true,
external_plugins: {
'responsivefilemanager': '/assets/js/plugins/responsivefilemanager/plugin.min.js',
'filemanager': '/assets/js/plugins/filemanager/plugin.min.js',
},
etc...
but then in the console i see this:
https://cloud.tinymce.com/stable/plugins/filemanager/dialog.php?editor=content
I am not able to add resize event to tinymce editor. it is giving me:-
Uncaught TypeError: tinymce.dom.Event.add is not a function
What is the right way to do so?
tinymce.init({
selector: ".tinymceTextarea",
width: '100%',
height: '100%',
plugins: plugins,
statusbar: false,
menubar: false,
toolbar: toolbar,
fontsize_formats : "8px 10px 12px 14px 16px 18px 20px 24px 32px 36px",
// init_instance_callback: "initTinyMCE",
setup: function(e) {
e.on('init', function() {
tinymce.dom.Event.add(e.getWin(), "resize", function(e1) {
console.log("=====")
})
});
});
Thanks in advance
Try the below snippet without chaining
$("#your_textarea_id").tinymce().getWin().bind('resize',function() {
console.log('resize triggered !');
// Your Code goes here.
});
This can easiliy be achieved using the setup tinymce configuration parameter setup to add a window resize handler:
setup: function(ed){
ed.on('init', function() {
$(ed.getWin()).bind('resize', function(e){
console.log('Editor window resized!');
})
});
}
See my tinymce fiddle here: http://fiddle.tinymce.com/snfaab
I'm currently trying to install the following module: https://github.com/miguelmoraleda/youtube-iframe-player
I have installed "youtube-iframe-player" via npm as well as its dependency "require-sdk", but when I try to run the following code, I always get a "ReferenceError: window is not defined" error.
var youtube = require('youtube-iframe-player');
youtube.init(function() {
console.log('API Loaded');
var youtubePlayer = youtube.createPlayer('container', {
width: '720',
height: '405',
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 0, 'controls': 1 },
events: {
'onReady': playerReady,
'onStateChange': onPlayerStateChange
}
});
function playerReady(event) {
youtubePlayer.playVideo();
}
function onPlayerStateChange(event) {
console.log('Player State Changed: ', event);
}
});
How can I open the script in a webserver?
Any help would be really much appreciated!
I have a window component that using loader configuration like this:
Ext.create('Ext.window.Window', {
id: 'window1',
title: 'Lookup Master Soal',
height: 500,
width: 800,
draggable: false,
modal: true,
loader: {
url: 'http://mydomain.com:34573/CBC/Pertanyaan/MasterSoal/Default.aspx?lookup=true',
renderer: 'frame',
autoLoad: true,
scripts: true,
loadMask: {
showMask: true
}
}
}).show();
I have some javascript code in http://mydomain.com:34573/CBC/Pertanyaan/MasterSoal/Default.aspx, and I want to send some parameter to the window. I have no idea to do this. I would greatly appreciate any help.
You can access a Window from its iframe page (loaded via its Loader) in JavaScript via the "parentAutoLoadControl" reference.
I am currently deploying for Android OS in Sencha Touch 2.
I have included the path for "cordova-2.2.0.js" ,"ChildBrowser.js" in the app.json file
I am developing it in Windows PC with Chrome browser and deploying using Sencha tool and phonegap build to android device.
My sample code is
window.plugins.childBrowser.openExternal("http://www.google.com");
I get following error in my webkit browser.
Uncaught TypeError: Object # has no method 'exec'
And in my native app I am not getting any response.
Please Help ...i am Including my Main.js file
Thank you
Main.js file
Ext.define('Children.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
items: [
{
xtype: 'button',
text: 'Open Google',
handler: function(button) {
window.plugins.childBrowser.openExternal('http://www.google.com');
}
}
]
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});
This is simply a very big big big question:
To do that you need several technical skills: javascript, sencha touch, java (for Android OS) and phonegap plugin
Are you able to write a phonegap plugin?
A short receipt to do that but I do not include the Java code, because I need more details from you:
in config.xml under res/xml put your plugin config (InfoP is a Java class):
add InfoPlugin.java in your src folder;
add infopl.js under assets/www; (infopl.js is the javascript wich call the Java plugin)
in index.html (for example) the plugin:
In the webapp you can call the plugin:
<script type="text/javascript">
document.addEventListener('deviceready', function() {
window.plugins.infoPl.getInfo(
function(info) {
alert(info);
//( you can see what you log on console with ADB console log)
console.log('MYINFO: '+info);
}, function() {
console.log("fail");
}
);
}, false );
</script>
In Sencha use (better if you use a controller with MVC capabilities of sencha touch):
listeners: {
tap:
function() {
alert('something');
}
instead of:
handler: function(button) {
alert('something');
}
You suggest you to check:
http://docs.phonegap.com/en/2.6.0/guide_plugin-development_index.md.html#Plugin%20Development%20Guide
http://docs.sencha.com/touch/2.2.0/#!/video/mvc-part-1