Styling the Editor

There are several classes that allow you to customise the css used to style the WYSIWYG and HTML editors. You can set these via the ta-text-editor-class and ta-html-editor-class attributes as shown below with their default values.

<text-angular name="htmlcontent" ng-model="htmlcontent" ta-text-editor-class="form-content" ta-html-editor-class="form-content" ta-focussed-class="focussed"></text-angular>

Is replaced with:

<div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" class="ta-root">
  <div class="ta-toolbar btn-toolbar">...</div>
  <div contenteditable="true" class="ta-text ta-editor form-content">
    ...(This is a WYSIWYG view)
  </div>
  <pre contenteditable="true" class="ta-html ta-editor form-content">
    ...(This is the view that shows the HTML tags)
  </pre>
  <input type="hidden" style="display: none;" name="htmlcontent" value="...">
</div>

Which changes to the following when an editor has focus: (The class string from ta-focussed-class has been applied to the text-angular root)

<div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" class="ta-root focussed">
...
</div>

(Note that if you do not specify the optional name tag then the hidden input will not exist).

The important options here are the two attributes on the original tag: ta-text-editor-class and ta-html-editor-class. These are two of several pass-through class attributes that allow you to change the classes applied on an editor by editor basis.

To change these classes across all textAngular instances see Setting Defaults