Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

i have the following method to insert a button in Tinymce editor:

in funcitons.php:

class myclaff 
    {
        function __construct() {
        add_action( 'admin_init', array($this, 'load_tinymceee') );
        }

        function load_tinymceee() {  
           if ( current_user_can( 'edit_posts' ) &&  current_user_can( 'edit_pages' ) ) { 
            //i have done as one plugin has only 1 button

            add_filter('mce_external_plugins', array($this, 'add_myplugin_first'));
            add_filter('mce_buttons_3', array($this,'register_mybutton_first') );

            add_filter('mce_external_plugins', array($this, 'add_myplugin_second'));            
            add_filter('mce_buttons_3', array($this,'register_mybutton_second') ); 
           }  
        }  
        //register first plugin,
        function register_mybutton_first($buttons) {  
           array_push($buttons, '|', "UniqueButtonName1" );  
           return $buttons; 
           }
        function add_myplugin_first($plugin_array) {  
           $plugin_array['firstplugin'] = plugins_url('mypluginfolder/js/mybutton1.php');
                                  //or  plugin_dir_url( __FILE__ ) . 'js/mybutton1.php';
           return $plugin_array; 
           }


        //register second plugin,
        function register_mybutton_second($buttons) {  
           array_push($buttons, '-',  "UniqueButtonName2" );  
           return $buttons;  
            }
        function add_myplugin_second($plugin_array) {  
            $plugin_array['secondplugin'] = plugins_url('mypluginfolder/js/mybutton2.php');
           return $plugin_array;  
            }


    } // class ends

//load class
$blablaa = new myclaff();

then inside "mypluginfolder/js/" i have such mybutton1.php (and mybutton2.php, with the similar code)

(i know that i need to enter the correct url of my tinymce button's image) :

<?php 
header("Content-type: application/x-javascript");
error_reporting(0);
define('WP_USE_THEMES', false);
require('../../../../wp-blog-header.php'); 
?>
(function() {
    // START my customs
    tinymce.create('tinymce.plugins.firstplugin', { 



    init : function(ed, url)
    {

       // ---------- start adding buttons section---------------
        ed.addButton('UniqueButtonName1', {  
            title : 'the title of the button',  
            image : url+'/images/mybuttonimage.png',  
            onclick : function() 
            { 
                    // here starts the output
                txt1 : //just a txt1 labeled block of code
                { 
                var mynam = prompt("<?php echo "Please type your name";?>", "Something Default Name"); 
                ed.selection.setContent('<center>' + mynam + '</center>'); 
                }
            }                   
        });
                },


    // end of the buttons section
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('firstplugin', tinymce.plugins.firstplugin);  
})();

But when i click on button, i get only javascript popup box, where i can enter only one field. what is the code, to achieve to have multiple fields, boxes, dropdown menus and etc.. after the button click?

share|improve this question

1 Answer 1

here is an example of mybutton1.php file (which is executed as javascript). it gets any field's value according to an object's ID. so be advised, that all the IDs are corresponding well across the full code:

<?php 
header("Content-type: application/x-javascript");
error_reporting(0);
define('WP_USE_THEMES', false);
require('../../../../wp-blog-header.php'); 
?>
// closure to avoid namespace collision
(function(){
    // creates the plugin
    tinymce.create('tinymce.plugins.firstplugin', {


        // creates control instances based on the control's id.
        // our button's id is "UniqueButtonName1"
        createControl : function(id, controlManager) {
            if (id == 'UniqueButtonName1') {
                // creates the button
                var button = controlManager.createButton('UniqueButtonName1', {
                    title : 'Something title of button', // title of the button
                    image : '../wp-content/plugins/mypluginfolder/js/images/mybuttonimage.png',
                    onclick : function() {
                        // triggers the thickbox
                        var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                        W = W - 80;
                        H = H - 84;
                        tb_show( 'My WIndow POPUP Title', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=myuniqueform_name2' );
                    }
                });
                return button;
            }
            return null;
        }
                                                    });



    // registers the plugin. DON'T MISS THIS STEP!!!
    tinymce.PluginManager.add('firstplugin', tinymce.plugins.firstplugin);  



    // executes this when the DOM is ready
    jQuery(function(){
        // creates a form to be displayed everytime the button is clicked
        // you should achieve this using AJAX instead of direct html code like this
        var form = jQuery('<html><head><style>\
        .form-table th{\
        padding:2px;width:250px;\
        }\
        </style></head><body><div id="myuniqueform_name2"><form id="myformsname" action="" name="myformsname" >\
        <div align="center"><div class="submita"><input type="button" id="first_submit" class="buttonprimary" value="Submit" name="submit" /><br/> asdasdasd<input type="button" onclick="document.getElementById(\'myformsname\').reset();" id="rst" value="RESET" />  </div></div>\
            <table id="mygallery-table" class="form-table">\
            <tr>\
                <th><label>optionssss</label></th>\
                <td><select name="size" id="dropdownmenu">\
                    <option value="0">0</option>\
                    <option value="1">1</option>\
                    <option value="2">2</option>\
                    <option value="1,2">1,2</option>\
                    <option value="0,1">0,1</option>\
                    <option value="0,2">0,2</option>\
                </select><br />\
                </td>\
            </tr>\
            <tr>\
                <th><label for="mygallery-include">other field</label></th>\
                <td><input type="text" name="include" id="postid" value="" placeholder="http://xxyy.clevereach.com/inf345"  /><br />\
                </td>\
            </tr>\
        </table></form>\
        </div></body>\
        </html>');

        var table = form.find('table');
        form.appendTo('body').hide();

        // handles the click event of the submit button
        form.find('#first_submit').click(function(){


            // =============================================================            
            // ============== getting values by object's ID ============
            // ================================================== 
            var firstfield = table.find('#dropdownmenu').val();
            var secondfield = table.find('#postid').val();


            var myfinalcode = "yourrr chosenn: " + firstfield + "<br/> another value:" + secondfield;
            // inserts the finalshortcode into the active editor, 
            tinyMCE.activeEditor.execCommand('mceInsertContent', false, myfinalcode);
            //or try tinyMCE.activeEditor.selection.setContent(myfinalcode);

            // closes Thickbox
            tb_remove();
            document.getElementById('myformsname').reset();

        });
    });
})();

*1) before you click your button in editor, at first, you may need to click cursor inside your post editor, otherwise your button may not work.

2) Also, the code you have said, instead of functions.php, you can use in any custom plugin's .php file too.*

share|improve this answer
    
Please use only one account. You can answer your own question without a second account. –  toscho Apr 9 '13 at 9:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.