Блог

Я новичок в tinymce. Я пытался определить все атрибуты, которые мне нужно использовать, чтобы создать прилично выглядящее диалоговое окно, которое заполняет пользователь, и создать вывод короткого кода. В приведенном ниже примере кода надпись и текстовое поле расположены вплотную друг к другу без полей или отступов, а все конечные пробелы в тексте надписи обрезаны, это всего лишь одно изменение, которое я хотел бы внести. Я просмотрел документацию к 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);
})();
  

Хотя я не нашел никакой официальной документации для создания конкретно красивого диалогового окна 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);