Search code examples
javascripttinymce

Can I define "document" as a variable in Javascript?

In my application, I sometimes want to define "document" for use in querySelector as "tinymce.get('steps_html').contentAreaContainer.childNodes[0].contentWindow.document". Other times, I want "document" to have it's usual meaning.

Is there a way I can set "document" to be a variable? I've tried the following, none of which return an element:

Defining document:

document = tinymce.get('steps_html').contentAreaContainer.childNodes[0].contentWindow.document;
document.querySelector(myElement)  // Returns nothing

Defining a prefix:

prefix = tinymce.get('steps_html').contentAreaContainer.childNodes[0].contentWindow;
prefix.document.querySelector(myElement);  //Returns nothing

Defining a prefix as text:

prefix = "tinymce.get('steps_html').contentAreaContainer.childNodes[0].contentWindow;
    prefix.document.querySelector(myElement)";  //Returns nothing

Only tinymce.get('steps_html').contentAreaContainer.childNodes[0].contentWindow.document.querySelector(myElement) returns an element.

Solution

  • I found my own answer. I'll post it in case anyone else comes across this post.

    First, find your TinyMCE Editor iframe

    var iframe = document.querySelector("#myDiv .tox-editor-container .tox-edit-area iframe");

    Then get its contents

    var iframe_content = iframe.contentDocument;

    Then you can perform your queries

    var frame_li = iframe_content.querySelectorAll("#tinymce li");