WordPress Tinymce: How to Create A Dialog-based Button

I need to make a tinymce button which would bring a dialog box for users to fill some options and then generate a shortcode.

I’ve done some tinymce buttons before, such as tinymce dropdown button and of course normal buttons. But I don’t know how to make a dialog.

The first thought is, “Oh, the built-in link button has dialog. Maybe I can decode it. ”

WordPress tinymce butilt-in plugins are stored in wp-includes/js/tinymce/plugins and the link plugin files are located at wplink directory. From what I see, the editor_plugin_src.js is the main file.

ed.addCommand('WP_Link', function() {
     				if ( disabled )
          					return;
				     ed.windowManager.open({
          					id : 'wp-link',
          					width : 480,
         					 height : 'auto',
         					 wpDialog : true,
          title : ed.getLang('advlink.link_desc')
     				}, {
        					plugin_url : url // Plugin absolute URL
      				});
});

The interesting part is “wpDialog : true”. I guess this is the key.

Okay, I figure out how to register a dialog-based tinymce button.

The following question is: where to store the dialog content? After some digging, I find out it is simply stored in the page but wrapped in a hidden div. When the button is clicked, the dialog will popup.

the dialog code is like this:

<div id="wp-link-wrap" style="display: none;">
<form id="wp-link" tabindex="-1">
<div class="form-field form-required">
<label for="header">Header</label>
<input type="text">
</div>
</form>
</div>

Okay then, I can hide the form by hooking “in_admin_footer“. But I don’t want to do this everywhere in the backend.

function my_in_admin_footer(){
 global $post_type;
 if(!in_array($post_type,array('post','page')))
	return;

 include $this->plugin_path('dialog.php');
}

 

Here is the dialog.php

 <div>
<form id="wp-link">
<div><label for="header">Header</label> <input type="text" /></div>
<p><input id="wp-link-submit" type="submit" value="Done" /></p>
</form>
</div>

Please note that the form id “wp-link” must be the same as you register the button id at editor_plugin_src.js.

The next task is simple: I need to hook the submit event and do the form validation before insert content to the editor based on user input.

It’s a hassle to do the form validation. WordPress provides an easy way if you just want to make sure all required fields are filled in.

Here is the js code

$('#wp-link-submit').click(function(e){
		var form = $(this).parents('form');
		if ( ! validateForm( form ) )
			return false;
		var content = '';
		//collect all required data and store in content varialble
		tinyMCE.activeEditor.selection.setContent( content );
		tinyMCEPopup.close();
		return false;
	});

The validateForm will check if “form-required” input text field is empty. It’ll add red background if empty.

Okay, this is basically how I make a tinymce button which would popup a dialog.

Share and Enjoy

    FacebookTwitterGoogle PlusLinkedInStumbleUponPinterestRedditTumblrDiggEmailPrint

Related Posts