Latest revision as of 17:49, 18 January 2008

How do I capture an onkey event within FCKeditor?

Below is an attempt at explaining on how to capture the onKey events within an instance of FCKeditor, using the plugin framework.

Assume we are working on the file plugin.js, which has associated language file(s)

Toggle line numbers

   1 // BEGIN plugin.js
   2 function DENOnKeyDownFunction(){
   3  alert(FCKLang['DlgDenOnKeyDown']);
   4 }

This is the function that will get executed when the keypress is detected. We are just popping up an alert box for this example.

FCKLang['DlgDenOnKeyDown'] will be replaced with the localized string; in this case "A key was pressed". One of the best parts about FCKeditor is the fact that it supports so many languages. In this spirit, try to use language files! Even if you only provide one translation, in your native language - instead of hard coding the strings in the plugin.js - you will provide the framework for others to expand your plugin to other languages easily and cleanly, without having to go into the actual plugin.js source code and maybe breaking something.

Toggle line numbers

   1 function DenIE_OnKeyDown()
   2 {
   3     var e = FCK.EditorWindow.event ;
   4     var alreadyRun = false;
   5     // alert(e.keyCode);
   6     switch ( e.keyCode )
   7     {
   8         case 13 :    // ENTER
   9             if ( !(e.ctrlKey || e.altKey || e.shiftKey) )
  10             {
  11                 e.cancelBubble = true ;
  12                 e.returnValue = false;
  13                 if (alreadyRun == false) {
  14                     DENOnKeyDownFunction();
  15                     alreadyRun = true
  16                 }
  17                 return false;
  18             }
  19             else
  20             {
  21                 return true;
  22             }
  23                 break ;
  24     }
  25 }

Above is the IE specific code for the event capture. I've added a check so that we only capture the event if the enter key is pressed alone. If the alt key or control key are also being pressed, we do nothing. Uncomment the //alert( e.keyCode ) line and you will get an alert box with the keycode of the key that was pressed. Good if you are trying to make custom multi-key onkey events.

the e.cancelBubble = true; and e.returnValue = false; means that we are stopping the event from going any further. No other FCKeditor plugin, nor the editor itself, will receive this keypress event. If you only want to know when a key is pressed, without preventing any associated events, simply reverse the true and false for those two.

Toggle line numbers

   1 var DenGecko_OnKeyDown = function(e) {
   2     var alreadyRun = false;
   3     // checks if enter key alone was pressed, and if so, say hello!
   4      if (e.which == 13 && !e.shiftKey && !e.ctrlKey && !e.altKey) {
   5         e.preventDefault();
   6         e.stopPropagation();
   7         if (alreadyRun == false) {
   8         DENOnKeyDownFunction();
   9         alreadyRun = true
  10         }
  11         return false;
  12     }
  13     return true
  14 };

The same function as the IE event capture, but done Gecko style, so it will work in FireFox or Netscape as well. Note the e.preventDefault(); and e.stopPropagation(); function calls. These are the Gecko versions of the IE e.cancelBubble and e.returnValue. Comment these lines out if you do not want to prevent other events from occuring after you capture the keydown event.

Toggle line numbers

   1 function FCKKeyPress_SetListeners() {
   2     if (document.all) {        // If Internet Explorer.
   3             FCK.EditorDocument.attachEvent("onkeydown", DenIE_OnKeyDown ) ;
   4         } else {                // If Gecko.
   5             FCK.EditorDocument.addEventListener( 'keypress', DenGecko_OnKeyDown, true ) ;
   6         }
   7 }
   8 FCK.Events.AttachEvent( 'OnAfterSetHTML', FCKKeyPress_SetListeners ) ;

This last bit of code attaches our event to the onkeydown event of the editor. That's it! Add the plugin to your fckconfig and you are in business!