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