Gathering detailed insights and metrics for vue-trix
Gathering detailed insights and metrics for vue-trix
Installations
npm install vue-trixDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, UMD
Node Version
12.18.0
NPM Version
6.14.4
Releases
Unable to fetch releases
Languages
3
Vue
JavaScript
HTML
Vue (57.82%)
JavaScript (39.54%)
HTML (2.63%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
249 Stars
487 Commits
35 Forks
3 Watchers
34 Branches
13 Contributors
Updated on Jun 15, 2025
Maintainers
1
Package Meta Information
Latest Version
1.2.0
Package Id
vue-trix@1.2.0
Unpacked Size
3.05 MB
Size
935.60 kB
File Count
38
NPM Version
6.14.4
Node Version
12.18.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
27
@vue/cli-plugin-babel@vue/cli-plugin-eslint@vue/cli-plugin-unit-jest@vue/cli-service@vue/eslint-config-standard@vue/test-utilsbabel-corebabel-eslintbabel-jestidentity-obj-proxyjest-serializer-vuejest-transform-stubjs-beautifyrolluprollup-plugin-aliasrollup-plugin-babelrollup-plugin-bublerollup-plugin-commonjsrollup-plugin-node-resolverollup-plugin-replacerollup-plugin-sassrollup-plugin-uglifyrollup-plugin-vuesass-loaderuglify-esvuevue-template-compiler
Vue-Trix Text Editor
Simple and lightweight Trix rich-text editor Vue.js component for writing daily
Table of Contents
- Vue-Trix Text Editor
Getting started
Demo page
Integrate into the form
Features
- A simple and lightweight rich-text editor for writing daily.
- Two-ways binding with
v-modeleasily. - 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
1 $npm install --save vue-trix
YARN
1 $yarn add vue-trix
Or directly from latest Github repo
1 $npm install --save hanhdt/vue-trix
Mount
Mount with global
in the main.js, import the package as a global component.
1import "vue-trix";
Mount with component
1import VueTrix from "vue-trix"; 2 3export default { 4 // ... 5 components: { 6 VueTrix 7 } 8};
Setup with Nuxt.js (SSR)
Create mounting plugin file
1// plugins/vue_trix.js 2import Vue from "vue"; 3import VueTrix from "vue-trix"; 4 5Vue.use(VueTrix);
Update Nuxt.js config file
1// nuxt.config.js 2plugins: [{ src: "~/plugins/vue_trix", mode: "client" }];
Component Usages
Create a simple editor in your single component file
Add VueTrix component into *.vue template
1 <template> 2 <!-- ... --> 3 <VueTrix v-model="editorContent" placeholder="Enter content" localStorage/> 4 <!-- ... --> 5 </template>
Integrating with Forms
1 <form ...> 2 <VueTrix inputId="editor1" v-model="editorContent" placeholder="enter your content..."/> 3 </form>
Props descriptions
inputId: This is referencedidof the hidden input field defined, it is optional.inputName: This is referencednameof the hidden input field defined, default value iscontent.placeholder: The placeholder option attribute specifies a short hint that describes the expected value of a editor.autofocus: Automatically focus the editor when it loadsdisabledEditor: This prop will put the editor in read-only mode.localStorage: The boolean attribute allows saving editor state into browser's localStorage (optional, default isfalse).
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.
1// Declare local component's state is loaded from database 2export default { 3 // ... 4 data() { 5 return { 6 editorContent: "<h1>Editor contents</h1>" 7 }; 8 } 9 // ... 10};
1 // Assign to v-model directive 2 <template> 3 <!-- ... --> 4 <VueTrix v-model="editorContent"/> 5 <!-- ... --> 6 </template>
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
1export default { 2 // ... 3 methods: { 4 updateEditorContent(value) { 5 // Update new content into the database via state mutations. 6 } 7 }, 8 watch: { 9 editorContent: { 10 handler: "updateEditorContent" 11 } 12 } 13 // ... 14};
Binding attachment events
The <VueTrix/> element emits several events which you can use to observe and respond to changes in editor state.
-
@trix-file-acceptfires 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-addfires 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-removefires 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
1 <template> 2 <!-- ... --> 3 <VueTrix @trix-attachment-add="handleAttachmentChanges"/> 4 <!-- ... --> 5 </template>
In Javascript
1 const remoteHost = 'your remote host'; 2 3 function handleAttachmentChanges(event) { 4 // 1. get file object 5 let file = event.attachment.file; 6 7 // 2. upload file to remote server with FormData 8 // ... 9 10 // 3. if upload success, set back the attachment's URL attribute 11 // @param object data from remote server response data after upload. 12 let attributes = { 13 url: remoteHost + data.path, 14 href: remoteHost + data.path 15 }; 16 event.attachment.setAttributes(attributes); 17 }
Trix document
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.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/5 approved changesets -- score normalized to 6
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/nodejs.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/hanhdt/vue-trix/nodejs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/hanhdt/vue-trix/nodejs.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:22
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 28 are checked with a SAST tool
Reason
79 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-qjqp-xr96-cj99
- Warn: Project is vulnerable to: GHSA-6vx4-v2jw-qwqh
- Warn: Project is vulnerable to: GHSA-qm2q-9f3q-2vcv
- Warn: Project is vulnerable to: GHSA-j386-3444-qgwg
- Warn: Project is vulnerable to: GHSA-mcrw-746g-9q8h
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
3.1
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More