如何为 TinyMCE 4 中的 windowManager 弹出窗口添加样式？

Question

注意：请阅读评论。

我正在将 jQuery 模板渲染到我正在编写的 tinyMCE 插件中，但我不知道如何设置 windowManager window.

看起来 TinyMCE 只是覆盖了我的样式，但我知道有一些方法可以将样式注入编辑器，所以我认为这个问题仍然有效。

这是我的插件：

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);
                }
            });
        }
    });
});

这是我的初始化程序：

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);
    }

});

为了证明正在生成标记，这里有一些标记直接来自 windowManager body source:

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

渲染输出：

如何向 windowTinyMCE 4 中的管理器弹出窗口添加样式？

更新：

基于@tvgemert 的回答。不幸的是，我能够为兄弟姐妹添加标签 child，这在这个范围内对我没有帮助。

指向 .mce-editor 标签的蓝色箭头，它是我需要设置样式的 windowManager 编辑器的 parent 容器。如有任何提示，我们将不胜感激。

Answer 1

您可以尝试先将类名添加到容器中，然后通过皮肤的样式表对元素进行样式设置

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");

            });
        }
    }
],

在这种情况下呈现的类名将是 mce-myClassName

Answer 2

这是一种将独立样式应用于元素的方法。

由于编辑器位于 iframe 的内部，我们需要使用 tinyMCE 的框架来限定活动编辑器 window。一旦我们使用 tinymce.activeEditor 确定了范围，我们就可以轻松地做这样的事情：

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

documentation

如何为 TinyMCE 4 中的 windowManager 弹出窗口添加样式？

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

jquery

css

tinymce

tinymce-4

如何向 windowTinyMCE 4 中的管理器弹出窗口添加样式？