TransWikia.com

DOM reference to TinyMCE editor element (button)

WordPress Development Asked by mf27 on January 29, 2021

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.

One Answer

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')

Answered by phatskat on January 29, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP