How to apply CSS on custom buttons in tinyMCE active editor popup

Question

I want to add custom CSS in my tinyMCE active editor popup, attaching the screenshot for your reference.

below is the reference code:

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

The best way to do is to override style, by defining your custom css file.

Tinymce init Configuration

editor_css : 'editor.css'

Then

.defaultSkin span.mce_upload {some_css: css_value}

Answer 2

You can use the .mce-btn button selector to add custom style for all buttons what has this selector.

You found it in the skin.min.css

There are also other selectors in it, like .mce-primary button

This css is at [path/to/tinymce/]tinymce/js/tinymce/skins/lightgray

where lightgray is the theme name.

You can also overwrite it in your editor.css

UPDATE

You can add your custom css for your popups like this ( reference ):

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

Answer 3

You can use like this:

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',
      }]
});