Need help with vue-trix?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hanhdt
145 Stars 22 Forks MIT License 401 Commits 14 Opened issues

Description

Trix text editor component for Vue.js

Services available

!
?

Need anything else?

Contributors list

No Data

Vue-Trix Text Editor

npm Build status npm

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

Table of Contents

Getting started

Demo page

vue-trix editor

Integrate into the form

vue-trix in production

Features

  • A simple and lightweight rich-text editor for writing daily.
  • Two-ways binding with
    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).

Installation

NPM

  $npm install --save vue-trix

YARN

  $yarn add vue-trix

Or directly from latest Github repo

  $npm install --save hanhdt/vue-trix

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 } };

Setup with Nuxt.js (SSR)

Create mounting plugin file

// plugins/vue_trix.js
import Vue from "vue";
import VueTrix from "vue-trix";

Vue.use(VueTrix);

Update Nuxt.js config file

// nuxt.config.js
plugins: [{ src: "~/plugins/vue_trix", mode: "client" }];

Component Usages

Create a simple editor in your single component file

Add

VueTrix
component into
*.vue
template
  

Integrating with Forms

  

Props descriptions

  • inputId
    : This is referenced
    id
    of the hidden input field defined, it is optional.
  • inputName
    : This is referenced
    name
    of the hidden input field defined, default value is
    content
    .
  • placeholder
    : The placeholder option attribute specifies a short hint that describes the expected value of a editor.
  • autofocus
    : Automatically focus the editor when it loads
  • disabledEditor
    : This prop will put the editor in read-only mode.
  • localStorage
    : The boolean attribute allows saving editor state into browser's localStorage (optional, default is
    false
    ).

Populating editor content

Init loading content into the editor

In case, you want to load initial data from database then display into the editor. you can use

v-model
directive with local component's state.
// Declare local component's state is loaded from database
export default {
  // ...
  data() {
    return {
      editorContent: "

Editor contents

" }; } // ... };
  // Assign to v-model directive
  

Track data changes

The local component's state will be changed reactively when you modified contents inside the trix editor UI. Therefore, you need to

watch
the local state for updating content back to database
export default {
  // ...
  methods: {
    updateEditorContent(value) {
      // Update new content into the database via state mutations.
    }
  },
  watch: {
    editorContent: {
      handler: "updateEditorContent"
    }
  }
  // ...
};

Binding attachment events

The

 element emits several events which you can use to observe and respond to changes in editor state.

  • @trix-file-accept
    fires before an attachment is added to the document. If you don’t want to accept dropped or pasted files, call preventDefault() on this event.
  • @trix-attachment-add
    fires after an attachment is added to the document. You can access the Trix attachment object through the attachment property on the event. If the attachment object has a file property, you should store this file remotely and set the attachment’s URL attribute.
  • @trix-attachment-remove
    fires when an attachment is removed from the document. You can access the Trix attachment object through the attachment property on the event. You may wish to use this event to clean up remotely stored files.

Process uploading attachment to remote server

Add binding event listener to

trix-attachment-add
  

In Javascript

  const remoteHost = 'your remote host';

function handleAttachmentChanges(event) { // 1. get file object let file = event.attachment.file;

// 2. upload file to remote server with FormData
// ...

// 3. if upload success, set back the attachment's URL attribute
// @param object data from remote server response data after upload.
let attributes = {
  url: remoteHost + data.path,
  href: remoteHost + data.path
};
event.attachment.setAttributes(attributes);

}

Trix document

Full documentation

Contributing

If you're interested in contributing to Vue-Trix or share your opinions, please consider to submitting a pull request or post issues. Also, I will try to code-self documentation.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.