A rich text editor as a Vue component with image and auto-save support

vue-trix-editor

A Vue wrapper around the Trix rich-text editor, with support for images and auto-save.

Note: No true two-one binding.

While you can use v-model to bind the editor contents (the formatted HTML) to your own Vue instance or component,you won't get true two-way binding with this component. That means that if you update the value of your content outside of the editor, it will not be taken into account by the editor. This means you have to treat the editor as the source of truth, not whatever you bind it to. The reason for this is that Trix only reads in the initial content once on initialization, so to force two-way binding, we would have to make Trix re-evaluate and rebuild the entire document on every keystroke, which is not really worth it.

Installation

npm install @dymantic/trix-vue

Usage Example

// simple rich-text editor, the html output is bound to whatever my_html is
// the editor will initailly be populated with the contents from my_html
<trix-vue v-model="my_html"></trix-vue>

// same as above, but will allow adding images
<trix-vue v-model="my_html" image-upload-path="/url/to/upload/images"></trix-vue>

// simple rich-text editor, with a "save" button. Will send editor contents as POST to save-path
<trix-vue v-model="my_html" save-path="/url/to/save/contents"></trix-vue>

// same as above, but will auto-save at given interval (in seconds) if changes have been made
<trix-vue v-model="my_html" save-path="/url/to/save/contents" :save-interval="10"></trix-vue>

// all together now, and allow up to 20MB images
<trix-vue v-model="my_html"
          image-upload-path="/url/to/upload/images"
          max-image-file-size="20"
          save-path="/url/to/save/contents"
          :save-interval="10"
></trix-vue>

Props

The following props can be used to define the components behaviour

Prop name	required	default	Notes
initial-content	false	""	The content to populate the editor with initially (or use v-model)
image-upload-path	false	""	Supplying a value here allows for image uploads
max-image-file-size	false	5	Specify the maximum image filesize in MB
save-path	false	""	Supplying a url will allow content to be saved
save-interval	false	null	Time in seconds to auto-save. Only saves if there are changes since last save

Events

The editor will fire the following events:

Event name	payload	Notes
image-rejected	(file, message)	Fired if a user's image cannot be attached, either due to network error or invalid file
image-attached	null	Fired after an image has been successfully uploaded and inserted into document
content-saved	null	Fired after editor contents have been successfully saved (200-ish response from server)
content-save-failed	null	Fired an error occurs while saving content to provided endpoint

GitHub