Search code examples
javascriptjquerydrupaldrupal-7tinymce

Detect Keypress event in TinyMCE Text Area


I already successfully embedded a TinyMCE text editor in a text area in Drupal 7 Form API. I tried pasting the code below in my javascript code, with no luck.

tinyMCE.init({         
    setup : function(ed) {
        ed.onKeyPress.add(function(ed, e) {
            console.debug('Key press event: ' + e.keyCode);
        });
    }
});

There's no errors but only warning, everytime I type on the textarea:

'KeyboardEvent.keyLocation' is deprecated. Please use 'KeyboardEvent.location' instead. 

How will I fix the warning?


Solution

  • Read this link: https://www.drupal.org/node/1714068

    Paste the code below in your .module file.

    /**
    * Implements hook_wysiwyg_editor_settings_alter().
    */
    function MODULENAME_wysiwyg_editor_settings_alter(&$settings, $context){    
         if($context['profile']->editor == 'tinymce') {          
             drupal_add_js(drupal_get_path('module', 'MODULENAME') . '/MODULENAME_tinymce_callbacks.js');
             $settings['setup'] = 'MODULENAME_tinymce_setup_callback';           
         }
    }
    

    In MODULENAME_tinymce_callbacks.js

     function MODULENAME_tinymce_setup_callback(ed){ 
         var range = 0;
         ed.onEvent.add(function (ed, e) {
             range = ed.selection.getRng().startOffset;  
             console.log(range);
         });
     }
    

    The cursor position will then be log in the console of the browser.