AutoForm Trix Extension

GitHub

Get the Trix wysiwyg-editor as configurable AutoForm extension.

Installation

Since this package is not bound to a specific version of trix, you need to install trix on your host project:

$ cd projectdir
$ meteor npm install --save trix@latest

Then import in your project the trix-core of the editor, because Meteor brings already all Polyfills that are required:

1import 'trix/dist/trix-core'
2import 'trix/dist/trix.css'

To add this plugin simply add it from atmosphere:

meteor add jkuester:autoform-trix

Documentation

Simple Example

Just create a String type field with the autoform type trix:

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6    }
7  }
8}

This renders a default trix editor out-of-the-box.

Config

To pass the config, use the config object on the schema's autoform property:

Non-Reactive

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      config: {
7        undoInterval: 10 // just an example
8      }
9    }
10  }
11}

Reactive

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      config () {
7        return myCurrentConfig
8      }
9    }
10  }
11}

Lang / i18n

There is a specific config for lang, that it should not be passed using config but as own lang property. This is due to the circumstance, that trix does not support reactive i18n out of the box and this extensions makes use of the Blaze reactivity and onRendered in order to reactively update language.

Non-Reactive

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      lang: {
7        // ... see https://github.com/basecamp/trix/wiki/I18n for the mapping
8      }
9    }
10  }
11}

Reactive

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      lang () {
7        // ... see https://github.com/basecamp/trix/wiki/I18n for the mapping
8        return myCurrentLanguageConfig
9      }
10    }
11  }
12}

Events

You can hook into the trix events by using the following pattern within your schema:

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6      events: {
7        <HookName>(event, templateInstace) {
8          
9        }
10      }
11    }
12  }
13}

Where HookName is one of the entries of the following mapping:

EventName	HookName
`trix-before-initialize`	`beforeInitialize`
`trix-initialize`	`initialize`
`trix-change`	`change`
`trix-selection-change`	`selectionChange`
`trix-focus`	`focus`
`trix-blur`	`blur`
`trix-file-accept`	`fileAccept`
`trix-attachment-add`	`attachmentAdd`
`trix-attachment-remove`	`attachmentRemove`

Note that the event parameter is actually a jQuery event. If you want to access properties like event.attachment you need to get the originalEvent, for example:

1{
2  fieldName: {
3    type: String,
4    autoform: {
5      type: 'trix',
6        events: {
7          attachmentAdd ($event) {
8            const event = $event.originalEvent
9            if (event.attachment.file) {
10              //... process file using your upload library
11              // then set attachment like in this example:
12              // https://trix-editor.org/js/attachments.js
13            }
14          }
15        }
16  }
17}

License

See LICENSE