如何在TinyMCE 4中为windowManager弹出窗口添加样式?

丹·比尤(Dan Beaulieu)

注意:请阅读评论。

我正在将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>

渲染输出:

在此处输入图片说明

如何在TinyMCE 4中为windowManager弹出窗口添加样式?


更新:

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

在此处输入图片说明

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

电视剧

您可以尝试先在容器中添加一个类名,然后再通过皮肤的样式表对元素进行样式设置

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在tinymce上设置输入样式

来自分类Dev

如何在jQuery中获取tinymce内容?

来自分类Dev

如何在Webpack中填充tinymce?

来自分类Dev

如何在TinyMCE中编写树枝标签

来自分类Dev

如何在 tinymce 中禁用复制/粘贴

来自分类Dev

如何在tinymce中添加多个插件?

来自分类Dev

如何在tinymce中添加多个插件?

来自分类Dev

如何在tinyMce中添加自定义块

来自分类Dev

如何在Wordpress中为TinyMCE自定义fontsizeselect?

来自分类Dev

如何在Tinymce 4中加载Wiris插件

来自分类Dev

如何在tinyMCE 4中删除键盘快捷键?

来自分类Dev

如何在TinyMce 4中对图标进行分组

来自分类Dev

如何在TinyMCE 4.x编辑器中过滤有效样式?

来自分类Dev

如何在TinyMCE 4.x编辑器中过滤有效样式?

来自分类Dev

如何从tinymce 4.x中的窗口(弹出窗口)访问元素

来自分类Dev

如何在CodeIgniter 3中处理tinyMCE内容

来自分类Dev

如何在tinyMCE预览中禁用超链接(<a href=""> </a>)

来自分类Dev

如何在TinyMce中设置字体大小

来自分类Dev

如何在TinyMce中更改超链接文本的颜色

来自分类Dev

如何在tinyMCE预览中禁用超链接(<a href=""> </a>)

来自分类Dev

如何在django-tinymce中启用插件?

来自分类Dev

如何在jQuery模式对话框中运行TinyMCE?

来自分类Dev

如何在TinyMCE中突出显示这样的句子?

来自分类Dev

如何在 EpiServer 8.0 中调整 TinyMCE 的 .init 事件?

来自分类Dev

JS - 如何在我的 tinymce 中动态更改图像

来自分类Dev

如何在TinyMCE 4.x中向工具栏添加文本对齐按钮?

来自分类Dev

如何在TinyMCE 4中的自定义按钮上添加自定义类addButton()

来自分类Dev

如何在highchart的标志中添加弹出窗口?

来自分类Dev

如何在Bootstrap 4 Alpha 3中为<a>添加链接样式?

Related 相关文章

  1. 1

    如何在tinymce上设置输入样式

  2. 2

    如何在jQuery中获取tinymce内容?

  3. 3

    如何在Webpack中填充tinymce?

  4. 4

    如何在TinyMCE中编写树枝标签

  5. 5

    如何在 tinymce 中禁用复制/粘贴

  6. 6

    如何在tinymce中添加多个插件?

  7. 7

    如何在tinymce中添加多个插件?

  8. 8

    如何在tinyMce中添加自定义块

  9. 9

    如何在Wordpress中为TinyMCE自定义fontsizeselect?

  10. 10

    如何在Tinymce 4中加载Wiris插件

  11. 11

    如何在tinyMCE 4中删除键盘快捷键?

  12. 12

    如何在TinyMce 4中对图标进行分组

  13. 13

    如何在TinyMCE 4.x编辑器中过滤有效样式?

  14. 14

    如何在TinyMCE 4.x编辑器中过滤有效样式?

  15. 15

    如何从tinymce 4.x中的窗口(弹出窗口)访问元素

  16. 16

    如何在CodeIgniter 3中处理tinyMCE内容

  17. 17

    如何在tinyMCE预览中禁用超链接(<a href=""> </a>)

  18. 18

    如何在TinyMce中设置字体大小

  19. 19

    如何在TinyMce中更改超链接文本的颜色

  20. 20

    如何在tinyMCE预览中禁用超链接(<a href=""> </a>)

  21. 21

    如何在django-tinymce中启用插件?

  22. 22

    如何在jQuery模式对话框中运行TinyMCE?

  23. 23

    如何在TinyMCE中突出显示这样的句子?

  24. 24

    如何在 EpiServer 8.0 中调整 TinyMCE 的 .init 事件?

  25. 25

    JS - 如何在我的 tinymce 中动态更改图像

  26. 26

    如何在TinyMCE 4.x中向工具栏添加文本对齐按钮?

  27. 27

    如何在TinyMCE 4中的自定义按钮上添加自定义类addButton()

  28. 28

    如何在highchart的标志中添加弹出窗口?

  29. 29

    如何在Bootstrap 4 Alpha 3中为<a>添加链接样式?

热门标签

归档