0

I guess this should be a very simple question, but I'm not too familiar with overall functioning of Wordpress / TinyMCE so I'm struggling:

I've added a custom button to TinyMCE and need some kind of reference to a corresponding DOM element that would enable me to set a function handler for the 'click' event. Every click should dynamically change some other parts of the TinyMCE editor so I also need to refresh ('reflow'?) the view somehow.

Among answers to similar questions I couldn't find exactly what I'm looking for.

Here's the relevant part of the main .php file of the plugin:

require( 'tinymce-buttons/buttons.php' );

add_action( 'init', 'py2web_buttons' );
function py2web_buttons() {
    add_filter( "mce_external_plugins", "py2web_add_buttons" );
    add_filter( 'mce_buttons', 'py2web_register_buttons' );
}
function py2web_add_buttons( $plugin_array ) {
    $plugin_array['py2web'] = plugins_url() . '/py2web/tinymce-buttons/buttons.js';
    return $plugin_array;
}
function py2web_register_buttons( $buttons ) {
    array_push( $buttons, 'problem', 'solution' );
    return $buttons;
}

And the relevant part of the corresponding buttons.js file:

tinymce.create('tinymce.plugins.Py2Web', {

    count_problems : function(ed) {
        // Get body text
        body_text = ed.getBody().textContent;
        ids = [];
        // Parse text of the body
        do {
            var re_match = re.exec(body_text);
            if ( re_match ) {
                ids.push( re_match[1] );
            }
            else {
                break;
            }
        } while ( 1 );

        return ids;
    },

    init : function(ed, url) {
        ed.addButton('problem', {
            title : 'Add problem',
            cmd : 'problem',
            image : url + '/images/wturm.png'
        });

        ed.addCommand('problem', function() {
            var selected_text = ed.selection.getContent();

            nr_added = count_problems(ed).length;
            var id = nr_added + 1;

            var return_text = '[problem id="' + id + '"] ' + selected_text + ' [/problem]';

            ed.execCommand('mceInsertContent', 0, return_text);

            sol_button = ed.buttons['solution'];

        });

        ed.addButton('solution', {
            disabled: 0,//count_problems(ed).length == 0,
            title : 'Add problem solution',
            //cmd: 'solution_fun',
            image : url + '/images/wspringer.png',
            type: 'menubutton',
            menu: [{text: 'problem id = ' + 1, value: 1}],
            onselect: function(v1) {
                ed.windowManager.open({
                    title: 'Insert solution in popeye output format',
                    body: [{type: 'textbox', name: 'solution', label: "solution", width: 300, height: 50}],
                    width: 270,
                    height: 70,
                    onsubmit: function(v2) {
                        console.log(v1);
                        solution( v2.data.solution, v1.control.settings.value );
                    }
                });
            };
        });

        ed.addCommand('solution_fun', function() {
            set_solution_menu(ed);
        });

        function solution( selected_text, target='1' ) {
            return_text = '[solution target="' + target + '"]' + selected_text + '[/solution]';
            ed.execCommand('mceInsertContent', 0, return_text);
        };

    }

Thanks for any help.

  • Can you share any of the code that you used to add the custom button ton TinyMCE? – phatskat Oct 19 '15 at 13:59
  • @phatskat I added (the most relevant parts of the) code... – mf27 Oct 19 '15 at 17:41
0

Try adding an id attribute in your button definition:

    ed.addButton('solution', {
        disabled: 0,//count_problems(ed).length == 0,
        id: 'my_button',
        title : 'Add problem solution',
        //cmd: 'solution_fun',
        image : url + '/images/wspringer.png',
        type: 'menubutton',
        menu: [{text: 'problem id = ' + 1, value: 1}],
        onselect: function(v1) {
            ed.windowManager.open({
                title: 'Insert solution in popeye output format',
                body: [{type: 'textbox', name: 'solution', label: "solution", width: 300, height: 50}],
                width: 270,
                height: 70,
                onsubmit: function(v2) {
                    console.log(v1);
                    solution( v2.data.solution, v1.control.settings.value );
                }
            });
        };
    });

And see if you can access is with jQuery('#my_button')

  • I already tried that, unfortunately didn't work... I'm not sure how wordpress renders tinymce editor, therefore I don't have understanding of how to access individual elements (like buttons) defined by tinymce. Anyway, I realized that I could avoid all these problems by using only one button (I don't need two), so I don't need dynamic updates... But nevertheless it would be nice to figure out the answer to my initial question. I will report if I find something. Thanks. – mf27 Oct 20 '15 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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