Finally, add angular-trix directive and ng-model to the <trix-editor></trix-editor>.

<trix-editor angular-trix ng-model="foo"></trix-editor>

Styling Formatted Content

To ensure what you see when you edit is what you see when you save, use a CSS class name to scope styles for Trix formatted content. Apply this class name to your <trix-editor> element, and to a containing element when you render stored Trix content for display in your application.

The default trix.css file includes styles for basic formatted content—including bulleted and numbered lists, code blocks, and block quotes—under the class name trix-content. We encourage you to use these styles as a starting point by copying them into your application’s CSS with a different class name.

Observing Editor Changes

The <trix-editor> element emits several events which you can use to observe and respond to changes in editor state.

trix-initialize fires when the <trix-editor> element is attached to the DOM and its editor object is ready for use.

trix-change fires whenever the editor’s contents have changed.

trix-selection-change fires any time the selected range changes in the editor.

trix-focus and trix-blur fire when the editor gains or loses focus, respectively.

trix-file-accept fires when a file is dropped or inserted into the editor. You can access the DOM File object through the file property on the event.

trix-attachment-add fires after an attachment is added to the document. You can access the Trix attachment object through the attachment property on the event. If the attachment object has a file property, you should store this file remotely and set the attachment’s URL attribute.

trix-attachment-remove fires when an attachment is removed from the document. You can access the Trix attachment object through the attachment property on the event. You may wish to use this event to clean up remotely stored files.

Storing Attached Files

Trix automatically accepts files dragged or pasted into an editor and inserts them as attachments in the document. Each attachment is considered pending until you store it remotely and provide Trix with a permanent URL.

To store attachments, listen for the trix-attachment-add event. Upload the attached files with XMLHttpRequest yourself and set the attachment’s URL attribute upon completion. See the Plunker for detailed information.

If you don’t want to accept dropped or pasted files, addprevent-trix-file-accept = "true" attribute to the trix editor.

Editing Text Programmatically

You can manipulate a Trix editor programmatically through the Trix.Editor interface, available on each <trix-editor> element through its editor property. You can access editor property in controller via trix event parameter.

Directional Movement

To programmatically move the cursor or selection through the document, call the editor.moveCursorInDirection or editor.expandSelectionInDirection methods with a direction argument. The direction can be either "forward" or "backward".

$scope.trixInitialize = function(e, editor) {
// Move the cursor backward one character
editor.moveCursorInDirection("backward")
// Expand the end of the selection forward by one character
editor.expandSelectionInDirection("forward")
}

Converting Positions to Pixel Offsets

Sometimes you need to know the x and y coordinates of a character at a given position in the editor. For example, you might want to absolutely position a pop-up menu element below the editor’s cursor.

Call the editor.getClientRectAtPosition method with a position argument to get a DOMRect instance representing the left and top offsets, width, and height of the character at the given position.

Inserting and Deleting Text

The editor interface provides methods for inserting, replacing, and deleting text at the current selection.

To insert or replace text, begin by setting the selected range, then call one of the insertion methods below. Trix will first remove any selected text, then insert the new text at the start position of the selected range.

Inserting Plain Text

To insert unformatted text into the document, call the editor.insertString method.

Inserting HTML

To insert HTML into the document, call the editor.insertHTML method. Trix will first convert the HTML into its internal document model. During this conversion, any formatting that cannot be represented in a Trix document will be lost.

Deleting Text

If the current selection is collapsed, you can simulate deleting text before or after the cursor with the editor.deleteInDirection method.

$scope.trixInitialize = function(e, editor) {
// “Backspace” the first character in the document
editor.setSelectedRange([1, 1])
editor.deleteInDirection("backward")
// Delete the second character in the document
editor.setSelectedRange([1, 1])
editor.deleteInDirection("forward")
}

To delete a range of text, first set the selected range, then call editor.deleteInDirection with either direction as the argument.

Using Undo and Redo

Trix editors support unlimited undo and redo. Successive typing and formatting changes are consolidated together at five-second intervals; all other input changes are recorded individually in undo history.

Call the editor.undo and editor.redo methods to perform an undo or redo operation.