-2

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?

2

Your method is complex... Here is simplest function to add BUTTON in TinyMCE:

(insert this code in funcitons.php):

add_action('admin_init', function() {
   if (current_user_can('edit_posts')  &&  get_user_option('rich_editing') == 'true') {
        add_filter('mce_buttons_2', 'register_buttonfirst');
        add_filter('mce_external_plugins', 'add_pluginfirst');
   }
});
function register_buttonfirst($buttons) {  array_push($buttons, "|", "shortcode_button1" );   return $buttons;}
function add_pluginfirst($plugin_array) {$plugin_array['MyPuginButtonTag'] =  plugin_dir_url( __FILE__ ).'My_js_folder/1_button.php';return $plugin_array;}
add_filter( 'tiny_mce_version', 'my_refresh_mceeee1');  function my_refresh_mceeee1($ver) {$ver += 3;return $ver;}

2) Create 1_button.php in target folder and insert this code (note, change "wp-load" and "ButtonImage.png" urls!!!)

<?php 
header("Content-type: application/javascript");
require('../../../../wp-load.php');
?>
(function() {
    // START my customs
    var abcd =location.host;

    tinymce.create('tinymce.plugins.shortcodebuton_plugin2', {  
        init            : function(ed, this_folder_url)
        {
                    // -------------------------
                    ed.addButton('shortcode_button1', {  
                        title : 'Show Level1 count',  
                        image : this_folder_url + '/ButtonImage.png',
                        onclick : function() {  
                            var vidId = prompt("YouTube Video", "BLABLABLA");
                            ed.selection.setContent(vidId );  
                            //ed.execCommand('mceInsertContent', false, 'vidId');
                        }  
                    });


        }, 

        createControl   : function(n, cm) {     return null;  }, 
    });  
    tinymce.PluginManager.add('MyPuginButtonTag', tinymce.plugins.shortcodebuton_plugin2);  
})();

*p.s. before you click a button from editor TOOLBAR, at first, you may need to click cursor inside a post editor, otherwise your button may not work.

(for CUSTOM HTML popup, instead of simple prompt, see this example: http://pastebin.com/raw/0BJZm7cd )

  • 2
    Please use only one account. You can answer your own question without a second account. – fuxia Apr 9 '13 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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