In the tinyMCE init editor,
How can i in setup do:
ed.onKeyDown.add(function (ed, evt) {
// alert the character you just typed
});
Say if you type "a" a alert should come up with "a"
The evt.keyCode property contains the code of the pressed key, so you can do this:
alert(String.fromCharCode(evt.keyCode));
Note, however, that this will also trigger an alert when a special key is pressed (e.g. shift), so you might want to prevent that by checking other properties of the evt object (which is an instance of DOM Event). See the documentation for keyboard event objects at https://developer.mozilla.org/en/DOM/KeyboardEvent.
Edit: Use onKeyPress instead of onKeyDown, as onKeyDown might return incorrect key codes in some browsers.
Related
I am trying to build a basic interface using pyGTK, where based on the key being pressed, I evoke different functions.
I understand that using the 'connect' method, I can capture events such as a keypress or a click, like so:
self.btn1.connect("clicked", self.funcRec)
self.btn1.connect("key_press_event", self.funcRec)
Doing this will call the funcRec function when there is a key press event, or when the button is being clicked.
But I am not able to find a way to capture the actual key being pressed and trigger different functions. Is there a way to do this?
I found a way. I used a function that captures the event and gets the value of the key press event.
First you 'connect' and get the 'key_press_event' and trigger a callback function
self.connect("key-press-event", self.on_key_down)
where 'on_key_down' callback function is defined as,
def on_key_down(self, widget, event):
key = event.keyval
if key == gtk.keysyms.Right:
self.onRightPress(self, widget)
if key == gtk.keysyms.Left:
self.onRightPress(self, widget)
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
...
}
});
is it possible in TinyMCE to know which button was clicked? so I could place specific action on specific event of a specific button.
the buttons here are default control-buttons like bold/italic/select-font not a custom button one.
probably in the init, but I have no idea what to call. I could capture the editor's events but not the button's.
For example, let's say I want a messagebox popped-up everytime bold button is clicked. How to capture the click event of bold button? is creating custom button the only way?
No, you can define an own command and call this command (+ the defualt action) on buttonklick. I do not know if you want a generic way for all buttons. But it is easy to do it just for one or two buttons.
Example: We want to put an action on the bold button.
First we define an own command in one of our own plugins (in the "init : function(ed, url)" -section):
ed.addCommand('my_bold', this.my_bold, this); //calls the function my_bold
Then we overwrite the default action with an the command:
if (ed.controlManager.get('bold')){
ed.controlManager.get('bold').settings.cmd='my_bold_action';
};
Now, we only need to define the function my bold
my_bold: function() {
// exectution of regular command
this.editor.execCommand('Bold');
// now do whatever you like here
...
},
ed.controlManager must be called in "onInit" methode :
ed.onInit.add(function(editor) {
.......
........
if (editor.controlManager.get('bold')){
editor.controlManager.get('bold').settings.cmd='my_bold_action';
};
});
i have a TextBox which is used for searching products in my app. This TextBox should do searching after user key in keywords to the TextBox or when user hits ENTER.
to be able to explain further, this TextBox worked like the Google's search box wherein search results are viewed instantly after user input.
i have tried the ValueChangeHandler but the event will only fired if the TextBox loses its focus. i also tried KeyPressEventHandler but i want to only fire the search event after user key-in the keyword, not on every key press. can anyone give me an idea on how to do this?
i was thinking of using the GWT Timer to fire the search event after a certain time. the timer would only run if user no longer key-in keys to the TextBox but how will i know if no KeyPressEvent is fired?
This works for me :
#UiHandler("searchBox")
public void onKeyUpEvent(KeyUpEvent keyPress) {
// do the search
}
You need KeyUpEvent, KeyPressEventHandler will always be late...
Use KeyPressEventHandler or KeyUpEventHandler and check whether the last typed character equals a whitespace. I think you can receive the key, which fired the event, from the event object. Otherwise use the getText() methode of the TextBox. Do only update the search results when you detect a whitespace or ENTER. I know this doen't solve the problem if the user stops typing after a word :-)
I checked in the handler code of the pressed key, and depending on it to perform some action.
searchQueryTextBox.addKeyUpHandler(new KeyUpHandler() {
#Override
public void onKeyUp(KeyUpEvent event) {
if (event.getNativeKeyCode() == 13 || event.getNativeKeyCode() == 32) {
//run a search. code 13 - key "Enter", code 32 - key "Space"
}
}
});
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.