Customizing the Email Editor Buttons

Overview

The Emails module in Sugar® displays commonly-used buttons in the HTML editor. This article explains how to modify the buttons on the editor's toolbar.

Modifying The View

The following sections outline how to customize the button toolbar presented within the TinyMCE editor. In the example below, we will be adding buttons for Cut, Copy, and Paste to the toolbar.

Using Custom Module Metadata

To override the Emails module compose-email view, we will need to copy ./modules/Emails/clients/base/views/compose-email/compose-email.php to ./custom/modules/Emails/clients/base/views/compose-email/compose-email.php. Once completed, we will then edit the ['tinyConfig']['toolbar'] definition to include | cut copy paste . An example of this is shown below:

./custom/modules/Emails/clients/base/views/compose-email/compose-email.php

  $viewdefs['Emails']['base']['view']['compose-email'] = array(
    ...
    'panels' => array(
        array(
            ...
            'fields' => array(
            	...
                array(
                    'name' => 'description_html',
                    'dismiss_label' => true,
                    'span' => 12,
                    'tinyConfig' => array(
                        'toolbar' => 'code | bold italic underline strikethrough | bullist numlist | ' .
                            'alignleft aligncenter alignright alignjustify | forecolor backcolor | ' .
                            'fontsizeselect | formatselect | fontselect | sugarattachment sugarsignature sugartemplate | cut copy paste',
                    ),
                ),
            ),
        ),
        ...
    ),
);

Note: We recommend modifying the modules custom metadata for local deployments when the customization is not part of a distributed package.

Once this file is in place, navigate to Admin > Repair > Quick Repair and Rebuild. Once completed, your changes will be reflected in the system.

Using The Module Extension Framework

To extend the Emails module compose-email view using the extension framework, we will need to loop through the existing views array definition to find and modify the description_html field and update the relevant sub-array ['tinyConfig']['toolbar'] with the additional toolbar buttons we want to display. An example of this is shown below:

./custom/Extension/modules/Emails/Ext/clients/base/views/compose-email/add_toolbar_buttons.php

  <?php

$target_view = 'compose-email';
$target_fieldname = 'description_html';

$default_toolbar =  'code | bold italic underline strikethrough | bullist numlist | ' .
                            'alignleft aligncenter alignright alignjustify | forecolor backcolor | ' .
                            'fontsizeselect | formatselect | fontselect | sugarattachment sugarsignature sugartemplate';				
$custom_toolbar = ' | cut copy paste';

if (!empty($viewdefs['Emails']['base']['view'][$target_view]['panels'])) {
	$panels = $viewdefs['Emails']['base']['view'][$target_view]['panels'];
	foreach ($panels as $i => $panel) {
		if (!empty($panel['fields'])) {
			foreach ($panel['fields'] as $j => $field) {
				if ($field['name'] == $target_fieldname) {
					if(!isset($field['tinyConfig'])){
						$field['tinyConfig'] = array();
					}
					/* If toolbar already exists, add our custom buttons to the end, 
					otherwise set it to the default and append that. */
					if(!isset($field['tinyConfig']['toolbar'])) {
						$field['tinyConfig']['toolbar'] = $default_toolbar;
					}
					$viewdefs['Emails']['base']['view'][$target_view]['panels'][$i]['fields'][$j]['tinyConfig']['toolbar'] = $field['tinyConfig']['toolbar'] . $custom_toolbar;
				}
			}
		}
	}
}

Note: We recommend using the extension framework when the code will be installed as part of a distributed package. 

Once this file is in place, navigate to Admin > Repair > Quick Repair and Rebuild. Once completed, your changes will be reflected in the system.

Toolbar Format

As demonstrated in the examples above, the toolbar value is a string with the button keywords space-separated. The | indicates a divider should be shown in the editor. If the goal were to replace the toolbar buttons with only text-modifier buttons, the value for toolbar would be:

'bold italic | underline strikethrough'

The toolbar button keywords are documented at TinyMCE Editor Control Identifiers. Note that at this time, only control keywords listed as "Core" are supported by Sugar®.