Skip to content
Stefan Savu edited this page Jun 2, 2017 · 16 revisions

To set global defaults that affect all of your text-angular instances we recommend using an angular decorator if you are using the minified versions. If you aren't using the minified source files you can edit or replace textAngular-setup.js which contains all the settings in a module.

See below for an example of change via decorators:

angular.module('textAngularTest', ['textAngular'])
	.config(['$provide', function($provide){
		// this demonstrates how to register a new tool and add it to the default toolbar
		$provide.decorator('taOptions', ['$delegate', function(taOptions){
			// $delegate is the taOptions we are decorating
			// here we override the default toolbars and classes specified in taOptions.
			taOptions.forceTextAngularSanitize = true; // set false to allow the textAngular-sanitize provider to be replaced
			taOptions.keyMappings = []; // allow customizable keyMappings for specialized key boards or languages
			taOptions.toolbar = [
				['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'quote'],
				['bold', 'italics', 'underline', 'ul', 'ol', 'redo', 'undo', 'clear'],
				['justifyLeft','justifyCenter','justifyRight', 'justifyFull'],
				['html', 'insertImage', 'insertLink', 'wordcount', 'charcount']
			];
			taOptions.classes = {
				focussed: 'focussed',
				toolbar: 'btn-toolbar',
				toolbarGroup: 'btn-group',
				toolbarButton: 'btn btn-default',
				toolbarButtonActive: 'active',
				disabled: 'disabled',
				textEditor: 'form-control',
				htmlEditor: 'form-control'
			};
			return taOptions; // whatever you return will be the taOptions
		}]);
		// this demonstrates changing the classes of the icons for the tools for font-awesome v3.x
		$provide.decorator('taTools', ['$delegate', function(taTools){
			taTools.bold.iconclass = 'icon-bold';
			taTools.italics.iconclass = 'icon-italic';
			taTools.underline.iconclass = 'icon-underline';
			taTools.ul.iconclass = 'icon-list-ul';
			taTools.ol.iconclass = 'icon-list-ol';
			taTools.undo.iconclass = 'icon-undo';
			taTools.redo.iconclass = 'icon-repeat';
			taTools.justifyLeft.iconclass = 'icon-align-left';
			taTools.justifyRight.iconclass = 'icon-align-right';
			taTools.justifyCenter.iconclass = 'icon-align-center';
			taTools.clear.iconclass = 'icon-ban-circle';
			taTools.insertLink.iconclass = 'icon-link';
			taTools.insertImage.iconclass = 'icon-picture';
			// there is no quote icon in old font-awesome so we change to text as follows
			delete taTools.quote.iconclass;
			taTools.quote.buttontext = 'quote';
			return taTools;
		}]);
	}]);

Some Details

forceTextAngularSanitize

Set false to allow the textAngular-sanitize provider to be replaced with angular-sanitize or a custom provider. If true and textAngular-sanitize is not detected, throw an error.

keyMappings

Allow customizable keyMappings for specialized key boards or languages: keyMappings provides key mappings that are attached to a given commandKeyCode. To modify a specific keyboard binding, provide a function which returns true for the event you wish to map to. To disable a specific keyboard binding, provide a function which returns false. Note: 'RedoKey' and 'UndoKey' are internally bound to the redo and undo functionality.

At present, the following commandKeyCodes are in use: 98, 'TabKey', 'ShiftTabKey', 105, 117, 'UndoKey', 'RedoKey'

To map to an new commandKeyCode, add a new key mapping to the keyMappings. For example to map ctrl+9 to the commandKeyCode: 'CustomKey':

{
	commandKeyCode: 'CustomKey', 
	testForKey: function (event) {
		if (event.keyCode == 57 && event.ctrlKey && !event.shiftKey && !event.altKey) return true;
	} 
}

Then where taRegisterTool(...) is called, add a commandKeyCode: 'CustomKey' and your tool will be bound to ctrl+9.

Hence to modify one of the existing bound keys, add a modified version of one of the:

// 'bold' tool - 'Ctrl + b Key'
{	commandKeyCode: 98, 
	if (event.keyCode == 98 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey) return true;

},
// 'indent' tool - 'Tab Key'
{	commandKeyCode: 9, 
	if (event.keyCode == 9 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey) return true;

},
// 'outdent' tool - 'Shift + Tab Key'
{	commandKeyCode: 9, 
	if (event.keyCode == 9 && !event.ctrlKey && !event.metaKey && event.shiftKey && !event.altKey) return true;

},
// 'italics' tool - 'Ctrl + i Key'
{	commandKeyCode: 105, 
	if (event.keyCode == 98 && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) return true;

},
// 'underline' tool - 'Ctrl + u Key'
{	commandKeyCode: 117, 
	if (event.keyCode == 85 && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) return true;

},
// UNDO - 'Ctrl + z Key'
{	commandKeyCode: 'UndoKey', 
	if (event.keyCode == 98 && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) return true;

},
// REDO - 'Ctrl + y Key'
{	commandKeyCode: 'RedoKey', 
	if (event.keyCode == 98 && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) return true;

},

To completely disable one of the already bound commandKeyCodes such as 'RedoKey' or 'UndoKey' add:

{	commandKeyCode: 'RedoKey', 
	testForKey: function (event) { return false; } 
},
{	commandKeyCode: 'UndoKey', 
	testForKey: function (event) { return false; } 
},