Editor Setup Options

IMPORTANT When working with the editor settings a reference to ta-text-... refers to the WYSIWYG editor, ta-html-... refers to the RAW HTML code view editor.

There are several optional settings for initialising the editor as follows:

Data Attributes

NOTE: In the following examples for data attributes we will be displaying the following in the editor:

<p>Hello World!</p>

And the following will be defined in the controller:

$scope.htmlContent = "<p>Hello World!</p>";

The two data settings for the text-angular editor are ngModel and default html content. When ngModel is set the editor gets it's data from the variable. For example:

<text-angular ng-model="htmlContent"></text-angular>

If the default HTML content is set then the initial contents of the editor will be that html, as follows:

<text-angular><p>Hello World!</p></text-angular>

If both the ngModel and default HTML contents are set the value of the ngModel will override the value of the default HTML contents.

<text-angular ng-model="htmlContent"><p>This Won't show up!</p></text-angular>

In the above case if the value of the ngModel is the empty string, null or undefined then the value of the ngModel will be set to the value of the default HTML contents. For example:

<text-angular ng-model="newHtmlContent"><p>Hello World!</p></text-angular>

$scope.newHtmlContent = '';

Once the code has compiled the value of $scope.newHtmlContent will be <p>Hello World!</p>. This only happens the first time so if you clear the contents of the editor it will not re-populate it with <p>Hello World!</p>.

Data Display Attributes

There are 3 attributes that are used for displaying data that are as follows:

• name This is used for getting the editor scope via the textAngularManager or if you are using native form submissions.
• placeholder This is a static attribute, any HTML that is put in this tag will be displayed when the editor is blank.
• ta-disabled This functions like a read-only attribute, if it evaluates to true, you can't change the editor via any method.

Editor Setup Options

There are two setup functions that can be assigned globally via ta-options in the setup decorator (taOptions.setup.textEditorSetup and taOptions.setup.htmlEditorSetup) or by passing a function name through to the attribute. The attributes are ta-text-editor-setup and ta-html-editor-setup. These functions are called and passed in their respective element before they are compiled allowing you to add in any display directives you want. In the following example we will use ui-codemirror angular module on the text-area to format our html output.

Controller Code:

$scope.textAreaSetup = function($element){
  $element.attr('ui-codemirror', '');
};

Display Code:

<text-angular name='test' ta-text-editor-setup='textAreaSetup'></text-angular>

Using this the RAW Html editor will now look similar to the editor on this page: http://codemirror.net/