对TinyMCE编辑器元素的DOM引用(按钮)

时间:2015-10-19 作者:mf27

我想这应该是一个非常简单的问题,但我对Wordpress/TinyMCE的整体功能不太熟悉,所以我很挣扎:

我向TinyMCE添加了一个自定义按钮,需要对相应的DOM元素进行某种引用,以便为“click”事件设置函数处理程序。每次单击都会动态更改TinyMCE编辑器的其他部分,因此我还需要刷新(“回流”)不知何故,这是一种观点。

在类似问题的答案中,我找不到确切的答案。

这里是主要的相关部分。插件的php文件:

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;
}
以及相应按钮的相关部分。js文件:

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

    }
谢谢你的帮助。

1 个回复
SO网友:phatskat

尝试添加id 按钮定义中的属性:

    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 );
                }
            });
        };
    });
看看你能不能用jQuery(\'#my_button\')