AutoForm Trix Extension
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 $ meteor add jkuester:autoform-trix
Import
Starting with v2.0.0 this package defaults to support dynamic imports (but also allows static imports).
Dynamic
To be able ´ load the trix form type, you will also have to load the trix-core
of the trix editor itself.
A good way to wrap this all up is to use an async function:
1export const importTrixForm = async () => { 2 await import('trix/dist/trix.esm.js') 3 await import('trix/dist/trix.css') 4 const loadAutoFormTrix = await import('meteor/jkuester:autoform-trix') 5 return loadAutoFormTrix.default() 6}
Note the .default
here. This package's main module exports a default async function which you need to call
in order to invoke the import of the form type.
Static
It is also possible to statically import this package. While it's suggested to favor dynamic imports to minimize bundle size (and thus load times), there may be occasions with dynamic import not being available.
In such case you can use the static import:
1import 'trix/dist/trix.esm.js' 2import 'trix/dist/trix.css' 3import 'meteor/jkuester:autoform-trix/static'
Remember, that this method will bundle up trix and this form type for the client and increases the initial client bundle.
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 } 18}
Block events
If you want to block events, simply set them to false
:
1{ 2 fieldName: { 3 type: String, 4 autoform: { 5 type: 'trix', 6 events: { 7 attachmentAdd: false 8 } 9 } 10}
Disable attachments entirely
If you want to disable attachments, you can simply pass attachments: false
as config:
1{ 2 fieldName: { 3 type: String, 4 autoform: { 5 type: 'trix', 6 attachments: false 7 } 8 } 9}
License
See LICENSE