Customising The Toolbar v1.1.x

There are two parts to customising the toolbar; changing the classes/styling and working with the plugin interface for individual toolbar buttons (referred to as tools from here on).

Styling the Toolbar

The toolbar is an implementation of Bootstraps Button Toolbar. There are 4 HTML attributes you can set on the text-angular tag to change the defaults, here is shown what the defaults are:

<div text-angular ng-model="htmlVariable" ta-toolbar-class="btn-toolbar" ta-toolbar-group-class="btn-group" ta-toolbar-button-class="btn btn-default" ta-toolbar-button-active-class="active"></text-angular>

Converts to:

<div text-angular ...>
  <div class="ta-toolbar btn-toolbar">
    <div class="btn-group">
      <button type="button" class="btn btn-default">...</button>
      <button type="button" class="btn btn-default active">...</button>
    </div>
  </div>
  ...
</div>

Defining the toolbar

The toolbar is comprised of several groups of buttons, these are defined by another HTML tag. This tag, unlike the previous ones, is a compiled tag so you can use a javascript variable or the input as in the example:

<text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics']]"></text-angular>

This would output the following toolbar (simplified from full version):

...
<div class="ta-toolbar btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default ng-scope" unselectable="on">H1</button>
    <button type="button" class="btn btn-default ng-scope" unselectable="on">H2</button>
    <button type="button" class="btn btn-default ng-scope" unselectable="on">H3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default ng-scope" unselectable="on"><i class="fa fa-bold"></i></button>
    <button type="button" class="btn btn-default ng-scope" unselectable="on"><i class="fa fa-italic"></i></button>
  </div>
</div>
...

The string values put into the ta-toolbar arrays are keys for tools that have been defined as shown in the next section.

Creating and Editing Tools

All of the plugin tools are stored on the $rootScope in an object called textAngularTools. To explain the parts of a tool I am going to show a quick tutorial on how to add a button to style the current selection red. (The wrapSelection function as used below internally calls the document.execCommand(command, false, opt)).

First the javascript to create the Tool Plugin:

$rootScope.textAngularTools.colourRed = {
	display: "<button ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-square' style='color: red;'></i></button>",
	action: function(){
		this.$parent.wrapSelection('formatBlock', '<span style="color: red">');
	},
	activeState: function(){return false;} //If this returns true then the ta-toolbar-button-active-class will be applied to the button.
};

As follows is an explanation of the individual keys of the tool plugin object: (Note that this will always refer to the scope of the tool)

display: This is the html that is inserted into the toolbar. This is compiled with a child scope of the main textAngular scope. The childScope contains the following functions and variables:

• name: This is the name of the tool, in our above example this would be 'colourRed'
• active: This is a variable that is used to apply the ta-toolbar-button-active class if true.
• showHtml(): This is a convenience function that allows returns true if viewing the RAW html or false if in the WYSIWYG mode.
• displayActiveToolClass(): This is used in the ng-class to return the value of ta-toolbar-button-active if active is true or '' if false.
• action: see below.
• activeState: see below.

action: This function is called whenever the button is clicked. In this case we are using textAngulars wrapSelection function which internally calls `document.execCommand('formatBlock', false, '') in our example and then updates the model.

activeState: This is called whenever the editor is updated and/or the text cursor is moved (keyup event), the active variable on the scope will be set to the result of this function. In this example it is difficult to detect if the cursor is in a block of red styled text so we return false.

Finally to add this new plugin tool to the example toolbar in Defining the Toolbar we do the following:

<text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics','colourRed']]"></text-angular>