如何在 TinyMCE 4 中向 windowManager 弹出窗口添加样式？答案

【问题标题】：How do I add styles to windowManager popup in TinyMCE 4?如何在 TinyMCE 4 中向 windowManager 弹出窗口添加样式？
【发布时间】：2015-05-29 15:08:37
【问题描述】：

注意：请阅读 cmets。

我正在将一个 jQuery 模板渲染到我正在编写的 tinyMCE 插件中，但我不知道如何设置 windowManager 窗口的样式。

看起来 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>

渲染输出：

如何在 TinyMCE 4 中向 windowManager 弹出窗口添加样式？

更新：

基于@tvgemert 的回答。我能够为兄弟姐妹的孩子添加标签，不幸的是，这对我没有帮助。

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

【问题讨论】：

旁注，我已经使用 !important 标签设置了窗口样式。但是，找到解决方案并删除那些严重的 !importants 仍然会很好。
那么，使用!important 的样式规则确实可以提供您想要的布局吗？在这种情况下，您当前的样式定义不够具体。另一方面，如果您在没有!important 的情况下使用更具体的样式规则，但它仍然不尊重您的样式，那么其他东西就会妨碍您。尽管可能很恶心，!important 仍然可以胜任。
@tvgemert 也是如此，虽然你的回答并没有具体解决我的问题，但我认为它是正确的，所以我会接受它。感谢您的宝贵时间！
太好了，不客气！

标签： jquery css tinymce tinymce-4

【解决方案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

【讨论】：

那么类会在body标签中添加'myClassname'吗？我现在就试试。谢谢
好的，它会将它添加到 mce 容器中并在其前面加上 mce-... +1，让我看看我是否可以让它工作。
无法帮助解决这个问题，我已经更新了我的主要帖子，也许我错过了什么
嗨，Dan，您确定要定位的内容不在mce-myClassName 内吗？通常，根据我自己的经验，这是插件内容所在的地方。
我更新了一张更有用的图片，希望这能清楚地说明我所看到的。

【解决方案2】：

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

由于编辑器位于 iframe 的内部，我们需要使用 tinyMCE 的框架来确定活动编辑器窗口的范围。一旦我们使用tinymce.activeEditor 确定了范围，我们就可以轻松地执行以下操作：

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

documentation

【讨论】：