npmpackage.info

Gathering detailed insights and metrics for vue-trix

vue-trix

Trix text editor component for Vue.js

1.2.0

243

MIT

Vue

738,755 3.1

Installations

npm install vue-trix

Pull Requests

Open

26

Total

365

Closed

179

Merged

160

Issues

Open

18

Total

64

Closed

46

Releases

Unable to fetch releases

Developer

hanhdt

Developer Guide

BETA

Module System

CommonJS, UMD

Min. Node Version

Typescript Support

No

Node Version

12.18.0

NPM Version

6.14.4 Statistics

243 Stars

487 Commits

37 Forks

4 Watching

31 Branches

13 Contributors

Updated on 04 Nov 2024

Languages

Vue (57.82%)

JavaScript (39.54%)

HTML (2.63%)

Total Downloads

Cumulative downloads

Total Downloads

738,755

Last day

-23.3%

340

Compared to previous day

Last week

-6.3%

2,088

Compared to previous week

Last month

-8.7%

11,066

Compared to previous month

Last year

154,267

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Vue-Trix Text Editor

npm

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

Vue-Trix Text Editor

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

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 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.

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

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

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.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

64 existing vulnerabilities detected

Details

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-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-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-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-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-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 / GHSA-qm2q-9f3q-2vcv
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-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 2024-11-25

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

vue-trix

Installations

Pull Requests

26

365

179

160

Issues

18

64

46

Releases

Unable to fetch releases

Developer

Developer Guide

CommonJS, UMD

No

12.18.0

6.14.4

Statistics

Languages

Total Downloads

738,755

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Vue-Trix Text Editor

Table of Contents

Getting started

Demo page

Integrate into the form

Features

Installation

NPM

YARN

Or directly from latest Github repo

Mount

Mount with global

Mount with component

Setup with Nuxt.js (SSR)

Component Usages

Create a simple editor in your single component file

Integrating with Forms

Props descriptions

Populating editor content

Init loading content into the editor

Track data changes

Binding attachment events

Process uploading attachment to remote server

Trix document

Contributing

10

10

10

6

0

0

0

0

0

0

0

0

0

3.1

/10