We are trying to use tinyMCE for one of our applications. We would like to attach some event handling to particular elements within tinyMCE. We've tried doing it using
Event.add(element, 'keypress', getTag);
Where element is the HTML element we are trying to attach the event to and getTag is the function we'd like called when the keypress event is fired. The particular element we are trying to attach to is a span element with some text in it. We'd like to capture when particular key combinations are entered(like ctrl - F10) between the span tags and popup a menu with options.
The options in the menu will vary depending on the particular span elements the combination is entered in. That's why we want to attach to particular elements instead of globally attaching to all span elements in the document(within tinyMCE). i.e The getTag function will behave differently, using closures, depending on where the combinations are entered.
The problem is when we attach to the particular elements and test them nothing happens for any 'keypress' events. If we try to attach to the span elements using a 'click' event everything works as expected. Once we revert back to using 'keypress' nothing happens again.
Using the debugging tools I've verified a couple of things. The event listeners are attached to the elements. It seems tinyMCE creates a toplevel keypress and click(along with others) to the document within tinyMCE. I'm guessing this is how Editor.onKeyPress().add() like functions work. When I debug the working scenorio using click I can see where the event is fired for both the document and span elements. While debugging the keypress event I only see the event fired for the document element, not the span element. I'm thinking that tinyMCE is suppressing the event, but I can't figure out how, and what needs to be done to stop it.
Use this handler eigther in one of you own plugins or using the tinymce config param setup
ed.onKeyDown.add(function onkeydown(ed, evt) {
var is_in_span = ed.selection.getNode().nodeName == 'SPAN';
// check for caret in SPAN and F10-Key
if (is_in_span && evt.keyCode == '121'){ // you may add other keyCodes here
// do whatever you like here
...
}
});
Related
In a very special slickgrid scenario (see https://serenity.is/demo/BasicSamples/DragDropInTreeGrid) I need to handle hover / Mouseover events on the Tree elements (links) myself.
However, Slickgrid is hijacking/disabling my registered hover/mouseover events.
What I already have tried:
(1)
Using slickgrid's mouseEnter event routine which in normal slickgrids give you back the cell on which the mouseover event has occured.
--> this works basically but for an unknown reason this is very unreliable in my special scenario above (the event always fires but sometimes it comes directly from the <a href..> (which is what I want) - but most of the time it comes from a <div>... which is useless in my scenario).
(As I could successfully register a contextmenu event on the tree elements and this always works reliably on the elements), I also would like the same principle for the hover/mouseover events).
(2)
Prevent the mouseenter events from the tree elements to propagate - like this:
this.slickGrid.onMouseEnter.subscribe((e, dd) => {
e.stopImmediatePropagation();
});
--> This had no effect.
Question:
How can I stop slickgrid from hijacking/unregister my registered mouseover/hover events on the tree elements so that I can handle them myself?
I am developing a plugin to eclipse and I want to add some actions to the context menu. But actually I wanted to prepare results beforehead according to the text selection in the editor and just show them when the menu item will be selected.
I followed that article http://www.eclipse.org/articles/Article-WorkbenchSelections/article.html - all interfaces (ISelectionListener, ISelectionChangedListener etc) allow to handle the SelectionChanged event, but editor counts changing only when length of selection also changes - so the simple click in the editor doesn't fire the event, although I want to get the word (for example) as a selection if cursor is inside the word now and lenght is 0.
So the question is - what is the simpliest solution for traking down cursor position/offset/selections with zero lengh value changing?
In that case you have to use KeyListener and MouseListener as well. For e.g take a look at org.eclipse.jface.text.PaintManager, and it listens to all these events.
If you are extending TextEditor you can override handleCursorPositionChanged() method to fire your event and use getCursorPosition() to get the cursor position as a String.
I have a Suggest box which has 2 hadlers: SelectionHandler for selecting items in SuggestionList and keyDownHandler on TextBox of SuggestBox. I want to prevent default action on event(for example on Enter pressed) when the suggestion list is currently showing. The problem is that SelectionEvent is always fires before KeyDownEvent and suggestion list is closed after SuggestionEvent fired, so in KeyDownEventHandler suggestion list is already closed. And I can't use prevent default action on Enter with checking the suggestion list is showing like this:
if ((nativeCode == KeyCodes.KEY_TAB || nativeCode == KeyCodes.KEY_ENTER) && display.isSuggestionListShowing()) {
event.preventDefault();
}
where display.isSuggestionListShowing() is the method which calls isShowing on SuggestBox .
So how can i change the order of event handling(Selection before KeyDown to the keyDown before Selection) in this case?
I'm assuming you mean SuggestBox instead of SuggestionList, as there is no class by that name in the gwt-user jar.
The SuggestBox uses the keydown event to provide the SelectEvent - if it can't see the keys change (from the browser, which actually picks up the user's action), it can't provide the logical selection event.
This means that reordering events doesn't really make sense - you can't have the effect before the cause. In many cases, the browser emits events in a certain order, and there is no way to change this, so you have to think differently about the problem.
(Also worth pointing out that preventDefault() only prevents the browser from doing its default behavior - other handlers will still fire as normal.)
One option would be to preview all events before they get to the SuggestBox, and cancel the event in certain cases - look into com.google.gwt.user.client.Event.addNativePreviewHandler(NativePreviewHandler) for how this can be done.
I'm not seeing any other option right away - all of the actual logic for handling the keydown is wrapped up in the inner class in the private method of com.google.gwt.user.client.ui.SuggestBox.addEventsToTextBox(), leaving no options for overriding it.
I have a situation here: I have a form field with trigger xtype, what I want to happen on my trigger function is to open a window with a list or grid of data in it. I want to get the value of those data and assign it as the value of my form field with trigger. Can anyone help me solve this problem. Thank you very much.
You have multiple solutions for this.
You can make use Saki's simple message bus to do the communication between extjs components.
You can create an custom event for your trigger field. When user selects a record in your window, fire the event with the selected record.
Inside your onTriggerClick :
Display your window with grid / view for user selection
Inside your Window (on some submit button):
onSubmitClick: function(){
// Get the selected record & fire event
var selected = grid.getSelectionModel().getSelected();
triggerFieldObject.fireEvent('recordSelect',selected);
}
Inside your event processing (Will be on TriggerField):
onRecordSelect: function(record) {
// Now you have access to the selected record.. process it,
// Set the trigger field value etc
this.setValue('Your Value for Trigger Field');
}
Note: This is a skeleton code and not a complete solution. You will need to add your code according to your requirements.
I have a DataGridCheckBoxColumn in my DataGrid which is to indicate the rows the user has selected. I want the checkboxes to be checked/unchecked with a single click. Making the column editable (i.e. IsReadOnly="False") means the user has to click twice (first click just selects the row, 2nd click changes the checkbox), so I decided to set/clear the property the column is bound to in the view model code in response to the SelectionChanged trigger firing.
Setting/clearing the property works fine, however as soon as I call NotifyPropertyChanged("name of collection the grid is bound to") to get the view to show the change, this causes the SelectionChanged trigger to fire again. This loops about 10 times until an exception is thrown.
If I remove the call to NotifyPropertyChanged, the SelectionChanged trigger fires once, but of course I don't see any change in the UI. The collection is a PagedCollectionView if this makes any difference.
How can I get this to work? Note - I am using MVVM pattern, so everything is done with bindings to View Model (no code behind).
Thanks
Sounds like you have a infinite loop by design.
but try using the selectionchanging instead of selectionchanged,
or put a isloading flag in your viewmodel and dont call the inotify if the isloading is true
I found a very simple solution that doesn't involve triggers or code behind. See: Silverlight single-click checkbox DataGrid columns
It seems to work by using a column template, but only providing the CellEditingTemplate and no CellTemplate.