Show dialog box in TinyMCE plugin and use WordPress php functions in it

2 Views

I’m adding a TinyMCE button to my plugin. So far, I’ve been able to add the button and call my editor_plugin.js file and it’s command. Not an easy mission btw…

I want this button to show a Dialog box, which gives the user several options. These are dropdown boxes which I need to fill and some text boxes for the user to just write the input. Some of them needs info from WordPress functions, and others are just static info.

Read More

After this dialog box is accepted, I want it to write the shortcode on the post for my plugin to display with the options selected in the box.

The thing is, I want to use some of WordPress’ functions in my php file. But it’s sort of “out of context”. I can’t use WordPress functions, or even the __() functions for i18n.

Here’s the code I’m using from one of the TinyMCE examples: 

ed.addCommand('mceExample', function() {
                            ed.windowManager.open({
                                    file : url + '/box.php',
                                    width : 500 + ed.getLang('example.delta_width', 0),
                                    height : 300 + ed.getLang('example.delta_height', 0),
                                    inline : 1
                            }, {
                                    plugin_url : url, // Plugin absolute URL
                                    some_custom_arg : 'custom arg' // Custom argument
                            });
                    });

I’m also missing the way to actually write into the post. As you can see here, this code uses nothing to write into the post. I tried using this code I found on another example: ed.execCommand('mceInsertContent', false, 'Hello World'); but haven’t found out how to use it on my new script.

Sorry if this has been answered before, but all the documentation regarding TinyMCE seams pretty confusing, and I’ve had a hard time integrating this into my plugins. Thanks in advance.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Instead of requireing admin.php you just can use WP built-in ajax functionality, even if it’s not ajax in this case.

    Add a hook

     add_action('wp_ajax_my_plugin_function', 'my_plugin_function_callback');

    Create your output function (callback)

    function my_plugin_function_callback() {
    // do stuff
}

    Call it this way

    instead of:

    file : url + '/box.php',

    you should be able to use the global ajaxurl:

    file: ajaxurl + '?action=my_plugin_function&optional=data ...

    Maybe add a nonce for security reasons, but that’s up to you 🙂

  2. [edit: missed part of the question]

    Can’t swear to this being a best practice, but the solution I’ve seen is to include ‘wp-admin/admin.php’ which should give you access to any/all WordPress functions.

    Getting to it is the challenge, considering that your plugin can be renamed/moved. This [hackish] solution assumes that the plugin still resides in the ‘wp-content’ directory. You’ll want to place this code at the top of your ‘box.php’ file.

    $admin = dirname( __FILE__ ) ;
$admin = substr( $admin , 0 , strpos( $admin , "wp-content" ) ) ;
require_once( $admin . 'wp-admin/admin.php' ) ;

    If there’s a better way of doing this, I’d love to see it as well — this feels sorta hackish.

    As for putting your content back in the editor, you’ll need to include the ‘tiny_mce_popup.js’ file in your dialog. Put this in the head of your box.php file.

    <script type="text/javascript" src="<?php echo get_option( 'siteurl' ) ?>/wp-includes/js/tinymce/tiny_mce_popup.js"></script>

    Your dialog should have some form of javascript method that is triggered when the user clicks OK. In that method you’ll use the execCommand, like so:

    <script type="text/javascript">
function myOnSubmitFunction( ){
    tinyMCEPopup.editor.execCommand('mceInsertContent', false, 'Put your content here...' ) ;
}
</script>

    Hopefully I’ve made this a bit more clear.