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 )
          					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">

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;

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


Here is the dialog.php

<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>

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

		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 );
		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