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
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 use TinyMCE plugin with inline mode on. What I want to do is get the content of the area that's been edited after the editor has been closed. This is what I have for now:
tinymce.init({
selector: '.editable',
plugins: "link",
inline: true,
init_instance_callback: function (editor) {
editor.on('GetContent', function (e) {
console.log(e.content);
});
}
});
However, this on doesn't log anything. Any ideas?
Each time you leave the editor it fires the blur event (https://www.tinymce.com/docs/advanced/events/#blur) ... and you can capture this in your TinyMCE configuration:
tinymce.init({
selector: '#my_div",
...
setup: function (editor) {
editor.on('blur', function (e) {
console.log('Editor was blurred!');
// Do what you want when the editor is blurred here
console.log(editor.getContent()); //get the content from the editor
});
}
});
I am trying to implement okzoom in my rails application but I don't seem to be having much luck. Everything appears to be ok. I've added the javascript file to my javascripts directory (app/assets/javascripts/okzoom.js) and also tried using the okzoom_rails gem just to err on the side of caution. The code editor appears to resolve the okzoom function with no problem but when I run the site, I see the following console error:
Uncaught TypeError: undefined is not a function
And if I use the Chrome debug tools to dig into it, the problem is clearly with my call to okzoom - for some reason the website isn't seeing it.
Here is my application.js file:
//= require jquery
//= require jquery_ujs
//= require fancybox
//= require okzoom
//= require turbolinks
//= require_tree .
$("a.fancybox")
.fancybox( {
'transitionIn': 'elastic',
'transitionOut': 'elastic',
helpers : {
title : {
type: 'inside'
}
},
beforeShow: function() {
/*disable right click*/
$.fancybox.wrap.bind("contextmenu", function (e){
return false;
});
}
});
$("img.zoomable")
.okzoom({
width: 200,
height: 200,
round: true,
background: "#ffffff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000000",
border: "1px solid black"
});
I have no issues with the fancybox implementation and I followed the same pattern for okzoom but with no luck. Anyone have any ideas?
UPDATE
Here is the code for zoomable image:
<%= image_tag(p.file_info.fullPath, class: "zoomable") %>
It's very possible that by the time the JavaScript interpreter gets to the line that loads okzoom that okzoom hasn't already been fetched from the server. I would suggest wrapping your code like the following:
$(document).ready(function() {
$("a.fancybox")
.fancybox( {
'transitionIn': 'elastic',
'transitionOut': 'elastic',
helpers : {
title : {
type: 'inside'
}
},
beforeShow: function() {
/*disable right click*/
$.fancybox.wrap.bind("contextmenu", function (e){
return false;
});
}
});
$("img.zoomable")
.okzoom({
width: 200,
height: 200,
round: true,
background: "#ffffff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000000",
border: "1px solid black"
});
});
The ready event is triggered once all of the website's markup and assets have been downloaded from the server.
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.
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.