I have created a custom plugin inside of tinyMCE 4. It pops up a modal window and displays images in a said directory. You pick the image, then it adds it to the content and closes the popup. I have it inserting the image into the content, but I can't seem to close the popup. I've tried many different ways and none of them work.
One of the errors I get is:
Uncaught TypeError: Cannot read property 'win' of undefined
That's happening with the current code which follows:
Plugin:
tinymce.PluginManager.add('imageuploads', function(editor, url) {
// Add a button that opens a window
editor.addButton('imageuploads', {
text: 'Insert Image',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: "Insert Uploaded Image",
url: 'insertimage.php',
width: 700,
height: 600,
inline: true,
close_previous: "yes"
});
}
});
});
Plugin File:
$(document).ready(function(){
$('#submit-image-url').bind('click', function(){
var image_url = $('.image_choice:checked').val();
var insert_url = '<img src="/editor/uploads/' + image_url + '">';
parent.tinymce.activeEditor.selection.setContent(insert_url);
parent.tinymce.activeEditor.windowManager.close(this);
});
});
There is some HTML before that, but all it is is the images listed out with a radio input to determine which one is selected. Inserting works, but I can't seem to close the popup.
Any help would be greatly appreciated! Thanks!
The errors are coming from tinymce.js on line #22746, so the close() method is getting called. It just can't see the popup for some reason.
I fixed it with the following:
var ed = parent.tinymce.editors[0];
ed.windowManager.windows[0].close();
So, now my jQuery code looks like this:
$('.image_choice').bind('click', function(){
var image_url = $('.image_choice:checked').val();
var insert_url = '<img src="/editor/uploads/' + image_url + '">';
parent.tinymce.activeEditor.selection.setContent(insert_url);
var ed = parent.tinymce.editors[0];
ed.windowManager.windows[0].close();
});
I hope this helps someone that runs into the same problem. This one puzzled me for a few days now.
You can use this code, if your page has more than two TinyMCE editors:
tinymce.activeEditor.windowManager.close();
I used it for TinyMCE 4.
I was fighting with this for while too. I tried to implement TinyMCE 4: http://www.roxyfileman.com/ for MVC.
Changing this code helps me: win.tinyMCE.activeEditor.windowManager.close(); / win.tinyMCE.activeEditor.windowManager.windows[1].close();
In my case when I selected file, wrong popup get closed. Maybe it helps to someone ;)
try to use thi code `
<script type="text/javascript">
var parentWin = (!window.frameElement && window.dialogArguments) || opener || parent || top;
$(function() {
$('img').click(function(e){
e.preventDefault();
imgSrc = $(this).attr('src');
imgAlt = $(this).attr('alt');
divInput = $("input#"+parentWin.inputSrc,parent.document).parent().attr('id');
divInputSplit = divInput.split("_");
divTitle = "mce_"+(parseInt(divInputSplit[1],10) +1);
$("input#"+parentWin.inputSrc,parent.document).val(imgSrc);
$("input#"+divTitle,parent.document).val(imgAlt);
$(".mce-close",parent.document).last().trigger("click");
});
});
</script>
or visit tinymce4 file browser `
Related
I have a link to open a pdf in a browser. But, It gets focused on the new tab (the tab with the pdf. How to prevent this behavior?
This is the link:
<strong><a style="text-decoration:none" class='row_link' href='javascript:void(0)' target="_blank" onFocus="false">Open File</a></strong>
This is the jquery:
$("#myTable tbody").on('click','.row_link', function(e) {
var no_s = $(this).find('.filename').val().replace(/\//g , '');
var b_url = $('#base_url').val()+"assets/uploads/file/";
var url = b_url + no_s;
window.open(url);
});
I've tried adding onfocus="false" in the anchor. But, It's no effect
<html>
<strong><a style="text-decoration:none" class='row_link' href='https://github.com/caiyongji' onclick="window.open('#','_blank');window.open(this.href,'_self');">Open File</a></strong>
</html>
This effect is called the "pop under".
Basically you need to use window.blur() on the newly opened window to lose the focus and then refocus on your existing tab.
$("#myTable tbody").on('click','.row_link', function(e) {
var no_s = $(this).find('.filename').val().replace(/\//g , '');
var b_url = $('#base_url').val()+"assets/uploads/file/";
var url = b_url + no_s;
var newWindow = window.open(url);
newWindow.blur();
window.focus();
});
Relevant Stackoverflow post
If I understand correctly, what you need is, you don't want to show the newly opened tab to the user. This cannot be done as #Rex suggested, but what can be done as an alternative is, you can open a popup window and minimise it as soon as you want..
Please have a look on below code :
Parent Page
Click to open popup
Child Page
<body onLoad="setTimeout('window.blur()', 1000);"
onFocus="setTimeout('window.blur()', 1000);">
You can change the time 1000 to what you want.
You can use this on child to keep focus on parent page
window.parent.opener.focus();
Since you want the behaviour of opening background tabs, try the following code which is an example from this answer
For example in your jquery;
$("#myTable tbody").on('click','.row_link', function(e) {
var no_s = $(this).find('.filename').val().replace(/\//g , '');
var b_url = $('#base_url').val()+"assets/uploads/file/";
var url = document.createElement("a");
url.href = b_url + no_s;
var evt = document.createEvent("MouseEvents");
//the tenth parameter of initMouseEvent sets ctrl key
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
true, false, false, false, 0, null);
a.dispatchEvent(evt);
});
Let me know if it helps or if you find a problem
Currently, I have a column that has some pdf names listed. In the next column, the pdf is embedded so it is displayed for the user.
What I need to accomplish is the following:
When a user clicks a document name in the first column, the pdf inside the second column changes to the corresponding pdf. All the while, it does not go to a different page. So the only thing that changes is the pdf that is displayed.
This is all coded in HTML and I'm hoping that someone will be able to help me out with this. I don't know if I need to use javascript with this or anything. I just can't find the solution anywhere on the web.
Any help would be appreciated.
use jQuery UI (Dialog) for that function
<script type="text/javascript">
$(function () {
var fileName = "Sample.pdf";
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: fileName,
width: 540,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"500px\" height=\"300px\">";
object += "If you are unable to view file, you can download from here";
object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
object += "</object>";
object = object.replace(/{FileName}/g, "Files/" + fileName);
$("#dialog").html(object);
}
});
});
});
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
As far as I can tell... put an iFrame on the second column and set the src with javascript
var myFrame = document.querySelector('#myIframe');
document.querySelector('a.mylink').addEventListener('click', function(e) {
e.preventDefault();
myFrame.src = this.getAttribute('href'); // full public url
}
I am having an issue where when I have a rich text field that has design mode on that is within a sortable LI. The problem is that designMode changes to 'Off' if the LI is dragged to a new position. And even though I am able to target the correct iframe, it seems to ignore when I tell it to turn designMode back on, does anyone know why this is happening? Thank you for reading.
edit: jfiddle example: https://jsfiddle.net/LcLfaa8j/2/
function getRichTextField( itemId ) {
console.log('get rich text field');
return document.getElementById('rtf-iframe-' + itemId);
}
$(document).ready(function() {
getRichTextField("sort-textItem-1").contentWindow.document.designMode = "On";
getRichTextField("sort-textItem-2").contentWindow.document.designMode = "On";
$("#text-areas").sortable({
axis: 'y',
opacity: 0.8,
tollerence: 'pointer',
update: function(event, ui) {
var order = $(this).sortable( "serialize", { key: "order" } );
console.log("New Order = " + order);
console.log('the iframe that was moved designMode is now Off...');
var richText = getRichTextField($(this).data().uiSortable.currentItem.attr('id'));
console.log('TEST: the current is ' + $(this).data().uiSortable.currentItem.attr('id') + ' and designMode = ' + richText.contentWindow.document.designMode + ' doubleCheckOfRTFid = ' + $(richText).attr('id') + ' class = ' + $(richText).attr('class'));
richText.contentWindow.document.designMode = "On";
console.log('just attempted to turn designMode back on... but it gets ignored');
}
});
});
This is only a partial answer.The designMode isn't getting turned off; it's off by default, and the document where you set .designMode="on" gets deleted (and then recreated from scratch) when you drag it. You can see that if you put content into one of the documents and then drag it, the content disappears. Looks like the iframe is getting a new .contentWindow, which means it has a different child document too.
You can see this in the inspector by running
var before = getRichTextField("sort-textItem-2");
var beforecontentWindow=before.contentWindow;
(now drag the second iframe)
Now run:
var after = getRichTextField("sort-textItem-2");
var aftercontentWindow=after.contentWindow;
Now compare the references with ===:
before === after ;//returns true because iframe is the same
beforecontentWindow === aftercontentWindow ;//returns false because .contentWindow changed
Also see this post Jquery Sortable and Draggable between parent and child frame where he had trouble implementing draggable and sortable, but got it working eventually.
I don't know why being dragged would give your iframe a new contentWindow, but maybe someone else will be able to build on this.
It seems like adding a small delay with a setTimeout before turning designMode back on fixes this. Is this the only solution? Just curious.
I am trying to combine ContentFlow (http://jacksasylum.eu/ContentFlow/) and ColorBox (http://www.jacklmoore.com/colorbox/): when the user clicks on an image in ContentFlow I want an HTML page to be displayed in ColorBox.
I have tried using the code provided by the ColorBox examples' section to no avail. The HTML page is loaded by the browser as a normal link (not in ColorBox.)
I have even tried creating a ContentFlow addon (using the LightBox addon as an example) without any luck - nothing is displayed, not even simple images:
onclickActiveItem: function (item) {
var content = item.content;
if (content.getAttribute('src')) {
if (item.content.getAttribute('href')) {
item.element.href = item.content.getAttribute('href');
}
else if (! item.element.getAttribute('href')) {
item.element.href = content.getAttribute('src');
}
if (item.caption)
item.element.setAttribute ('title', item.caption.innerHTML);
colorbox.show(item.element);
}
}
Edited on 01/Oct/2013
The problem only manifests itself when an item contains an href. To prove this I changed the code above to show a static web page:
$.colorbox({open:true, href:"http://mysite.gr/colorbox/content/static.html"});
It the item is just a simple image the static web page is displayed in ColorBox. But if the item contains an href to the web page I want displayed in ColorBox the browser follows the link and loads the specified page. Any ideas on how to stop this from happening?
Thank you in advance for your help!
I have finally solved the problem I have described in my question. The solution involves creating a ContentFlow addon as follows:
new ContentFlowAddOn ('colorbox', {
init: function () {
var colorboxBaseDir = this.scriptpath+"../colorbox/";
var colorboxCSSBaseDir = colorboxBaseDir;
var colorboxImageBaseDir = colorboxBaseDir;
this.addScript(colorboxBaseDir+"jquery.colorbox.js");
this.addStylesheet(colorboxCSSBaseDir+"example3/colorbox.css");
},
ContentFlowConf: {
onclickInactiveItem: function (item) {
this.conf.onclickActiveItem(item);
},
onclickActiveItem: function (item) {
var content = item.content; // ContentFlow's content class
var theItem = item.item; // ContentFlow's item class - if you need access to it
var hrefToDisplay = '';
if (content.getAttribute('src')) {
if (content.getAttribute('href')) {
hrefToDisplay = item.content.getAttribute('href');
}
else if (!item.element.getAttribute('href')) {
hrefToDisplay = content.getAttribute('src');
}
$.colorbox({iframe:true, href:hrefToDisplay, title:item.caption});
}
}
}
});
The secret is to open the HTML page in an iframe.
Hope this helps!
I am using a script i found here to dynamically generate short link for my Tweet buttons and it works perfectly well, but the only thing i cant seem to do is create the link to open in either a new tab or preferably a popup window.
I have tried several variations of the window.location section of the script but so far I've had no luck. If anybody could point me in the right direct I'd be very grateful.
This is the script I am using...
<script>
var TweetThisLink = {
shorten: function(e) {
// this stops the click, which will later be handled in the response method
e.preventDefault();
// find the link starting at the second 'http://'
var url = this.href.substr(this.href.indexOf('http:', 5));
BitlyClient.shorten(url, 'TweetThisLink.response');
},
response: function(data) {
var bitly_link = null;
for (var r in data.results) {
bitly_link = data.results[r]['shortUrl'];
break;
}
var tweet_text = "Text for the Tweet goes here"
window.location = "http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
}
}
jQuery('.tweetlink').bind('click', TweetThisLink.shorten);
</script>
Many thanks in advance :)
Normally you could just do window.open:
window.open("http://twitter.com/home?status=" + encodeURIComponent(tweet_text + ' ' + bitly_link + " #Hashtag1 #Hashtag2");
BUT, since you are doing an ajax call before this happens, chances are that this window popup will be blocked by the browser, since the window.open command is no longer associated with the click (browsers allow a certain time before a window.open command falls under non-initiated "popup").
A solution would be to first open the window on click (in your shorten function):
var win = window.open('about:blank');
And then redirect in your response function:
win.location = 'http://twitter.com/etc...';
Demo: http://jsbin.com/usovik/1
Perhaps you're looking for
window.open("http://example.com");