-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Setting Defaults
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;
}]);
}]);
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.
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; }
},