Skip to content

Implementation

Jump to bottom Edit New page
Jeffrey Guenther edited this page Apr 24, 2016 · 27 revisions

This is a work in progress and will evolve as I (@jrguenther) spelunk the code base. If others want to join in the effort, you are most welcome.

Keyboard Shortcuts

Navigation

  • left - move cursor one character to left
  • right - move cursor one character to right

Delete

  • backspace - deletes backward
  • delete - deletes forward
  • control + d - deletes forward
  • control + h - deletes backward

Line Breaks

  • control + o - inserts line break
  • return - insert line break

Modify Indent

  • tab - increase indent level
  • ⇧ shift + tab - decrease indent level

Selection

  • ⇧ shift + right -expand selection right
  • ⇧ shift + left - expand selection left

Execution Flow

When the trix.js code is included on your site and you add a <trix-editor> element to your HTML, the element will be automatically initialized. This is done by running registerElement in elements/trix_editor_element.coffee. The element is initially styled using the default CSS provide by the element registration. Creating the element creates an instance of the EditorController, which takes care of initializing the editor and hooking up its event listeners.

After the element is instantiated, the element listens for keyboard and mouse events. As the events stream in, the InputController handles them and delegates back to the EditorController as needed.

Event Handling

Events are handled with a combination of code run in InputController and EditorController. In some cases, InputController delegates back to EditorController. EditorController acts as a delegate for the SelectionManager, Composition, InputController, AttachmentManager, and ToolbarController. If delegate?.method is called, chances are you will find the implementation in EditorController.

Views

Trix.ObjectView Provides base rendering methods

Subclasses:

Each of the subclasses is responsible for creating the HTMLElements needed to display the block.

  • Trix.PieceView
  • Trix.DocumentView
  • Trix.ObjectGroupView
  • Trix.TextView
  • Trix.BlockView
  • Trix.AttachmentView
    • Trix.PreviewableAttachmentView
Add a custom footer
Add a custom sidebar
Clone this wiki locally