Vue-Trix Text Editor

Simple and lightweight Trix rich-text editor component for Vue.js

Sample page

Installation

NPM

  $npm install --save vue-trix

YARN

  $yarn add vue-trix

Features

• A simple and lightweight rich-text editor
• Binding with your v-model easily
• Auto-save editor data temporally what you has typed into the form input in case something goes wrong (for example, the browser could crash or you could accidentally refresh the page without submit saving)

Mount

Mount with global

in the main.js, import the package as a global component.

  import 'vue-trix'

Mount with component

  import VueTrix from 'vue-trix'

  export default {
    // ...
    components: {
      VueTrix
    }
  }

Component Usages

Create a simple editor

Add VueTrix component into *.vue template

  <template>
    <!-- ... -->
    <VueTrix v-model="editorContent"/>
    <!-- ... -->
  </template>

Integrating with Forms

  <form ...>
    <VueTrix inputId="editor1" v-model="editorContent"/>
  </form>

Props descriptions

• inputId: This is referenced id of the hidden input field defined

Trix document

Full documentation

Contributing

If you're interested in contributing to Vue-Trix, please consider to submitting a pull request or post issues.