I'm writing my plugin and I am trying to set an event to an element, that I'll add to the editor. The event should act on the key enter.
Unfortunately, when I try to catch a 'key' or 'keydown' event nothing happens, but if I set 'click' event it's working great.
var element = editor.document.createElement('div');
element.setAttribute('data-type', 'example');
element.on('click', function() {
alert("Hi");
});
editor.insertElement(element);
Can someone help a noob like me ? :D
Thanks
You can only listen to keyboard events in editing hosts (focusable elements). So just add your listener to editable element, e.g.
editor.editable().on( 'keyup', function( evt ) { console.log( 'keyup' ); } );
Related
I really need some help, I can't figure out how to handle keypress/keydown events.
I've already tried everything and looked into javascript API documentation and here on forum but I couldn't find any solution.
Can someone please explain the right way to do that?
So my question is... how do I get key events working ?
The easiest way is to listen to editor#key event. Just like so:
var editor = CKEDITOR.instances.editor1;
editor.on( 'key', function( evt ) { console.log( evt ); } );
I try to get the onSelectionChange event for ckeditor.
When you select something it ckeditor rise correctly the event, but if you select something else in the same paragraph the event is not raised.
Is there a way to make creditor rise onSelectionChange event any time i select some text. ?
Any advice on solve this issue ?
Thanks
The answer is in the API documentation:
Fired when selection inside editor has been changed. Note that this event is fired only when selection's start element (container of a selecion start) changes, not on every possible selection change. Thanks to that selectionChange is fired less frequently, but on every context (the elements path holding selection's start) change.
You can observe all mouse and keyboard actions though (JSFiddle):
function logSelection() {
console.log( this.getSelection() );
}
CKEDITOR.replace( 'editor', {
on: {
contentDom: function() {
this.document.on( 'mouseup', logSelection, this );
this.document.on( 'keyup', logSelection, this );
}
}
} );
I'm newbie to CKEDITOR. It might sound worthless to some of you to answer this questions. But, I'm struggling to find a solution for my problem for the past few hours.
Aim :
I would like to add an event listener to particular kind of element ( For ex : span )
What i tried :
I used contentDom event thrown by CKEDITOR, to add the event listener to span elements.
Problem :
However, Adding event listener to span will be applicable for the span which are currently available in editor. But, Not for the elements ( span ) which will be created by the user in future. What should i do now?
Use the benefits of event bubbling [1, 2]. Attach the listener to the topmost element of the editor (editable) and filter out the events:
CKEDITOR.replace( 'editor1', {
on: {
contentDom: function() {
this.editable().on( 'click', function( evt ) {
var target = evt.data.getTarget();
if ( target.is( 'span' ) ) {
console.log( 'clicked span!' );
}
} );
}
}
} );
I am using CKEditor 4.4.3 and trying to listen to an editor's click event:
editor.on('click', function (e) {
console.log('click event from attaching to the editor');
});
For some reason, the click event never fires. However, if I listen to the doubleclick event, it fires when the editor is double clicked.
I was previously listening to the click event on editor.editable, but it doesn't appear to work for editors that are not inlined. Why is the click event not working?
Some further investigations:
Attaching the event handler on editor.document fires for every click, including clicks outside the editor.
Attaching the event handler to editor.container fires for clicks on the container including the toolbars.
Fiddle: http://jsfiddle.net/295PE/
Correct way of attaching listeners to the editable element in CKEditor:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'click', function() {
// ...
} );
} );
Read more about the reasons why contentDom event has to be used instead of e.g. instanceReady in editable.attachListener documentation.
Use attach the event handler to the editor's editable. This needs to be done after the editor is ready:
editor.on('instanceReady', function (e) {
editor.editable().on('click', function (event) {
console.log('clicked');
});
});
Fiddle: http://jsfiddle.net/8fZpz/
i´ve got a question about mootools eventhandling.
I wanna delay a mouseenter event for a dropdown navigation. After 1 second the drowdown list will be shown by "setStyle('display', 'block')...this is what i´ve got so far, and it´s working:
$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');
$('main-nav').getElements('li.level-1').each(function(elem){
var list = elem.getElement('.quick-nav');
elem.addEvents({
'mouseenter' : function(event){
(function() {
elem.getElement('.quick-nav').setStyle('display', 'block');
}).delay(1000)},
'mouseleave' : function(event){
elem.getElement('.quick-nav').setStyle('display', 'none');
}
});
});
I´ve delayed the mouseenter event with the delay function...the problem i got and still can´t solve is that the mouseenter event will although happen when i already left my navigation item. I enter the item, leave the item immediately, and after one second the subitem still appears. I therefore need some kind of check within the mouseleave event, wheather my menuitem is already displayed or not. Then i could stop the mouseenter event, if the menuitem is still not visible... I don´t know how i can respond the mousenter event from the function of the mouseleave event...hope anybody understood this...
Thanks in advance.
use a timer and clearTimeout on mouseleave (also $clear(timer) in older versions of mootools).
$('main-nav').getElements('li.level-1 ul.quick-nav').setStyle('display', 'none');
$('main-nav').getElements('li.level-1').each(function(elem) {
var list = elem.getElement('.quick-nav');
var timer;
elem.addEvents({
'mouseenter': function(event) {
timer = (function() {
elem.getElement('.quick-nav').setStyle('display', 'block');
}).delay(1000)
},
'mouseleave': function(event) {
clearTimeout(timer);
elem.getElement('.quick-nav').setStyle('display', 'none');
}
});
});