Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$36
Show helper button next to element in TinyMCE
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)
});Note: 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.
This question has been answered.
web559 | 01/15/12 at 9:24pm
Edit
Previous versions of this question:
01/16/12 at 12:02am
| 01/16/12 at 12:03am
| 01/16/12 at 12:04am
The experts have suggested, on average, a prize of $45 for this question.
(2) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-
Last edited:
01/15/12
9:41pmFahd Murtaza says:Simple
http://wordpress.org/extend/plugins/wp-super-edit/- 01/15/12 9:42pm
Fahd Murtaza says:Oh wait, let me check again. Within content is something different.
- 01/15/12 10:00pm
Fahd Murtaza says:OK
Please try using the above plugin. Thats a good start. I have used it to modify the existing behaviour of the tinymce, please let me know if you need more help. - 01/15/12 10:01pm
Fahd Murtaza says:And this one is brand new and looks better.
http://wordpress.org/extend/plugins/tinymce-advanced/ - 01/15/12 10:02pm
Fahd Murtaza says:I think thats a good start to look into what this plugin is doing.
- 01/15/12 9:42pm
-
Last edited:
01/16/12
4:33amChristianto says: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:
custom editor_plugin.js on pastebin view here
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 tinyMCE dom.utils API and tinyMCE selection API
web559_custom.js on pastebin view here
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 (this icon/image is important)
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..Previous versions of this answer: 01/16/12 at 4:29am | 01/16/12 at 4:31am | 01/16/12 at 4:33am
- 01/16/12 12:00am
web559 says: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. - 01/16/12 1:26am
Christianto says: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? - 01/16/12 1:32am
web559 says:Yes, that's what I mean.
- 01/16/12 1:40am
Christianto says:I think its possible, I will code it..
wait a moment.. - 01/16/12 4:30am
Christianto says:Hi,
I update my answer..
Please try it. - 01/16/12 4:37am
Christianto says: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> - 01/16/12 6:21pm
web559 says:This works somewhat, but there are some issues—
- I don't want the button to show on click, but rather to always show, or to show on hover
- When the button is visible and I scroll TinyMCE, the button doesn't stay with the element (issue with positioning in _showButtons in editor_plugin.js?).
- I want to be able to have a span for the button (so I can use text), as opposed an img/icon. How would I do that? - 01/16/12 11:19pm
Christianto says:The button can't be set to always show because it only use one <div> element with id="web559_editbtns". If you have more than one table that isn't acceptable.
This is same with default wp edit/delete image button which only use one <div> and use it to all image as button, it appear only when some one click certain image but with the data being update individually per image.
I can only set it to show when user hover table element.
for the positioning issue, I forgot to add event to hide it when you scroll and set the position back to initial.
for able to use span, you can edit it by change code below on editor_plugin.js
editButton = DOM.add('web559_editbtns', 'span', {
id : 'web559_edittablebtns',
width : '24',
height : '24',
title : 'table editor'
}, 'Edit Table');
As you can see I create span element with id : 'web559_edittablebtns', title: 'table editor' and text inside span "Edit Table".
for more information, this is the API handling it
here's the edited version of editor_plugin.js on pastebin to be test. - 01/17/12 12:46am
web559 says:What do I have to change to get the button to stay in the corner of the table, as opposed to being in every cell? Something using
?getParents( ???,'TABLE').getPos(n)
_showButtons : function(n, id) {
var t = this, ed = tinyMCE.activeEditor, p1, p2, vp, DOM = tinymce.DOM, X, Y;
vp = ed.dom.getViewPort(ed.getWin());
p1 = DOM.getPos(ed.getContentAreaContainer());
p2 = ed.dom.getPos(n);
X = Math.max(p2.x - vp.x, 0) + p1.x;
Y = Math.max(p2.y - vp.y, 0) + p1.y;
DOM.setStyles(id, {
'top' : Y+5+'px',
'left' : X+5+'px',
'display' : 'block',
'position' : 'absolute',
'cursor' : 'pointer'
});
- 01/17/12 3:34am
Christianto says:Hi,
sorry for late reply, I go outside for a moment..
I try to use
var table = ed.dom.getParents(ed.selection.getNode(),'TABLE');
and get the position by getPos
ed.dom.getPos(table);
but no luck
testing typeof() var table will return HTML table element but accessing it properties through TinyMCE API or regular js object will return undefined, I don't know why..
In the end I use jQuery offset method, and I think this works, I tested it.
_showButtons : function(n, id) {
var t = this, ed = tinyMCE.activeEditor, p1, p2, vp, DOM = tinymce.DOM, X, Y,
ele = ed.selection.getNode(),
table = ed.dom.getParents(ele,'TABLE');
vp = ed.dom.getViewPort(ed.getWin());
p1 = DOM.getPos(ed.getContentAreaContainer());
p2 = ed.dom.getPos(n);
X = Math.max(p2.x - vp.x, 0) + p1.x;
Y = Math.max(p2.y - vp.y, 0) + p1.y;
var tableparent = jQuery(n).parents('table')
if(tableparent.length != 0)
{
var p2 = tableparent.offset();
X = Math.max(p2.left - vp.x, 0) + p1.x;
Y = Math.max(p2.top - vp.y, 0) + p1.y;
}
DOM.setStyles(id, {
'top' : Y+5+'px',
'left' : X+5+'px',
'display' : 'block',
'position' : 'absolute',
'cursor' : 'pointer'
});
if ( this.mceTout )
clearTimeout(this.mceTout);
this.mceTout = setTimeout( function(){t._hideButtons();}, 5000 );
}
Full code on pastebin here
Please note although <span> element is appear when you hover your mouse, you still have to select table element by clicking it first, this is to tell tinyMCE about what element to be use/edited as "selection", pretty much like when you selecting image to be edited/delete on wp tinyMCE editor.
I can't find tinyMCE api to be use to set current "mouseover" element as activeEditor.selection element.
Hope this help..
- 01/17/12 4:40am
web559 says:What is this for? Should it be changed/removed, since there is no IMG involved?
// Add a node change handler, selects the button in the UI when a table is selected
ed.onNodeChange.add(function(ed, cm, n) {
cm.setActive('web559', n.nodeName == 'IMG');
});
Re setting mouseover element as selection element, can that be done with jQuery? (It doesn't matter to me if we mix jQuery in with the TinyMCE functions.)
Having to click on the element first would not be a big problem if it was just me using it, but I need to make it as obvious as possible for others who use the interface. (If showing on hover is too complicated, perhaps it's easier to just show it unconditionally?) - 01/17/12 5:00am
web559 says:What about this—if you could somehow pass in the index (.eq()) of the table whose button you clicked, then you could use dom.select to get the table.
For example, if it's the 3rd table (index = 2), you could then get the table by using
tinyMCE.activeEditor.dom.select('table')[2]
That way, you could get the table without using it being "manually" selected.
This is from http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.Selection.select:
// Select the first paragraph in the active editor
tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.dom.select('p')[0]); - 01/17/12 5:04am
Christianto says:Yes, since I code it from image button, that can be delete..
What I mean by selection tinyMCE.activeEditor.selection, this can be use directly as a reference that can be process/manipulate with tinyMCE dom API.
if I use jquery the update process inside the editor will not be easy.
using eq() I think it possible, but need global var reference.
I will check if I can use jquery.
- 01/17/12 6:05am
Christianto says:Ok, Please try this code
replace editor plugin.js and web559_custom.js
editor_plugin.js on pastebin here
web559_custom.js on pastebin here
- 01/16/12 12:00am
This question has expired.
Gabriel Reguly had additional discourse to offer.
Gabriel Reguly, Denzel Chia, Julio Potier, Arnav Joy voted on this question.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.