I have a ckeditor plugin and inside the init: I want to capture the click event so I can do something.
CKEDITOR.plugins.add('Columns',{
init : function(editor) {
editor.on('doubleclick', function(ev) {console.log('hello');}); // Works
editor.on('focus', function(ev) {console.log('hello');}); // Works
editor.on('click', function(ev) {console.log('hello');}); // Does not work
editor.on('mousedown', function(ev) {console.log('hello');}); // Does not work
}
});
Any Ideas???
EDIT:
OK could not get click working, I believe we need to create an event for that. However thanks to this post: http://alfonsoml.blogspot.com.au/2011/03/onchange-event-for-ckeditor.html
I managed to use 'saveSnapshot' which seems to fire each time I click so this now works
editor.on('saveSnapshot', function(ev) {console.log('hello');}); // Works
I realise this is old but it doesn't have an answer to the original question.
CKEDITOR.plugins.add('Columns',{
init : function(editor) {
editor.on('instanceReady', function (e) {
this.container.on('click', function (event) {
console.log('hello');
});
});
}
});
Note: this won't work when CKEditor is in 'classic iframe mode'. Instead, you'll need to use this.document (see: document property) to get a reference to the iframe.
Related
When click on datepicker (http://www.eyecon.ro/bootstrap-datepicker/), his SHOW event fires, but the modal's SHOW.BS.MODAL fires too. Whhere is a problem?
$(document).ready(function() {
$('#ArrDate')
.datepicker()
.on("show", function(event){
alert("Q");
});
$("#dlg3000to3100")
.on('show.bs.modal', function (event) {
alert("W");
});
$("#dlg3000to3100")
.modal("show");
});
exampleExample
Thanks
It seems to be a bug (or feature?) of the datepicker. What you can do is to prevent the show.bs.modal event reaching the dialog.
$('#ArrDate').on('show.bs.modal', function (event) {
event.stopPropagation();
});
This will detect the event at the datepicker level and stop the event propagation, so show.bs.modal will not 'bubble up' to the dialog.
Another work around is to swap the show.bs.modal with shown.bs.modal on modal event.
modal.on('shown.bs.modal', function (event) {
// Do something
});
however if it is not possible to swap show with shown or hide with hidden use the namespace check
modal.on('show.bs.modal', function(e) {
if (e.namespace === 'bs.modal') {
// Do something
}
});
Had a similar issue, caused by the datepicker watching for a show event.
One option is to use the shown event on the modal but this is not ideal in all cases
$('#dlg3000to3100').on('shown.bs.modal', function (event) {
// modal code in here
});
A more elegant solution is to check the namespace of the event
$('#dlg3000to3100').on('show.bs.modal', function (event) {
if(event.namespace !== 'bs.modal') return;
// modal code in here
});
https://jsfiddle.net/bzh75tww/
I have a page that is built around a wrapper with some very defined logic. There is a Save button on the bottom of the wrapped form that looks like this:
<form>
... my page goes here...
<input id="submitBtnSaveId" type="button" onclick="submitPage('save', 'auto', event)" value="Save">
</form>
This cannot change...
Now, I'm writing some javascript into the page that gets loaded in "...my page goes here...". The code loads great and runs as expected. It does some work around the form elements and I've even injected some on-page validation. This is where I'm stuck. I'm trying to "intercept" the onclick and stop the page from calling "submitPage()" if the validation fails. I'm using prototype.js, so I've tried all variations and combinations like this:
document.observe("dom:loaded", function() {
Element.observe('submitBtnSaveId', 'click', function (e) {
console.log('Noticed a submit taking place... please make it stop!');
//validateForm(e);
Event.stop(e);
e.stopPropagation();
e.cancelBubble = true;
console.log(e);
alert('Stop the default submit!');
return false;
}, false);
});
Nothing stops the "submitPage()" from being called! The observe actually works and triggers the console message and shows the alert for a second. Then the "submitPage()" kicks in and everything goes bye-bye. I've removed the onclick attached to the button in Firebug, and my validation and alert all work as intended, so it leads me to think that the propagation isn't really being stopped for the onclick?
What am I missing?
So based on the fact that you can't change the HTML - here's an idea.
leave your current javascript as is to catch the click event - but add this to the dom:loaded event
$('submitBtnSaveId').writeAttribute('onclick',null);
this will remove the onclick attribute so hopefully the event wont be called
so your javascript will look like this
document.observe("dom:loaded", function() {
$('submitBtnSaveId').writeAttribute('onclick',null);
Element.observe('submitBtnSaveId', 'click', function (e) {
console.log('Noticed a submit taking place... please make it stop!');
//validateForm(e);
Event.stop(e);
e.stopPropagation();
e.cancelBubble = true;
console.log(e);
alert('Stop the default submit!');
return false;
submitPage('save', 'auto', e);
//run submitPage() if all is good
}, false);
});
I took the idea presented by Geek Num 88 and extended it to fully meet my need. I didn't know about the ability to overwrite the attribute, which was great! The problem continued to be that I needed to run submitPage() if all is good, and that method's parameters and call could be different per page. That ended up being trickier than just a simple call on success. Here's my final code:
document.observe("dom:loaded", function() {
var allButtons = $$('input[type=button]');
allButtons.each(function (oneButton) {
if (oneButton.value === 'Save') {
var originalSubmit = oneButton.readAttribute('onclick');
var originalMethod = getMethodName(originalSubmit);
var originalParameters = getMethodParameters(originalSubmit);
oneButton.writeAttribute('onclick', null);
Element.observe(oneButton, 'click', function (e) {
if (validateForm(e)) {
return window[originalMethod].apply(this, originalParameters || []);
}
}, false);
}
});
});
function getMethodName(theMethod) {
return theMethod.substring(0, theMethod.indexOf('('))
}
function getMethodParameters(theMethod) {
var parameterCommaDelimited = theMethod.substring(theMethod.indexOf('(') + 1, theMethod.indexOf(')'));
var parameterArray = parameterCommaDelimited.split(",");
var finalParamArray = [];
parameterArray.forEach(function(oneParam) {
finalParamArray.push(oneParam.trim().replace("'","", 'g'));
});
return finalParamArray;
}
How to check if a button is clicked or not in prototype JavaScript?
$('activateButton').observe('click', function(event) {
alert(hi);
});
The code above is not working.
With this button:
<button id="mybutton">Click Me</button>
Use this:
$('mybutton').observe('click', function () {
alert('Hi');
});
Tested and works, here.
You might want to encase it in a document.observe('dom:loaded', function () { }) thingy, to prevent it executing before your page loads.
Also, just an explanation:
The single dollar sign in Prototype selects an element by its id. The .observe function is very similar to jQuery's .on function, in that it is for binding an event handler to an element.
Also, if you need it to be a permanent 'button already clicked' thingy, try this:
$('mybutton').observe('click', function () {
var clicked = true;
window.clicked = clicked;
});
And then, if you want to test if the button has been clicked, then you can do this:
if (clicked) {
// Button clicked
} else {
// Button not clicked
}
This may help if you are trying to make a form, in which you don't want the user clicking multiple times.
How one may do it in jQuery, just for a reference:
$('#mybutton').on('click', function () {
alert('Hi');
});
Note that, the jQuery code mentioned above could also be shortened to:
$('#mybutton').click(function () {
alert('Hi');
});
jQuery is better in Prototype, in that it combines the usage of Prototype's $ and $$ functions into a single function, $. That is not just able to select elements via their id, but also by other possible css selection methods.
How one may do it with plain JavaScript:
document.getElementById('mybutton').onclick = function () {
alert('Hi');
}
Just for a complete reference, in case you need it.
$('body').delegate('.activateButton', 'click', function(e){
alert('HI');
});
I have:
$('.image.txt_over').hover(function(){
$(".screen", this).stop().animate({top:'165px'},{queue:false,duration:300});
$(this).fadeTo("slow", 1);
}, function() {
$(".screen", this).stop().animate({top:'226px'},{queue:false,duration:460});
});
and I am trying to keep the jquery hover effect once a new set of images are refreshed via Ajax. Currently the jquery is killed once the Ajax refreshes.
I think I need .delegate() or .live() but cant seem to get either to work. Still learning jquery.
Try this:
$('body').delegate('.image.txt_over', 'mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(".screen", this).stop().animate({top:'165px'},{queue:false,duration:300});
$(this).fadeTo("slow", 1);
} else {
$(".screen", this).stop().animate({top:'226px'},{queue:false,duration:460});
}
});
Does anyone know how I can attach an onpaste event in CKEditor 3.x?
I basically want to grab CTRL + V data and add few text to it and then add it to the editor.
I have looked around but have not found a definitive answer. CKEditor forum is of not much help.
This should do the trick
var editor = CKEDITOR.instances.YourInputControlName;
editor.on('paste', function(evt) {
// Update the text
evt.editor.setData(evt.editor.getData() + ' your additional comments.');
}, editor.element.$);
Your both examples are a little bit synthetic.
At first, editor.getData() gets all the content of editor, so if you want to process only pasted data, you need to get ev.data.html and paste to correct place.
editor = CKEDITOR.instances.editor1;
editor.on('paste', function (evt) {
var editor = evt.editor;
evt.stop(); // we don't let editor to paste data, only for current event
// show loader that blocks editor changes
$.post('clean.php', {html: evt.data.html}, function (data) {
editor.insertHtml( data.html ); // text will be inserted at correct place
// hide loader
}, 'json');
});
Don't use functions editor.setReadonly(true/false), you won't be able to paste text in correct place (in cases with async data processing).
This example edits the content to be pasted by removing all img elements.
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.on('paste', function (ev) {
ev.data.html = ev.data.html.replace(/<img( [^>]*)?>/gi, '');
});
});
editor = CKEDITOR.instances[id];
editor.on('paste', function (evt) {
evt.stop();
var data = evt.data.dataValue;
if (window.chrome || window.safari) {
// removing span wrapper on webkit browsers.
data = $(data).html();
}
evt.editor.insertHtml(data);
});
I know it's an old question, but thought I'd add my version of aliaksej's answer as it allows the use of a custom 'cleaner' - it didn't quite work for me until I modded it as below.
editor = CKEDITOR.instances[id];
editor.on('paste', function (evt) {
evt.stop();
$.post('/actions/clean.php', {html: evt.data.dataValue}).done(function (data) {
evt.editor.insertHtml(data);
}, 'json');
});