CODEWITHSUNDEEP
javascriptjqueryiframetinymcetinymce-4
Nolan P
Nolan P

Reputation: 147

Initializing TinyMCE inside iFrame from parent page

I am working on a CMS where we are planning on using TinyMCE's inline editing feature. We are using an iFrame for the user's view of their website (while in edit mode). The parent page holds all of the editing logic/GUI. We would like to keep the reference to Tiny on the parent, outside of the iframe page itself (to keep the user's website clean, free of references), but initialize it on elements inside of the frame.

So here are the ideal requirements:

  1. Only have Tiny referenced in the parent page, not the user's website page (iframe) itself
  2. Be able to initialize Tiny on specific elements (elements with a certain class) INSIDE the iframe, FROM the parent
  3. Be able to remove/uninitialize Tiny from the elements on the page for a clean save of the content

I'm not even sure if this is possible (can't find anyone who's tried this), but it would definitely be our ideal solution. I can't find any way to give Tiny a selector that will go inside of an iframe. For example, this code, which is on the parent page.....

tinymce.init({
                selector: ".editable-text", //the elements I want to enable this on
                inline: true,
                .....
            });

.....should be something like this (I realize this would never work):

tinymce.init({
                selector: "#My-iframe .editable-text", //So go into the iframe, then find ".editable-text"
                inline: true,
                .....
            });

If it's any help, I do have jQuery on both the parent and the frame (but I do NOT have the jQuery version of Tiny).

Thank you

Upvotes: 2

Views: 1214

Answers (1)

Draco18s no longer trusts SE
Draco18s no longer trusts SE

Reputation: 15951

I don't think you can. This will get you a jQuery reference to your editable textarea:

$("#My-iframe").contents().find(".editable-text");

But I can't find any way to pass that to TinyMCE's init method, or call the init method on this object. TinyMCE wants only a selector, which is insufficient in this case.

Upvotes: 1

Related Questions