Show helper button next to element in TinyMCE WordPress
- SOLVED
I want to display a small button next to all tables in TinyMCE that launches a tooltip or modal dialog that allows me to submit some values which I then use to format the table.
Kind of like the way Wordpress inserts its own interface onto images in TinyMCE.
I can manage the form processing, but I don't know how to show the button in TinyMCE content area. Suppose I have a span with the class myhelperbutton that contains my helper button icon/text. What javascript/TinyMCE/Wordpress hooks would I have to insert to get it to show up next to all tables (without the button itself becoming editable or getting saved in the editor content) and pass in the current table's html?
Here's a basic flow—the first function (processTable) I can handle, but I need help filling in the gaps in the rest.
function processTable( element, values ) {
// do stuff to the table html
return element;
}
function appendButtonToTinyMCEElement ( button, element ) {
// put button next to all instances of the specified element in TinyMCE
// (in this case, put span.myhelperbutton at the top right of all tables)
}
$('.myhelperbutton').click(function(){
var element = ??? // get content of current table
var values = prompt('Insert values'); // prompt user for values
var element = process_table ( element, values );
// send element back to TinyMCE (not sure how)
});
<strong>Note:</strong> I'm not trying to add a button to the toolbar—I want to add a button next to every instance of an element *inside* the editor content.
My questions are:
a) how to get an arbitrary button (span.myhelperbutton) to show up next to a given element (a table) inside the editor content,
b) when the button is clicked, how to pass in the html of that specific table into a function so that it can be processed, and
c) how to send the processed html back into TinyMCE to replace the original table html.
Answers (2)
Christianto answers:
Hi,
First we need to registered button in functions.php, I write a working code as base that you can customize by yourself:
// first we add button & edit version
function register_web559_button($buttons) {
array_push($buttons, "|", "web559");
return $buttons;
}
function add_web559_tinymce_plugin($plugin_array) {
$plugin_array['web559'] = get_bloginfo('template_url').'/editor_plugin.js';
return $plugin_array;
}
function add_web559_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', 'add_web559_tinymce_plugin');
add_filter('mce_buttons', 'register_web559_button');
}
}
add_action('init', 'add_web559_button');
// edit version
function my_refresh_mce($ver) {
$ver += 3;
return $ver;
}
add_filter( 'tiny_mce_version', 'my_refresh_mce');
and then you create file on your theme directory named it editor_plugin.js like file name to load on hook above, put this as content, this will add button on tinyMCE and add event listener to open page in window:
[[LINK href="http://pastebin.com/1pEZYyvL"]]custom editor_plugin.js on pastebin view here[[/LINK]]
After that create file window_post.php for HTML content to appear on the window, pretty much like this:
<?php
// Bootstrap file for getting the ABSPATH constant to wp-load.php
require_once('config.php');
// check for rights
if ( !is_user_logged_in() || !current_user_can('edit_posts') )
wp_die(__("You are not allowed to be here"));
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $themename .' Shortcode'; ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php echo get_option('blog_charset'); ?>" />
<script language="javascript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/wp-includes/js/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/wp-includes/js/tinymce/tiny_mce_popup.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/wp-includes/js/tinymce/utils/mctabs.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/wp-includes/js/tinymce/utils/form_utils.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo get_template_directory_uri() ?>/web559_custom.js"></script>
<base target="_self" />
</head>
<body style="display: none">
<!-- this is your form or other html content -->
<form>
<button type="button" id="web559_shortcodetext">Change Table</button>
</form>
</body>
</html>
on above file (window_post.php) you see it load config.php and web559_custom.js
config.php will include wp-load.php:
<?php
/**
* Look for the server path to the file wp-load.php for user authentication
*
*/
$wp_include = "../wp-load.php";
$i = 0;
while (!file_exists($wp_include) && $i++ < 10) {
$wp_include = "../$wp_include";
}
// let's load WordPress
require($wp_include);
?>
and web559_custom.js contain function that you wish to create, the result (in javascript object for example table element/node) can be manipulate with [[LINK href="http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.DOMUtils"]]tinyMCE dom.utils API[[/LINK]] and [[LINK href="http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.Selection"]]tinyMCE selection API[[/LINK]]
[[LINK href="http://pastebin.com/C0pa0GWG"]]web559_custom.js on pastebin view here[[/LINK]]
so in your theme directory there are
- editor_plugin.js to add button to table element and load page on lightbox window
- window_post.php as page to load on window
- web559_custom.js that contain your form/table function
- config.php to load wordpress function
- file icon web559_editbtns.png 24x24 pixel define at editor_plugin.js as button icon <strong>(this icon/image is important)</strong>
I tested above example code so it will return change table on post editor textarea when you click "Change Table", you can extend it base on your need.
Let me know if it turn error or other questions regarding it.
I attach image when the icon clicked and table customization window appear...
Hope this help..
web559 comments:
I'm familiar with this tutorial and with methods for adding buttons to the toolbar—but what I'm describing is not a button not in the toolbar, but a button next to the element *inside* the editor content.
My questions are a) how to get an arbitrary span (.myhelperbutton) to show up next to a given element (a table) inside the editor content, b) when the button is clicked, how to pass in the html of that specific table so that it can be processed, and c) how to send the processed html back into TinyMCE to replace the original table html.
Christianto comments:
Did you mean like when we insert an image the there are icons to edit or delete it?
You want that to be used in table element too?
web559 comments:
Yes, that's what I mean.
Christianto comments:
I think its possible, I will code it..
wait a moment..
Christianto comments:
Hi,
I update my answer..
Please try it.
Christianto comments:
I attached image when icon appear if you hovering and click <table> element from my example code above.
I'm using simple table here for testing
<table border="1">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>