Wordpress tinymce對話框正文元素和屬性正式文檔

Question

我是新來的tinymce。我一直在試圖找出我需要使用的所有屬性來創建用戶填充並創建短代碼輸出的體面的對話框。在下面的代碼示例中，標籤和文本框之間沒有空白或填充，並且標籤文本中的任何尾部空格都被剪裁，這只是我想要做的一個更改。我已經查閱了文檔，以找到簡單的代碼示例。

我的問題1：我在哪裏可以找到這個windowManager.open方法的正式完整文檔以及與之相關的所有可能的屬性和方法？

我的問題2 & 3：這些屬性實際上是原生JavaScript嗎？如果是的話，我在哪裏可以找到正式的完整文檔？

感謝您的幫助，您可以通過css sytle sheet（w/.mce-widget或.mce-textbox）獲取文檔或可能的格式以及在Wordpress中註冊此樣式表的位置和方式。

(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);