Is there a way to modify the image dialog of CKEditor to display the upload tab by default instead of the Image info tab?
I've tried doing this by adding a line of code to the onload of the dialog:
onLoad: function() {
this.getDialog().selectPage('Upload');
}
this seems to work fine, I'm able to upload the image to the server, but as soon as I hit the ok button I get a permission denied error.
I've also tried it the way CKSource describes but this gives me an exception since it overrides the onShow method.
Fixed this by adding this.selectPage('Upload'); to the end of the onShow function of the image plugin
As you noticed, the example in the docs is broken because the Image plugin already has an onShow() method.
The trick is to chain the methods like this:
CKEDITOR.on('dialogDefinition', function(e) {
if (e.data.name == 'image') {
var dialog = e.data.definition;
oldOnShow = dialog.onShow;
dialog.onShow = function() {
oldOnShow.apply(this, arguments);
this.selectPage('Upload');
};
}
});
This doc explains how to set a dialog tab by default in your ckeditor config:
http://docs.cksource.com/CKEditor_3.x/Howto/Default_Dialog_Tab
Can user following script.
<script type="text/javascript">
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
dialogDefinition.onShow = function () {
// This code will open the Upload tab.
this.selectPage('Upload');
};
}
});
</script>
Related
I am doing one feature about showing alert on external link(apart from current domain) click. For that, I have written below code. All is working fine except below scenario.
$('a').each(function() {
var $a = jQuery(this);
if ($a.get(0).hostname && getDomain($a.get(0).hostname) != currentDomain) {
$a.click(function(event) {
//console.log($a.get(0));
//var myClasses = this.classList;
//console.log(myClasses.length + " " + myClasses['0']);
$("#redirectconfirm-modal").removeClass('hide');
if (!confirmed) {
event.preventDefault();
event.stopPropagation();
$modal.on('show', function() {
$modal.find('.btn-continue').click(function() {
confirmed = true;
$a.get(0).click();
$modal.modal('hide');
location.reload();
});
});
$modal.on('hide', function() {
$a.get(0).removeClass("selected");
confirmed = false;
});
$modal.modal('show');
}
});
}
});
Scenario which produces this issue:
Click on any external link from the site, it open a modal popup for redirection confirmation with continue & return button.
If I click on "Return" button it closes the modal popup.
Now, I am clicking on external link from my site, it open the modal again but this time I am clicking on "Continue" button & guess what, it open that external link in 3 different tabs
Actually on each anchor tag click, it saves whole anchor tag value. I think, if remove all these anchor tag values on modal close code i.e. $modal.on('hide', function() { }) it will resolve problem. I had tried with many different ways but still facing this issue.
Can you please provide solution/suggestion on that?
Problem is when you have 3 external links (as you probably have), than you set 3 times this part of code:
$modal.on('show', function() { ... });
$modal.on('hide', function() { ... });
which is wrong. Those events listeners should be set only once.
Some simplified code would look like this:
var $modal = $("#redirectconfirm-modal");
var currentDomain = 'blabla';
$modal.on('click', '.btn-continue', function(e) {
window.location = $modal.data('redirectTo');
});
$('a').each(function() {
var $a = jQuery(this);
if( $a.get(0).hostname && getDomain($a.get(0).hostname)!=currentDomain ) {
$a.click(function(e) {
$modal.data('redirectTo', $a.attr('href'));
$modal.modal('show');
});
};
});
Don't inline your events, you may try something like this:
$('a').each(function() { //add a class to all external links
var $a = jQuery(this);
if ($a.get(0).hostname && getDomain($a.get(0).hostname) != currentDomain) {
$a.addClass('modalOpen');
}
});
$('.modalOpen').not(".selected").click(function(event) { //open the modal if you click on a external link
event.preventDefault();
$('.modalOpen').addClass('selected'); //add class selected to it
$modal.modal('show');
});
$modal.on('hide', function() {
$('.selected').removeClass("selected");//remove the class if you close the modal
});
$('.btn-continue').click(function() {
$('.selected').click();//if the users clicks on continue open the external link and hide the modal
$modal.modal('hide');
});
I have a reference to a new window opened with js
var theNewTab="";
theNewTab = window.open(theURL, 'winRef');
then I change the url in the as the user clicks on another link in the parent window using
theNewTab.location.href = targetLink;
theNewTab.focus();
The problem i'm having with chrome that id doesn't throw exception if the the window doesn't exist anymore "closed" unlink FF & IE which im using to open the window again.
try {
theNewTab.location.href = targetLink;
theNewTab.focus();
}catch(err) {
theNewTab = window.open(theURL, 'winRef');
theNewTab.focus();
}
PS: I tried to use "window.open" every time but if the window already open, id does not reload the page or it does but it doesn't re-execute the script I have in document ready I think.
I'm not sure what you need.
<script type="text/javascript">
var theNewTab = null;
function openNewTab(theURL) {
if (theNewTab == null || theNewTab.closed == true) {
theNewTab = window.open(theURL);
} else {
theNewTab.location.href = theURL;
}
theNewTab.focus();
};
// use the function when you need it
$('a').click(function() {
openNewTab($(this).attr('href'));
});
</script>
Is this example helpful for you?
It seems that it is not possible to emulate a right click in javascript.
I have tried to right click an element (paragraph) in an iframe like this:
html
<button onclick="popup_context_menu_in_iframe()">
popup menu
</button>
<br/><br/>
<iframe srcdoc="<p>Hello world!</p>">
</iframe>
script
function popup_context_menu_in_iframe()
{
var $element = $('iframe').contents().find('p');
var element = $element.get(0);
if (window.CustomEvent) {
element.dispatchEvent(new CustomEvent('contextmenu'));
} else if (document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent('contextmenu', true, false);
element.dispatchEvent(ev);
} else { // Internet Explorer
element.fireEvent('oncontextmenu');
}
}
https://jsfiddle.net/sca60d64/2/
It seems like it actually is impossible to make the context menu appear so I need to find other ways.
I first headed at creating a chrome extension to add a function to the window object, callable from any script that is using some extra power to do it.
However, A chrome extension surprisingly seems to not provide me with a way of creating functions in the window object. I have not taken a look if it even gives me the power to popup the context menu.
I did not experiment a lot with chrome extensions before giving up on that.
So I need another solution.
It doesnt matter if a solution only works in google chrome or if there is no guarantee that it will stop work in the next version.
Should I hook the chrome process with a dll? Is that it?
You can call a dll by an exe file in the chrome extension through Native Messaging. I have provided a sample of Native Messaging procedure in this answer:
See the answer of this question
I hope to be useful.
This should work with this markup:
<div id="mything">
Howdy this is my thing
</div>
event handler:(disable default)
var el=document.getElementById("mything");
el.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('success!');
return false;
}, false);
Then when you execute this, "sucess!" alerts followed by the text changing to "Howdy this is my thing this is canceled":
EDIT event handler:(do NOT disable default)
var el=document.getElementById("mything");
el.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('success!');
return true;
}, true);
Then when you execute this, "sucess!" alerts followed by the text changing to "Howdy this is my thing this is NOT canceled":
function simulateRightClick() {
var event = new MouseEvent('contextmenu', {
'view': window,
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('mything');
var canceled = !cb.dispatchEvent(event);
var cbtext = cb.textContent;
if (canceled) {
// A handler called preventDefault.
console.log("canceled");
cb.textContent = cbtext + "this is canceled";
} else {
// None of the handlers called preventDefault.
cb.textContent = cbtext + "this is NOT canceled";
console.log("not canceled");
}
}
simulateRightClick();
Test it out here: https://jsfiddle.net/MarkSchultheiss/bp29s0j4/
EDIT: alternate selector:
var fcb = document.getElementById('myframe').contentWindow.document.getElementById('pid');
fcb.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('successFrame!');
return false;
}, false);
Given this markup:
<iframe id='myframe' srcdoc="<p id='pid'>Hello world!</p>">
</iframe>
I've made my own upload library dialog with Semantic UI's modal. I'm trying to integrate this dialog within the Pagedown editor.
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.hooks.set("insertImageDialog", function(callback) {
uploadModal.load(); // The dialog HTML gets loaded asynchronously
$('body').on('selection', '.upload-modal', function(e, src) {
console.log(src);
callback(src);
});
return true; // tell the editor that we'll take care of getting the image url
});
Everything works fine the first time selecting an image from the dialog, but after that it breaks:
Uncaught TypeError: Cannot call method 'removeChild' of null Markdown.Editor.js
According to this SO question it has something to do with defining the event handler multiple times, but I can't wrap my head around it.
Some more info:
The HTML for initializing the modal is loaded asynchronously, here is the JS code:
var uploadModal = (function() {
/**
* Load the upload modal.
*/
this.load = function() {
var $modal = $('.upload-modal');
if ($modal.length) {
// Show the already existing modal.
$modal.modal('show');
} else {
// Get the HTML
var request = $.get(appUrl('admin/upload/modal'));
request.done(function(html) {
// Make the modal.
var $modal = $(html);
$modal.modal({
observeChanges: true,
onApprove: function () {
var upload = $modal.find('.selected.upload'),
src = upload.find('.image > img').attr('src');
// Bind the event listener which will return the upload's source URL
$modal.trigger('selection', src);
return true;
}
}).modal('show');
// Some event handlers here
});
}
};
})();
I load the modal by calling uploadModal.load() and watch whenever an image is selected by attaching the 'selection' event handler.
Here I create a jqueryui dialog from an iframe and populate the iframe with some html.
In firefox this displays nothing until I add the alert. Is there a better way to convince firefox to draw the iframe?
http://jsfiddle.net/jtmx00f4/6/
function fancyDialog(htm) {
$('<iframe></iframe>').dialog({
open: function () {
//alert('presto!');
var doc = this.contentDocument || this.contentWindow.document;
doc.body.innerHTML = htm;
}
});
}
fancyDialog('<html><body><p>Hello</p></body></html>');
While #dandavis fiddle does work in firefox, I also found a more complete solution in this article which does not require setTimeout.
http://jsfiddle.net/jtmx00f4/9/
function fancyDialog(htm) {
$('<iframe></iframe>').dialog({
open: function () {
this.contentWindow.contents = htm;
this.src = 'javascript:window["contents"]';
}
});
}
fancyDialog('<html><body><p>Hello</p></body></html>');