如何在tinyMCE活动编辑器弹出窗口中的自定义按钮上应用CSS

Question

我想在tinyMCE活动编辑器弹出窗口中添加自定义CSS，附上截图供您参考。

以下是参考代码：

tinymce.activeEditor.windowManager.open({
title: 'Browse Image Gallery',
    file: "data/get_images_tiny.php",
        width: 500,
        height: 305,
        resizable: "no",
        inline: "yes",
        close_previous: "no",
        buttons: [{
            text: 'Upload Image from your PC',
            onclick: function () {
            //do something               
            }
        }, {
            text: 'Close',
            onclick: 'close'
            }]
        }
});

Answer 1

最好的方法是通过定义自定义css文件来覆盖样式。

Tinymce init配置

editor_css : 'editor.css'

然后

.defaultSkin span.mce_upload {some_css: css_value}

Answer 2

您可以使用.mce-btn button选择器为具有此选择器的所有按钮添加自定义样式。

你在skin.min.css找到了它

其中还有其他选择器，例如.mce-primary button

这个css位于[path/to/tinymce/]tinymce/js/tinymce/skins/lightgray

其中lightgray是主题名称。

您也可以在editor.css覆盖它

UPDATE

您可以为此弹出窗口添加自定义css（ 参考 ）：

tinyMCE.init({
    ...
    popup_css : "/mypopup.css"
});

Answer 3

你可以像这样使用：

tinyMCE.activeEditor.windowManager.open({
    file : "data/get_images_tiny.php",
    title : 'Browse Image Gallery',
    width: 500,
    height: 305,
    resizable: "no",
    inline: "yes",
    close_previous: "no",
    buttons: [{
          text: 'Insert',
          classes: 'widget btn primary first abs-layout-item',
          onclick: 'close',
          id: 'insertButton'
      }, {
          text: 'Close',
          onclick: 'close',
      }]
});