How do I add styles to windowManager popup in TinyMCE 4?

Question

note: please read comments.

I'm rendering a jQuery template into a tinyMCE plugin I'm writing and I cant figure out how to style the windowManager window.

It looks like TinyMCE is simply overriding my styles, but I know there are ways to inject styles into the editor so I think this question is still valid.

Here's my plugin:

tinymce.PluginManager.add('example', function (editor, url) {
    var url = "ViewEditActivity.aspx/GetCourseOutlineFromActivity"
    editor.addButton('example', {
        text: 'Link Content',
        icon: false,
        onclick: function () {
            editor.windowManager.open({       
                title: 'Create Content Link',
                width: 800,
                height: 500,                   
                body: [
                    {
                        type: 'container',
                        onPostRender: function (e, f) {                  
                            OnDemandAdmin.CallJsonMethod(url, { "activityId": _activityId }, function (data) {
                                $("#coursetreefortinymcetmpl").tmpl(data.d).appendTo("#" + e.control._eventsRoot._id + "-body");
                                $("#" + e.control._eventsRoot._id + "-body a[href*='" + activityId + "']").parent().css("background-color", "silver");

                            });
                        }
                    }
                ],
                onsubmit: function (e) {
                    editor.insertContent('Title: ' + e.data.title);
                }
            });
        }
    });
});

Here's my initializer:

tinymce.init({
    selector: "#htmlContentEditor",
    plugins: "code example",
    toolbar: "example",
    height: 400,
    //popup_css: "css/TinyMCE-CustomBody.css", <-- doesn't work
    setup: function (ed) {
        ed.on("change", tinymce_onchange_callback);
    }

});

To prove that there is markup being generated here's some markup directly form the windowManager body source:

<h2>
    <a href="ViewEditActivity.aspx?Id=cd20e736-eed7-4c49-b51b-1ef86c418687">Online Broker Prelicense Program ()</a>
</h2>

Rendered Output:

How do I add styles to windowManager popup in TinyMCE 4?

---

update:

Based on @tvgemert's answer. I was able to add a tag to a siblings child, which doesn't help me in this scope unfortunately.

The blue arrow that points to the .mce-editor tag, which is the parent container of the windowManager editor that I need to style. Any tips on this would be most appreciated.

Answer 1

You could try to first add a classname to the container, and then style elements through the stylesheet of your skin's

body: [
    {
        type: 'container',
        classes: 'myClassname',
        onPostRender: function (e, f) {                  
            OnDemandAdmin.CallJsonMethod(url, { "activityId": _activityId }, function (data) {
                $("#coursetreefortinymcetmpl").tmpl(data.d).appendTo("#" + e.control._eventsRoot._id + "-body");
                $("#" + e.control._eventsRoot._id + "-body a[href*='" + activityId + "']").parent().css("background-color", "silver");

            });
        }
    }
],

The rendered classname will in this case be mce-myClassName

Answer 2

Here's a way to apply independent styles to elements.

Since the editor is located inside of an iframe, we need to use tinyMCE's framework to scope to the active editor window. Once we've scoped using tinymce.activeEditor we can easily do something like this:

tinymce.activeEditor.$('p').css('color', 'red');

documentation