Installations
npm install vue2-editor
Developer Guide
Typescript
No
Module System
CommonJS
Node Version
12.18.4
NPM Version
6.14.6
Score
93.5
Supply Chain
99.6
Quality
75.6
Maintenance
50
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (59.21%)
Vue (32.42%)
SCSS (8.37%)
Developer
davidroyer
Download Statistics
Total Downloads
10,856,558
Last Day
1,284
Last Week
36,324
Last Month
159,943
Last Year
2,239,285
GitHub Statistics
2,512 Stars
397 Commits
361 Forks
39 Watching
11 Branches
5 Contributors
Bundle Size
245.35 kB
Minified
52.53 kB
Minified + Gzipped
Package Meta Information
Latest Version
2.10.3
Package Id
vue2-editor@2.10.3
Size
50.14 kB
NPM Version
6.14.6
Node Version
12.18.4
Publised On
21 Aug 2021
Total Downloads
Cumulative downloads
Total Downloads
10,856,558
Last day
2.5%
1,284
Compared to previous day
Last week
-10%
36,324
Compared to previous week
Last month
-7.8%
159,943
Compared to previous month
Last year
-13.7%
2,239,285
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
27
Vue2Editor
An easy-to-use but yet powerful and customizable rich text editor powered by Quill.js and Vue.js
View Docs
Install
You can use Yarn or NPM
1npm install vue2-editor
OR
1yarn add vue2-editor
Usage
1// Basic Use - Covers most scenarios 2import { VueEditor } from "vue2-editor"; 3 4// Advanced Use - Hook into Quill's API for Custom Functionality 5import { VueEditor, Quill } from "vue2-editor";
Nuxt.js
Add vue2-editor/nuxt
to modules section of nuxt.config.js
1{ 2 modules: ["vue2-editor/nuxt"]; 3}
To avoid seeing warnings from Vue about a mismatch in content, you'll need to
wrap the VueEditor
component with the client-only
component Nuxt provides as
shown here:
1<client-only> 2 <VueEditor /> 3</client-only>
Props
Name | Type | Default | Description |
---|---|---|---|
customModules | Array | - | Declare Quill modules to register |
disabled | Boolean | false | Set to true to disable editor |
editorOptions | Object | - | Offers object for merging into default config (add formats, custom Quill modules, ect) |
editorToolbar | Array | ** Too long for table. See toolbar example below | Use a custom toolbar |
id | String | quill-container | Set the id (necessary if multiple editors in the same view) |
placeholder | String | - | Placeholder text for the editor |
useCustomImageHandler | Boolean | false | Handle image uploading instead of using default conversion to Base64 |
v-model | String | - | Set v-model to the the content or data property you wish to bind it to |
Events
Name | Parameters | Description |
---|---|---|
blur | quill | Emitted on blur event |
focus | quill | Emitted on focus event |
image-added | file, Editor, cursorLocation | Emitted when useCustomImageHandler is true and photo is being added to the editor |
image-removed | file, Editor, cursorLocation | Emitted when useCustomImageHandler is true and photo has been deleted |
selection-change | range, oldRange, source | Emitted on Quill's selection-change event |
text-change | delta, oldDelta, source | Emitted on Quill's text-change event |
Examples
Example - Basic Setup
1<template> 2 <div id="app"> 3 <vue-editor v-model="content"></vue-editor> 4 </div> 5</template> 6 7<script> 8import { VueEditor } from "vue2-editor"; 9 10export default { 11 components: { 12 VueEditor 13 }, 14 15 data() { 16 return { 17 content: "<h1>Some initial content</h1>" 18 }; 19 } 20}; 21</script>
Example - Custom Image Handler
If you choose to use the custom image handler, an event is emitted when a a photo is selected. You can see below that 3 parameters are passed.
- It passes the file to be handled however you need
- The Editor instance
- The cursor position at the time of upload so the image can be inserted at the correct position on success
NOTE In addition to this example, I have created a example repo demonstrating this new feature with an actual server.
1<template> 2 <div id="app"> 3 <vue-editor 4 id="editor" 5 useCustomImageHandler 6 @image-added="handleImageAdded" 7 v-model="htmlForEditor" 8 > 9 </vue-editor> 10 </div> 11</template> 12 13<script> 14import { VueEditor } from "vue2-editor"; 15import axios from "axios"; 16export default { 17 components: { 18 VueEditor 19 }, 20 21 data() { 22 return { 23 htmlForEditor: "" 24 }; 25 }, 26 27 methods: { 28 handleImageAdded: function(file, Editor, cursorLocation, resetUploader) { 29 // An example of using FormData 30 // NOTE: Your key could be different such as: 31 // formData.append('file', file) 32 33 var formData = new FormData(); 34 formData.append("image", file); 35 36 axios({ 37 url: "https://fakeapi.yoursite.com/images", 38 method: "POST", 39 data: formData 40 }) 41 .then(result => { 42 const url = result.data.url; // Get url from response 43 Editor.insertEmbed(cursorLocation, "image", url); 44 resetUploader(); 45 }) 46 .catch(err => { 47 console.log(err); 48 }); 49 } 50 } 51}; 52</script>
Example - Set Contents After Page Load
1<template> 2 <div id="app"> 3 <button @click="setEditorContent">Set Editor Contents</button> 4 <vue-editor v-model="htmlForEditor"></vue-editor> 5 </div> 6</template> 7 8<script> 9import { VueEditor } from "vue2-editor"; 10 11export default { 12 components: { 13 VueEditor 14 }, 15 16 data() { 17 return { 18 htmlForEditor: null 19 }; 20 }, 21 22 methods: { 23 setEditorContent: function() { 24 this.htmlForEditor = "<h1>Html For Editor</h1>"; 25 } 26 } 27}; 28</script>
Example - Using Multiple Editors
1<template> 2 <div id="app"> 3 <vue-editor id="editor1" v-model="editor1Content"></vue-editor> 4 <vue-editor id="editor2" v-model="editor2Content"></vue-editor> 5 </div> 6</template> 7 8<script> 9import { VueEditor } from "vue2-editor"; 10 11export default { 12 components: { 13 VueEditor 14 }, 15 16 data() { 17 return { 18 editor1Content: "<h1>Editor 1 Starting Content</h1>", 19 editor2Content: "<h1>Editor 2 Starting Content</h1>" 20 }; 21 } 22}; 23</script> 24 25<style> 26#editor1, 27#editor2 { 28 height: 350px; 29} 30</style>
Example - Custom Toolbar
1<template> 2 <div id="app"> 3 <vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor> 4 </div> 5</template> 6 7<script> 8import { VueEditor } from "vue2-editor"; 9 10export default { 11 components: { 12 VueEditor 13 }, 14 15 data() { 16 return { 17 content: "<h1>Html For Editor</h1>", 18 customToolbar: [ 19 ["bold", "italic", "underline"], 20 [{ list: "ordered" }, { list: "bullet" }], 21 ["image", "code-block"] 22 ] 23 }; 24 } 25}; 26</script>
Example - Saving The Content
1<template> 2 <div id="app"> 3 <button @click="saveContent"></button> 4 <vue-editor v-model="content"></vue-editor> 5 </div> 6</template> 7 8<script> 9import { VueEditor } from "vue2-editor"; 10 11export default { 12 components: { 13 VueEditor 14 }, 15 16 data() { 17 return { 18 content: "<h3>Initial Content</h3>" 19 }; 20 }, 21 22 methods: { 23 handleSavingContent: function() { 24 // You have the content to save 25 console.log(this.content); 26 } 27 } 28}; 29</script>
Example - Use a Live Preview
1<template> 2 <div id="app"> 3 <vue-editor v-model="content"></vue-editor> 4 <div v-html="content"></div> 5 </div> 6</template> 7 8<script> 9import { VueEditor } from 'vue2-editor' 10 11components: { 12 VueEditor 13}, 14 15export default { 16 data() { 17 return { 18 content: '<h1>Initial Content</h1>' 19 } 20 } 21} 22</script>
How To Use Custom Quill Modules
There are two ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.
Version 1 - Import and Register Yourself
Vue2Editor now exports Quill to assist in this process.
- When importing VueEditor, also import Quill.
- Import your custom modules
- Register the custom modules with Quill
- Add the necessary configuration to the
editorOptions
object
1<template> 2 <div id="app"> 3 <vue-editor 4 :editorOptions="editorSettings" 5 v-model="content"> 6 </div> 7</template> 8 9<script> 10 import { VueEditor, Quill } from 'vue2-editor' 11 import { ImageDrop } from 'quill-image-drop-module' 12 import ImageResize from 'quill-image-resize-module' 13 14 Quill.register('modules/imageDrop', ImageDrop) 15 Quill.register('modules/imageResize', ImageResize) 16 17 export default { 18 components: { 19 VueEditor 20 }, 21 data() { 22 return { 23 content: '<h1>Initial Content</h1>', 24 editorSettings: { 25 modules: { 26 imageDrop: true, 27 imageResize: {} 28 } 29 } 30 } 31 } 32 } 33</script>
Version 2 - You Import | Vue2Editor Registers
(Recommended way)
- Import your custom modules
- Use the
customModules
prop to declare an array of module(s). - Add the necessary configuration for those modules in the
editorOptions
object under modules as seen below
1<template> 2 <div id="app"> 3 <vue-editor 4 :customModules="customModulesForEditor" 5 :editorOptions="editorSettings" 6 v-model="content" 7 > 8 </vue-editor> 9 </div> 10</template> 11 12<script> 13import { VueEditor } from "vue2-editor"; 14import { ImageDrop } from "quill-image-drop-module"; 15import ImageResize from "quill-image-resize-module"; 16 17export default { 18 components: { 19 VueEditor 20 }, 21 data() { 22 return { 23 content: "<h1>Initial Content</h1>", 24 customModulesForEditor: [ 25 { alias: "imageDrop", module: ImageDrop }, 26 { alias: "imageResize", module: ImageResize } 27 ], 28 editorSettings: { 29 modules: { 30 imageDrop: true, 31 imageResize: {} 32 } 33 } 34 }; 35 } 36}; 37</script>
Development
Vue2Editor now uses Poi for development
yarn dev
: Run example in development modeyarn docs
: Development for Docsyarn build
: Build component in both formatyarn lint
: Run eslint
License
MIT
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
0 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 1
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/CLOSE_STALE.yml:1
- Warn: no topLevel permission defined: .github/workflows/manual.yml:1
- Info: no jobLevel write permissions found
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/CLOSE_STALE.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/davidroyer/vue2-editor/CLOSE_STALE.yml/master?enable=pin
- Info: 0 out of 1 GitHub-owned GitHubAction 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 1 are checked with a SAST tool
Reason
144 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-jrvm-mcxc-mf6m
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-jc84-3g44-wf2q
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- 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-3gx7-xhv7-5mx3
- 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-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- 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-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-46fh-8fc5-xcwx
- Warn: Project is vulnerable to: GHSA-h5mp-5q4p-ggf5
- Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- 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-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-p493-635q-r6gr
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-588m-9qg5-35pq
- Warn: Project is vulnerable to: GHSA-4943-9vgg-gr5r
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-7xcx-6wjh-7xp2
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-29xr-v42j-r956
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- 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-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.6
/10
Last Scanned on 2024-12-16
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 MoreOther packages similar to vue2-editor
@wangeditor/editor-for-vue
wangEditor component for vue2.x
vue2-ace-editor
A Vue2.0's component based on ace/brace
@types/vue2-editor
TypeScript definitions for vue2-editor
@ckeditor/ckeditor5-vue2
Official Vue.js 2.x component for CKEditor 5 – the best browser-based rich text editor.