Question

注意：请阅读评论。

我将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 正文来源：

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

呈现输出：

enter image description here

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

更新

基于@ tvgemert的回答。我能够给一个兄弟姐妹孩子添加一个标签，遗憾的是，这个标签在这个范围内并没有帮助我。

enter image description here

指向.mce-editor标记的蓝色箭头，该标记是我需要设置样式的windowManager编辑器的父容器。关于此的任何提示都将非常感激。

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的框架来扩展到活动编辑器窗口。一旦我们使用tinymce.activeEditor确定范围，我们就可以轻松地执行以下操作：

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

<强> documentation

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

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

2 个答案: