Диалог диалогового окна Wordpress Элемент тела и атрибут Формальная документация

Question

Я новичок в tinymce. Я пытался выяснить все атрибуты, которые мне нужно использовать, чтобы создать достойный диалог, который пользователь заполняет и создает вывод короткого кода. В приведенном ниже примере кода метка и текстовое поле приклеиваются друг к другу без полей или отступов, а любые конечные пробелы в тексте метки обрезаны, это всего лишь одно изменение, которое я хотел бы сделать. Я посмотрел документацию на tinymce, и все, что я нахожу, это простые краткие примеры кода.

Мой вопрос 1: Где я могу найти официальную полную документацию этого метода windowManager.open и всех возможных атрибутов и методов, связанных с ним?

Мой вопрос 2 & 3: Являются ли эти атрибуты собственно родным javascript? Если да, то где я могу найти официальную полную документацию?

Спасибо за любую помощь, которую вы можете дать мне, чтобы получить документацию или, возможно, форматирование с помощью cys-листа css (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, а небо - предел.

Это код JavaScript для mce, вам нужно создать внешние файлы 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);