Bridging TinyMCE js and Wordpress PHP?

Question

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.

Answer 1

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.

Answer 2

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