How to use JS inside of the (iframe) wp_editor function?

My frontend editor

I’m using the wp_editor function to create a cool frontend editor. The problem is: WP generates an iframe where the editor’s content is displayed – however I have a hard time to do anyting with JS inside that iframe. I wasn’t able to set an working jQuerry selecetor (because I want resize the editor dynamically based on it’s content hight) and can’t use .niceScroll (which is a cool jQuerry plugin for custom scrollbars) for that body.

Do I need to load the JS some how from inside the iframe?

My editor html would look like this:

<iframe id="SP_textarea_ifr" frameborder="0" allowtransparency="true" title="Rich-Text-Bereich. Drücke Alt + Shift + H für Hilfe." style="width: 100%; height: 400px; display: block;">
  <html lang="de-DE">
   <head>
    <style id="mceDefaultStyles" type="text/css">...
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   </head>
    <body id="tinymce" class="mce-content-body SP_textarea post-type-review post-status-publish page-template-default locale-de-de mceContentBody webkit wp-editor html5-captions" data-id="SP_textarea" contenteditable="true">
      <p><strong>Oculus Rift</strong> ist die VR-Brille der <em>nächsten Generation</em> – und das hat seinen Preis. Wie viel das Gerät kostet und welche Systemanforderungen <a href="https://fontawesome.com/icons/gem?style=light" data-mce-href="https://fontawesome.com/icons/gem?style=light">Hersteller</a> Oculus VR empfiehlt, verraten wir euch im Sammelartikel.<br><br>Auch zum <em>Release</em>, dem Lieferumfang, den kompatiblen Spielen, Tests und vielen weiteren Themen haben wir wissenswerte Informationen zusammengetragen. Konkurrenz bekommt Oculus Rift unter anderem von PlayStation VR und HTC Vive. 
      </p>
    </body>
  </html>
</iframe>

A call for the scrollbar plugin like this doesn’t work…

jQuery(document).ready(function( $ ) {

    $("body#tinymce").niceScroll({
      scrollspeed: 80, // scrolling speed
      mousescrollstep: 60, // scrolling speed with mouse wheel (pixel)
      cursorwidth: "0.22vw", // cursor width in pixel (you can also write "5px")
      cursorborderradius: "1px",
      railpadding: {
        top: 15,
        right: 3,
        left: 3,
        bottom: 15
      }, // set padding for rail bar
      zindex: "100000000",
      autohidemode: false, // how hide the scrollbar works, possible values:
      scrollbarid: "overlay_scrollbar",
      enableobserver: true,
    });
});

Also something simple like this doesn’t work (I was working on the dynamic height)…

jQuery(document).ready(function( $ ) {

    $('iframe#SP_textarea_ifr').keypress(function(e) {
      $('iframe#SP_textarea_ifr').contents().find('body').css('background-color', '#f33');
    });
});

Read more here:: How to use JS inside of the (iframe) wp_editor function?

Leave a Reply

Your email address will not be published. Required fields are marked *