Search code examples
javascriptjquerywysihtml5

jquery iframe event working with mozilla?


I use html5 wysiwyg editor. Editor loads dinamically iframe and I want to monitor keydown event on this editor.

Loaded iframe looks like that:

<iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true">
<html>
  <head><meta charset="UTF-8"></head>
   <body marginwidth="0" marginheight="0" id="descriptionkb" contenteditable="true" 
    class="form-     control editor wysihtml5-editor" spellcheck="true" 
   style="color: rgb(85, 85, 85); cursor: auto; font-family: Arial, Helvetica, sans-serif;
    font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal;
      line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; 
    text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; 
     word-spacing: 0px; background-color: rgb(255, 255, 255);">
           <span id="_wysihtml5-undo" class="_wysihtml5-temp"></span>
    </body>
</html>
</iframe>

What i do to monitor keydown event is :

$('iframe.wysihtml5-sandbox').contents().on('keydown', '#descriptionkb', function(e){ 
        // execute code  on keydown event
  });

This works great with chrome and IE but not working with mozilla. I've tried different ways to acces event but none of them worked in mozilla. Where I am wrong?


Solution

  • Quoting from https://github.com/xing/wysihtml5/wiki/Events

    Make sure that the wysihtml iframe is fully loaded before registering events like this, otherwise results may vary across browsers. One way to ensure that the iframe is fully loaded is to define functions like the above as a callback on the editor’s “load” function.