Xinha Discussion Forum

Ritz009

New member

Registered: 2008-01-22

Posts: 1

Capturing Key Events in Xinha

I have managed to get the Xinha 0.94 running on my simple textarea. I am trying capture the 'keypress' event into the Xinha Text Area so that I can modify the pressed keys/characters to something else.

Q1: Where should I add the Event Listener ? myTextArea OR Xinha created Editor ??
I hope the answer to that is my textArea; if that's the case be then is the 'keypress' the right event to capture or it should be 'change' ?

Secondly, HOW to add an event listener ?
Assuming, my understanding to be correct for Q1, I have tried adding -

=================================================
Xinha InitializationCode
=================================================

function keyPressedEventHandler(event){
    alert("Common Event Handler for IE & FF");
}

function keyIsPressedFF(event){
    alert("Key is PressedFF");
    keyPressedEventHandler(event);
    return false;
}

function keyIsPressedIE(){
    alert("Key is PressedIE");
    keyPressedEventHandler(window.event);
    return false;
}

var myEditor = document.getElementById("myEditor");

Xinha._addEvent(myEditor, "keypress",  keyIsPressedIE);   //Line a
Xinha._addEvent(myEditor, "keypress",  keyIsPressedFF);   //Line b

alert("Event Listener Registered with Xinha");

=================================================

I am getting this alert, but none of my methods are getting called. I have tried using 'Line a' 'Line b' separately and simultaneously, but to no luck
I have checked the error console onto FF is doesn't say anything but sometimes I get an error saying 'el has no properties' @ XinhaCore 2757, I don't know whether they are related.

I am sorry, I know I sound kiddish, as I am new to JS and all these stuffs. I don't have it deployed onto internet somewhere so I can't give the URLs yet.

Please bear with me & Thanks for your support in advance.

Ritz

Last edited by Ritz009 (2008-01-25 15:20:37)

ray

Xinha Administrator

From: Germany

Registered: 2005-03-23

Posts: 521

Website

Re: Capturing Key Events in Xinha

It is indeed the editor (technically an iframe) you have to add the listener to. You can do this either from "outside" like so

        //add this in your init function AFTER Xinha.startEditors()
      var editor = Xinha.getEditor('myTextArea'); //please update to the latest version to have this utility function
    editor.whenDocReady (function() {Xinha._addEvent(editor._doc,"keydown", keyHandler)}); // you have to wait until every thing is initialized
    
    function keyHandler (event) {
        event = (event) ? event : window.event; // care for IE
        var key = String.fromCharCode(event.keyCode);
        alert (key);
                // if you for some reason don't want the keypress to be executed, use this; otherwise just return true at the end of your function 
        Xinha._stopEvent(event);
        return false;
    }

or you can create a custom plugin, which is what I would prefer. It is as easy as putting this code in a file plugins/MyCustomPlugin/my-custom-plugin.js

MyCustomPlugin._pluginInfo = {
  name          : "MyCustomPlugin"
}
function MyCustomPlugin(editor)
{
    this.editor = editor;
}

MyCustomPlugin.prototype.onKeyPress = function ( event )
{  // here you don't have to care about getting the event right
   var key = this.editor.getKey(event); 
   alert(key);
   // once again you can stop the event 
   Xinha._stopEvent(event);
   // return true here to to stop the event to be dispatched to other plugins, too
   return true;
}

Available API function: http://xinha.raimundmeyer.de/JSdoc/Xinha/

phraktal

New member

Registered: 2008-11-06

Posts: 3

Re: Capturing Key Events in Xinha

Hi,

Regarding custom plugins:

Do they need to go into plugins/ directory inside xinha ?

Personally, I would rather keep my plugins ouside of xinha directory. I just want to keep it clean, if I ever do updates etc, I do not want to have to worry to about it.

What would be required in order to keep them outside ?

Thanks,

Tom

Last edited by phraktal (2008-11-06 02:50:43)

Ecco

Xinha Community Member

From: Netherlands

Registered: 2005-03-08

Posts: 48

Website

Re: Capturing Key Events in Xinha

Ray, how would you know which editor calls your plugin? I'd like to pass a variable to the plugin, the id of the content. I could derive that value from the editor which calls the plugin.