toggle button in tinymce

I have this code !

(function() {
    tinymce.create("tinymce.plugins.afflpad", {
        init : function(ed, url) {
            ed.addCommand("afflpad_click", function(e) {
                ed.insertContent('<b>' + ed.selection.getContent() + '</b>');

            });
            ed.addButton("afflpad_button", {
                title : "Affiliate Link",
                cmd : "afflpad_click",
                icon : "wp_code",

            });

        },
        getInfo : function() {
            return {
                longname : "Affiliate links",
                author : "NAME",
                authorurl : "HOMEPAGE",
                infourl : "HOMEPAGE",
                version : tinymce.majorVersion + "." + tinymce.minorVersion
            };
        }
    });

    tinymce.PluginManager.add("afflpad", tinymce.plugins.afflpad);
})();

1.The button on first click shoud open <b> and on second click have to close </b> tag

Read More

2.How to add active class ?

3.How to detect button object ?

4.(different function) The button on second click remove selected <b> tag

php coodes :

function afflpad_mce_buttonhooks() {
    if(current_user_can("edit_posts") && current_user_can("edit_pages") && get_user_option("rich_editing") == "true") {
        add_filter("mce_external_plugins", "afflpad_register_tinymce_javascript");
        add_filter("mce_buttons", "afflpad_register_mce_buttons");  
    }
}

add_action("init", "afflpad_mce_buttonhooks");

function afflpad_register_tinymce_javascript($plugin_array) {
    $plugin_array["afflpad"] = (get_bloginfo('template_directory').'/js/editor-script.js');
    return $plugin_array;
}

function afflpad_register_mce_buttons($buttons) {
    array_push($buttons, "|", "afflpad_button");
    return $buttons;
}
add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {

    if ( !empty($url) )
        $url .= ',';


    $url .= (get_bloginfo('template_directory').'/editor-styles.css');

    return $url;
}

Related posts