Customising v-shaped editor buttons

Starting from version 4.6.1 it is possible to add your own custom functions to the v-shaped editor buttons. The following example adds a simple function that displays the object's ID:

{init_articles name="articles" buttons="edit,hide,custom_button"}

<script type="text/javascript" src="{$wwwroot}/js/jquery.js"></script>
<script type="text/javascript" src="{$wwwroot}/js/jquery.contextMenu.js"></script>
<script type="text/javascript">{literal}

    // define your custom button
    $.fn.contextMenu.addAction({name: 'custom_button', title: 'Custom action', bind: customAction});
   
    // function to be executed, when the menu item is clicked
    function customAction()
    {
        // get object info from the anchor
        var objectData = $(this).data('objectData');
       
        var attrs = objectData.anchor.getAttributes(/^scms_/);
       
        alert(attrs['scms_object_id']);
       
        // return false to stop click propagation
        return false;
    }
</script>{/literal}

{*** Article titles ***}
{foreach from=$articles item="article"}
{$article->buttons}{$article->title}<hr>
{foreachelse}
{$articles_newbutton}
{/foreach}

You can use the following CSS rule for defining icon to your action:

ul.context_plugin_dropdown li.context_plugin_item a.custom_button  {
    background-image: url(url/to/icon.png);
}