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セレクタを使用することができます。

あなたは.mce-primary button

のようにこのCSSは、ライトグレーのテーマ名です[path/to/tinymce/]tinymce/js/tinymce/skins/lightgray

にある他のセレクタが、それにもありますskin.min.css

でそれを発見しました。

また、あなたはあなたのカスタムCSSは、このようなあなたのポップアップ（reference）のために追加することができUPDATE

あなたeditor.css

でそれを上書きすることができます。

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