Wordpress tinymceダイアログボックスボディエレメント＆アトリビュートフォーマルドキュメンテーション

Question

私はtinymceを初めて使っています。私は、ユーザーが記入してショートコード出力を作成するまともな見た目のダイアログを作成するために使用する必要があるすべての属性を把握しようとしています。下のコード例では、ラベルとテキストボックスはマージンやパディングなしでお互いに突き合わされており、ラベルテキストの末尾の空白は切り詰められています。私はtinymceのドキュメントを見てきましたが、私が見つけたのは簡単な簡単なコード例です。

私の質問1：このwindowManager.openメソッドとそれに関連するすべての可能な属性とメソッドについて、正式な文書はどこにありますか？

私の質問2 & 3：これらの属性は実際にはネイティブのjavascriptですか？もしそうなら、正式な文書をどこで見つけることができますか？

何か助けてくれてありがとうございました。私は、Wordpressでこのスタイルシートを登録する場所と方法について、css sytleシート（.mce-widgetまたは.mce-textbox）を使ってドキュメントを検索したり、フォーマットすることができます。

(function() { 

    tinymce.create("tinymce.plugins.youtube_plugin", { 

     //url argument holds the absolute url of our plugin directory 
     init : function(ed, url) { 
      alert('in youtube'); 

      //add new button  
      ed.addButton("youtube_button", { 
       title : "Youtube Video Responsive Embed", 
       cmd : "youtube_command", 
       image : "https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/youtube_v2-32.png" 
      }); 

      //button functionality. 
      ed.addCommand("youtube_command", function() { 
       //alert('hello youtube'); 
       ed.windowManager.open({ 
        title: "YouTube Video Settings", // The title of the dialog window. 
        //file : url + '/../html/youtube.html', 
        width : 800, 
        height : 300, 
        inline : 1, 
        body: [{ 
         type: 'container', 
         //label : 'flow', 
         //layout: 'flow', 
         items: [ 
         {type: 'label', text: 'Youtube ServerPath:'}, 
         {type: 'textbox', size: '80', name: 'title', value: 'http://www.youtube.com/embed/'}, 
         //{type: 'label', text: 'and two labels'} 
         ] 
        }], 
        buttons: [{ 
          text: 'Submit', 
          onclick: 'submit' 
         }, { 
          text: 'Cancel', 
          onclick: 'close' 
         }], 
        onsubmit: function(e) { 
         //form = $('#youtube_plugin_id iframe').contents().find('form'); 
         alert('hello'); 
         ed.insertContent('Title: ' + e.data.title); 
        } 
       }); 
       //var selected_text = ed.selection.getContent(); 
       // var return_text = "<span style='color: green'>" + selected_text + "</span>"; 
       //ed.execCommand("mceInsertContent", 0, return_text); 
      }); 

     } // end init 
    }); // end tinymce.create 

    tinymce.PluginManager.add("youtube_button_plugin", tinymce.plugins.youtube_plugin); 
})(); 

Answer 1

私は特に見栄えMCEダイアログボックスを作成するには、正式な文書を見つけることができませんでしたが、私は、ダイアログのタイトルをフォーマットする方法を見つけ出すと、あなたはリンクタグを追加することができ、外部のhtmlファイルを埋め込むんでしたCSSスタイルシートと空が限界です。

ここにはmceのJavaScriptコードがあります。外部のhtmlとcssファイルを作成するのはあなた次第です。

(function($) { 
    /** 
    This tinymce plugin provides the editor button and the modal dialog used to embed. 
    */ 
    // Extract data stored in the global namespace in tinymce-dev-starter.php. 
    var passed_data = lgrriw_data; 
    var php_version = passed_data.php_version; 
    var valid_domains = passed_data.valid_domains; 
    var dialogTitle = 'My Dialog Title'; 




    // Define the TinyMCE plugin and setup the button. 
    // The last property in the first tinymce.create paramenter below must be the same 
    // as the plugin you defined in tinymce-dev-starter.php. In this case, it is 
    // lgrriw_plugin. If we called it my_cool_plugin, the first parameter would change 
    // to 'tinymce.plugins.my_cool_plugin'. 
    tinymce.create('tinymce.plugins.lgrriw_plugin', { 
     init: function(editor, url) { 
      /** 
      * The editor parameter contains the TinyMCE editor instance. The url 
      * parameter contains the absolute url to the directory containing the 
      * TinyMCE plugin file (this file's directory). 
      * 
      * We will be using editor to talk to the TinyMCE instance. And we 
      * will be using url to tell TinyMCE where files are (e.g. button 
      * images). 
      */ 
      // Specify button properties and commands. 
      // The first parameter of editor.addButton must be the button ID 
      // given in tinymce-dev-starter.php. In this case, it is lgrriw_button. 
      editor.addButton('lgrriw_button', { 
       title: dialogTitle, // Tooltip when hovering over button. 
       image: url + '/../../assets/tinymce-button_32.png', // The image for the button. 
       cmd: 'lgrriw_command'       // The editor command to execute on button click. 
      }); 

      // Define the "command" executed on button click. 
      editor.addCommand('lgrriw_command', function() { 
       editor.windowManager.open(
        { 
         title: dialogTitle, // The title of the dialog window. 
         file: url + '/../html/tinymce_dialog.html', // The HTML file with the dialog contents links to css style sheet(s). 
         width: 810,        // The width of the dialog 
         height: 505,        // The height of the dialog 
         inline: 1         // Whether to use modal dialog instead of separate browser window. 
        }, 

        // Parameters and arguments we want available to the window. 
        { 
         editor: editor, 
         jquery: $, 
         valid_domains: valid_domains 
        } 
       ); 

       $('.mce-title').each(function(index,item){ 
        // Iterate through the mce titles until you find 
        // the dialog for this dialog before formatting, otherwise 
        // the formatting will change the Wordpress 
        // Theme globally. Be Careful! 
        if($(item).text() == dialogTitle){ 
         // Format the dialog title using css 
         $(item).css('text-align', 'center'); 
         $(item).css('color', '#336999'); 
         $(item).css('background-color', '#add9ff'); 
        } 
       }); 
      }); 
     } 
    }); 


    // Add the plugin to TinyMCE 
    // Documentation: http://www.tinymce.com/wiki.php/api4:method.tinymce.AddOnManager.add 
    tinymce.PluginManager.add('lgrriw_plugin', tinymce.plugins.lgrriw_plugin); 
})(jQuery);