How To Apply Css On Custom Buttons In Tinymce Active Editor Popup

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({ titl

Solution 1:

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

Tinymce init Configuration

editor_css : 'editor.css'

Then

.defaultSkinspan.mce_upload {some_css: css_value}

Solution 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"
});

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