Installations
npm install vue-quill-editor
Developer Guide
Typescript
No
Module System
CommonJS
Min. Node Version
>= 4.0.0
Node Version
9.0.0
NPM Version
5.7.1
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (90.73%)
Vue (9.27%)
Developer
Download Statistics
Total Downloads
12,568,958
Last Day
5,842
Last Week
28,142
Last Month
138,364
Last Year
2,014,359
GitHub Statistics
7,407 Stars
148 Commits
1,028 Forks
109 Watching
1 Branches
12 Contributors
Bundle Size
214.26 kB
Minified
46.48 kB
Minified + Gzipped
Package Meta Information
Latest Version
3.0.6
Package Id
vue-quill-editor@3.0.6
Size
10.44 kB
NPM Version
5.7.1
Node Version
9.0.0
Publised On
09 Apr 2018
Total Downloads
Cumulative downloads
Total Downloads
12,568,958
Last day
-23.6%
5,842
Compared to previous day
Last week
-26.6%
28,142
Compared to previous week
Last month
-5.9%
138,364
Compared to previous month
Last year
-10.5%
2,014,359
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
73
Vue-Quill-Editor
????Quill editor component for Vue, support SPA and SSR.
基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。
Example
Projects Using Vue-Quill-Editor
Install
CDN
1<link rel="stylesheet" href="path/to/quill.core.css"/> 2<link rel="stylesheet" href="path/to/quill.snow.css"/> 3<link rel="stylesheet" href="path/to/quill.bubble.css"/> 4<script type="text/javascript" src="path/to/quill.js"></script> 5<script type="text/javascript" src="path/to/vue.min.js"></script> 6<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script> 7<script type="text/javascript"> 8 Vue.use(window.VueQuillEditor) 9</script>
NPM
1npm install vue-quill-editor --save
Mount
mount with global
1import Vue from 'vue' 2import VueQuillEditor from 'vue-quill-editor' 3 4// require styles 5import 'quill/dist/quill.core.css' 6import 'quill/dist/quill.snow.css' 7import 'quill/dist/quill.bubble.css' 8 9Vue.use(VueQuillEditor, /* { default global options } */)
mount with component
1// require styles 2import 'quill/dist/quill.core.css' 3import 'quill/dist/quill.snow.css' 4import 'quill/dist/quill.bubble.css' 5 6import { quillEditor } from 'vue-quill-editor' 7 8export default { 9 components: { 10 quillEditor 11 } 12}
mount with ssr
1// if used in nuxt.js/ssr, you should keep require it only in browser build environment 2if (process.browser) { 3 const VueQuillEditor = require('vue-quill-editor/dist/ssr') 4 Vue.use(VueQuillEditor, /* { default global options } */) 5}
register quill module
1// register quill modules, you need to introduce and register before the vue program is instantiated 2import Quill from 'quill' 3import yourQuillModule from '../yourModulePath/yourQuillModule.js' 4Quill.register('modules/yourQuillModule', yourQuillModule)
Difference(使用方法的区别)
SSR and the only difference in the use of the SPA:
- SPA worked by the
component
, find quill instance byref attribute
. - SSR worked by the
directive
, find quill instance bydirective arg
. - Other configurations, events are the same.
SSR
1<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component --> 2<template> 3 <!-- bidirectional data binding(双向数据绑定) --> 4 <div class="quill-editor" 5 v-model="content" 6 v-quill:myQuillEditor="editorOption"> 7 </div> 8 9 <!-- Or manually control the data synchronization(手动控制数据流) --> 10 <div class="quill-editor" 11 :content="content" 12 @change="onEditorChange($event)" 13 v-quill:myQuillEditor="editorOption"> 14 </div> 15</template> 16 17<script> 18 export default { 19 data() { 20 return { 21 content: '<p>example content</p>', 22 editorOption: { /* quill options */ } 23 } 24 }, 25 mounted() { 26 console.log('this is current quill instance object', this.myQuillEditor) 27 }, 28 methods: { 29 onEditorChange(event) { 30 console.log('onEditorChange') 31 } 32 }, 33 // Omit the same parts as in the following component sample code 34 // ... 35 } 36</script>
SPA
1<template> 2 <!-- bidirectional data binding(双向数据绑定) --> 3 <quill-editor v-model="content" 4 ref="myQuillEditor" 5 :options="editorOption" 6 @blur="onEditorBlur($event)" 7 @focus="onEditorFocus($event)" 8 @ready="onEditorReady($event)"> 9 </quill-editor> 10 11 <!-- Or manually control the data synchronization(或手动控制数据流) --> 12 <quill-editor :content="content" 13 :options="editorOption" 14 @change="onEditorChange($event)"> 15 </quill-editor> 16</template> 17 18<script> 19 20 // you can also register quill modules in the component 21 import Quill from 'quill' 22 import { someModule } from '../yourModulePath/someQuillModule.js' 23 Quill.register('modules/someModule', someModule) 24 25 export default { 26 data () { 27 return { 28 content: '<h2>I am Example</h2>', 29 editorOption: { 30 // some quill options 31 } 32 } 33 }, 34 // manually control the data synchronization 35 // 如果需要手动控制数据同步,父组件需要显式地处理changed事件 36 methods: { 37 onEditorBlur(quill) { 38 console.log('editor blur!', quill) 39 }, 40 onEditorFocus(quill) { 41 console.log('editor focus!', quill) 42 }, 43 onEditorReady(quill) { 44 console.log('editor ready!', quill) 45 }, 46 onEditorChange({ quill, html, text }) { 47 console.log('editor change!', quill, html, text) 48 this.content = html 49 } 50 }, 51 computed: { 52 editor() { 53 return this.$refs.myQuillEditor.quill 54 } 55 }, 56 mounted() { 57 console.log('this is current quill instance object', this.editor) 58 } 59 } 60</script>
Modules
- quill-image-extend-module
- quill-image-resize-module
- quill-image-drop-module
- quilljs-table
- more modules...
Issues
- Add attributes from toolbar options
- Option to insert an image from a URL
- How vue-quill-editor combine with the syntax highlighter module of highlight.js
- 配合 element-ui 实现上传图片/视频到七牛 demo
- How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR
Quill documents
Author
No vulnerabilities found.
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 existing vulnerabilities detected
Reason
Found 4/26 approved changesets -- score normalized to 1
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
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 'main'
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
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 8 are checked with a SAST tool
Score
3.2
/10
Last Scanned on 2025-01-27
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