What does it do? 

The extension trix is incorporating the Trix-Editor into TYPO3. It is based upon the rte_ckeditor and has similarities with it in terms of the configuration.

Trix is by its design much more simpler to configure and extend than CKEditor. No quirks are needed to inject custom styling to the backend editor. No complex configurations are needed.

Trix keeps things simple for the editor by reducing its ability to style too much things which will eventually break in the frontend anyways (everyone experienced it - sigh).

History 

Trix was initially developed for the Ruby on Rails framework as an rich text editor integration named ActionText.

Trix uses a different approach like other WYSIWYG HTML editors by using the browser API do manipulate editor inputs by treating the contenteditable as an I/O device:

"[...] when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model, then re-renders that document back into the editor. This gives Trix complete control over what happens after every keystroke, and avoids the need to use execCommand at all."

Checkout https://edgeguides.rubyonrails.org/action_text_overview.html to learn more.

Features 

This extension incorporates the stand Trix-Editor functionality into the TYPO3 backend. However, the attachment functionality has been disabled as its deemed unnecessary for most use cases.

Plugins are not necessary within Trix. If you choose to use Trix instead of CKEditor you want the simplicity of it and the ease of use for the users.

A list of functions:

• Bold, italic, strike-through text formats (strong, em, del)
• Link-Browser integration to add Typolinks with title and target attributes
• One Headline format (only one, default is h3, can be customized)
• Blockquote format
• Code view (without HTML, to remove unnecessary characters not visibile)
• Ordered and unordered list
• Ability to increase/decrease list levels
• Editing history

Before you begin 

Before you install the extension make sure you have no other editors installed like rte_ckeditor. It ships by default with TYPO3 and has to be removed by composer command if you are using composer:

composer remove typo3/cms-rte-ckeditor

If you're using the legacy installation (without composer) simply go to the extension manager and disable the RTE CKEditor extension.

Install with composer 

This extension is simply installed with one command over the comfortable composer command line:

composer require atkins/t3-trix

Install without composer (Legacy installations) 

If you're using legacy systems without composer you can install it with the Extension Manager searching for the key trix.

How Do I Use a Different Preset? 

By default only one preset is defined with the name "default". However, you can change it the same way like rte_ckeditor like this using Page TSconfig:

RTE.default.preset = my_preset

You can also specify different presets for different tables and columns like so:

RTE.config.tt_content.bodytext.preset = my_preset

If you want to set presets only for certain content types you can do so:

RTE.config.tt_content.bodytext.types.text.preset = minimal

For more examples, see RTE in "TSconfig Reference".

How Do I Create My Own Preset? 

In your provider extension:

In ext_localconf.php, replace my_extension with your extension key, replace my_preset and MyPreset.yaml with the name of your preset.

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_preset'] = 'EXT:my_extension/Configuration/RTE/MyPreset.yaml';

In Configuration/RTE/MyPreset.yaml, create your configuration, for example:

# This is the complete configuration
editor:
  config:
    # Specify a custom path
    contentsCss: 'EXT:trix/Resources/Public/Css/contents.css'
    autofocus: true
    heading1:
      tagName: h3

How do I specify custom CSS for the editor? 

You can give the user a hint of what the styled text will look in the frontend by adding a custom CSS file to your provider extension and link that file within your preset (see above).

After you created your own preset file (YAML) and linked it within your TSconfig you create a CSS file within your provider extension, for example at:

Resources/Public/Css/rte.css

When creating the CSS file make sure all CSS instructions have the trix-editor selector preceeding, for example:

trix-editor div {
    margin-bottom: 10px;
}

Then don't forget to specify the path to the CSS file within your preset, change my_extension to your extension name:

# This is the complete configuration
editor:
  config:
    # Your custom path
    contentsCss: 'EXT:my_extension/Resources/Public/Css/contents.css'
    autofocus: true
    heading1:
      tagName: h3

How do I customize the heading HTML-tag? 

By default only one heading can be styled with Trix-Editor. That heading is by default set to be a h3-Tag. You can change this to any tag you want by changing it in a custom preset file (see above) and changed the property "tagName" under "heading1".

Checkout online demo 

If you want to checkout Trix-Editor before installing you go the official website where the editor is embedded for you to test. But keep in mind that the attachment button is not integrated. The official demo:

https://trix-editor.org/