Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm updating my wordpress plugin to use a custom TinyMCE button. From inside the TinyMCE button javascript, I'd like to interact with wordpress data--ie set custom post options inside the plugin setting page, then access those values inside the TinyMCE js script.

Can I invoke my php plugin functions from inside the TinyMCE button handler code (which is javascript)?

Is there a bridge I can use?

For Clarification:

As part of my plugin installation process, users are instructed to go to the Plugin settings page, and input some data. This data is normally stored and read using Wordpress Plugin API hooks: get_option and set_option This is part of my original plugin and works fine.

I am now adding a TinyMCE button, and when I click it, an HTML page is shown, that has an html textarea. This part also works fine.

However, I'd like to Fill the textarea with data via the get_option Wordpress Plugin call, but I can't figure out how to access the API.

Another acceptable solution would be to pass that data into the TinyMCE script, and injest it that way.

Or to have the TinyMCE button script invoke a method in my PHP plugin script that reads and returns that data back into the TinyMCE button script.

share|improve this question
    
can you clarify me - you looking for example to invoke your plugin functionality from tinymce button script right (so i asume you have created tinymce button)? –  Oleg Butuzov Nov 20 '12 at 15:07
    
Yes, I have created the Tinymce Button. What I'm looking to do is access Wordpress's plugin API from inside TinyMCE script. If a user installs our plugin, there is some settings they specify as part of the plugin configuration. Those are stored via set_option() in wordpress plugin API. I'd like to read that data inside the TinyMCE page script. –  Alan Nov 20 '12 at 17:44
add comment

2 Answers

I have integrated buttons to TinyMCE with WordPress functionality, let me know if this material would add some context with code samples to your use case.

share|improve this answer
    
Thanks Mario. Unfortunately it wasn't helpful. I already have a TinyMCE button that shows up in the WYSIWYG editor. I'm actually trying to access Wordpress API from inside TinyMCE script. –  Alan Nov 20 '12 at 17:47
    
Use the admin_ajax hooks for that purpose, invoke AJAX calls from the plugin with an action registered there. More on AJAX calls - codex.wordpress.org/AJAX_in_Plugins and another sample with AJAX from me - devwp.eu/overcome-the-wordpress-autosave-limitations - for autosave using jQuery AJAX calls over WP function –  Mario Peshev Nov 20 '12 at 18:40
    
BOOM. That's the ticket. Would you mind editing your answer to include this information and I'll mark it as accepted! –  Alan Nov 20 '12 at 18:46
    
sure thing, go ahead –  Mario Peshev Nov 20 '12 at 22:21
add comment

Sample of mce button code

(function() {
var each = tinymce.each;
tinymce.PluginManager.requireLangPack('grid');
tinymce.create('tinymce.plugins.FoundationGridPlugin', {
    init : function(ed, url) {
        var t = this; t.editor = ed;
        imageUrl = url + '/../images/grid.png';
    },

    createControl : function(n, cm) {

        var t = this, c, ed = t.editor;

        if (n == 'grid') {
            c = cm.createButton(n, {
                title : 'grid.title', 
                scope : t, 
                image:imageUrl,
                onclick : function() {
                    ed.execCommand("mceShowGridContainer", false, false);
                }

            });
            return c;
        }
    },

    execCommand: function(cmd, ui, type) {
        var ed = tinyMCE.activeEditor;
        var url = this.url;
        switch (cmd) {
            case "mceShowGridContainer":
                jQuery.post(ajaxurl, {action:'grid_action_ajax'}, function(html){
                     // some code here
                });
            break;
        }   
    },

    getInfo : function() {
        return {
            longname : 'Foundation Grid Generator',
            author   : 'Oleg Butuzov;',
            authorurl: 'http://made.com.ua',
            infourl  : 'http://made.com.ua',
            version  : '2.0'
        };
    }
});

tinymce.PluginManager.add('grid', tinymce.plugins.FoundationGridPlugin);
})();

and here is code you actualy need...

onclick : function() {
    ed.execCommand("mceShowGridContainer", false, false);
}

which runs

case "mceShowGridContainer":
       jQuery.post(ajaxurl, {action:'wpse73257_grid_action_ajax'}, function(html){
             // some code here
       });
break;

now you can simply add ajax_action that wil interact with your script

 add_action('wp_ajax_wpse73257_grid_action_ajax', 'wpse73257_grid_action_ajax');
 function wpse73257_grid_action_ajax(){
   //do something and show something
 exit;
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.