Create a custom Tinymce popup in Wordpress for shortcodes

Question

Does anyone know how to create a custom dropdown in tinymce for Wordpress? I need it to work, at least with wordpress 3.0.

I searched the internet for a tutorial on this subject and I cannot find it. The link to the website tutorial will be great.

Thanks in advance.

Answer 1

I know that this question was already asked some time ago, but when I came across the same problem, I would not answer this question. Maybe this helps someone else.

The comments in the DropDown-Control source in tinyMCE were really helpful.

You just need to create a drop-down list first using createDropMenu() , then you can call the add() method to add items to the drop-down list.

 /** * This class is used to create drop menus, a drop menu can be a * context menu, or a menu for a list box or a menu bar. * * @class tinymce.ui.DropMenu * @extends tinymce.ui.Menu * @example * // Adds a menu to the currently active editor instance * var dm = tinyMCE.activeEditor.controlManager.createDropMenu('somemenu'); * * // Add some menu items * dm.add({title : 'Menu 1', onclick : function() { * alert('Item 1 was clicked.'); * }}); * * dm.add({title : 'Menu 2', onclick : function() { * alert('Item 2 was clicked.'); * }}); * * // Adds a submenu * var sub1 = dm.addMenu({title : 'Menu 3'}); * sub1.add({title : 'Menu 1.1', onclick : function() { * alert('Item 1.1 was clicked.'); * }}); */ 

Answer 2

this adds a button, so you just need to configure it to create a popup

 // register button function register_button($buttons) { array_push($buttons, "btn"); return $buttons; } // add button function add_button() { if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) { add_filter('mce_external_plugins', 'add_plugin'); add_filter('mce_buttons', 'register_button'); } } // add plugin function add_plugin($plugin_array) { $plugin_array['btn'] =get_bloginfo('template_url').'/js/customcodes.js'; return $plugin_array; } 

you will need to add the js file

 (function() { tinymce.create('tinymce.plugins.btn', { init : function(ed, url) { ed.addButton('btn', { title : 'Add a btn', image : url+'/btn.png', onclick : function() { ed.selection.setContent('[btn]'); } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('btn', tinymce.plugins.btn); })();