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 );
}
}
} );
Related
I'm seeing some strange behavior in d3. I have a force directed graph in the usual way
node = svg.selectAll(".node").data(graph.nodes).enter().append("circle")....
and when someone clicks on a node, I want a simple animation (instead of a console.log)
function set_focus(d) { console.log('set'); }
function remove_focus() { console.log('remove'); }
node.on("mousedown", set_focus);
node.on("mouseup", remove_focus);
Interestingly, when I mousedown on a node, the set event fires, but when I release the mouse, remove_focus doesn't fire. Anyone have any idea what's going on?
d3v5, chrome 65, macOS 10.13
tldr: the zoom event is conflicting with your mouseup event.
I created a fork because I'm not too sure what you're going to want to do with this and I didn't want to mess with your git history: this link is the fork.
It seems that your Zoom event on the SVG is "consuming" all other events once the mouse is clicked. My impression is that this is a known and commonly complained about issue. I think that this GitHub ticket is related, and so is this one. Per Mike Bostock,
This is the expected behavior. Per the release notes: “The zoom
behavior now consumes handled events.” So, if a mouseup event was part
of a zoom gesture, then the zoom behavior stops the immediate
propagation of that mouseup event preventing other listeners from
receiving it (and where possible prevents the associated browser
default behavior). This makes it easier to combine zooming and
dragging as in this example:
http://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084
If you want to prevent a zoom gesture from starting, use zoom.filter
to ignore certain events, or use event.stopPropagation or
event.stopImmediatePropagation to prevent the zoom behavior from
receiving the initiating event. If you want to do something after a
zoom gesture, listen to the zoom event.
I can get your mouseup event to fire by either deleting the d3.zoom event, or by calling d3.event.stopPropagation within the set_focus function. So, the two lines below (and in the fork) get your remove_focus function to fire, but I'm not sure if I also messed up how you want the zoom event to be working:
function set_focus(d) {
console.log('set');
d3.event.stopPropagation();
node.style("opacity", function(o) { return (d == o || o.layer == d.layer - 1) ? 1 : 0.1; });
link.style("opacity", function(o) { return (o.target == d.id) ? 1 : 0.02; });
}
function remove_focus() {
console.log('remove');
d3.event.stopPropagation();
node.style("opacity", 1);
link.style("opacity", function () { return edgeOpacity; })
}
Now you have a listener for the end of a zooming event see here
so you could do something like
d3.zoom().on('end', remove_focus)
I have a problem with filtering events:
I use fullcalender in agendaDay-View
I use a drop-Down list to select a driver
I compare the name (it is a property of event-object) with the selected value
(this part is ok)
Then,
I remove all Events (.fullCalendar('removeEvents');)
Add the specific events
(add with renderEvents doesn't work proberly at the moment)
And now my problem appears:
For the first time it works, however, when I select another 'driver', the events are gone, because of the 'removeEvents'-Action before.
So, how can I solve this problem, that I can only display the filtered events and keep the other (actualley all events) to filter again for second, third n- time?
$('#' + id).fullCalendar('refetchEvents');
was the first idea, however, its brings all back and selected Issues were doubled (and so on).
I'm thankful for every hint.
Ok I think you can solve your problem with fullCalendar's eventRender function.
The function can also return false to completely cancel the rendering of the event.
Your event from events.json should have a property like 'driver_id'.
I would have select field instead of dropdown with option keys being driver ids, values - names or whatever. Lets say it's id would be 'driver_select'.
Then render events like this:
$('#calendar').fullCalendar({
//...
eventRender: function(event, element) {
//driver select should have default value assigned or else no events will be rendered
if ($("#driver_select").val() !== event.driver_id) {
return false; //do not render other driver events
}
}
//...
});
Handle select changes to update
$("#driver_select").off('change').on('change', function() {
$("#calendar").fullCalendar( 'refetchEvents' );
});
Another approach would be to show all drivers in a timeline. For that you can use FullCalendar Scheduler.
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' ); } );
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!' );
}
} );
}
}
} );
When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?
The following code will save the current edit.
Slick.GlobalEditorLock.commitCurrentEdit();
You'll need to place this inside an event handler that you think should trigger the save. For example, if you're using the sample text editor plugin, I believe an editor-text CSS class is added to the input field that's created when you're editing a cell so something like this should work:
$('#myGrid').on('blur', 'input.editor-text', function() {
Slick.GlobalEditorLock.commitCurrentEdit();
});
I found that I needed to wrap clav's handler in a timeout:
$("#myGrid").on('blur', 'input.editor-text', function() {
window.setTimeout(function() {
if (Slick.GlobalEditorLock.isActive())
Slick.GlobalEditorLock.commitCurrentEdit();
});
});
to avoid errors like:
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
when using the keyboard to navigate. Presumably the new blur handler fires before SlickGrid can do its own handling and this causes problems.
Unfortunately, probably due to differences in event processing, Grame's version breaks keyboard navigation in chrome.
To fix this, I added another check to only commit the edit, if the newly focused element is not another editor element within the grid (as the result of keyboard navigation):
$('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
window.setTimeout(function() {
var focusedEditor = $("#grid :focus");
if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
Slick.GlobalEditorLock.commitCurrentEdit();
}
});
});
This seems to work in current versions of firefox, chrome and ie.