- Notifications
You must be signed in to change notification settings - Fork6
Tiny Vue component, that helps to create Quill v2 based WYSIWYG editors
License
alekswebnet/vue-quilly
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Tiny Vue component, that helps to createQuill v2 based WYSIWYG editors in Vue-powered apps.Flexible setup, no styles, ready for further customization.
Default input data format is HTML, but also hasDelta support - using Quill API and exposed Quill instance.In short, HTML and Delta inputs works in a same way, you can use one of them or both formats to change editor data model.
It's not a all-in-one solution and requires further Quill configuration.In other hand, you can build your own editor, that matches your needs, with easy.No matter if you want to create full-featured editor with all Quill's modules or small custom solution with extra functionality, you can use this package as a base start point:
- Rundemo, that shows editors, builded upon
QuillyEditorcomponent. - See editorsexample.
- Create editors withNuxt 3.
- Builded on top ofQuill v2 and Vue 3
- Uses
quill/coreto prevent importing all Quill modules - Works with both HTML and Quill Delta format
- Typescript support
Browser:
<!-- Include Quill 2 --><linkhref="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script><!-- Import Vue and vue-quilly --><scripttype="importmap">{"imports":{"vue":"https://unpkg.com/vue@3/dist/vue.esm-browser.js","vue-quilly":"https://unpkg.com/vue-quilly@1.1.3/dist/vue-quilly.js"}}</script><!-- Initialize the editor --><divid="app"><quilly-editorref="editor"v-model="model":options="options"/></div><scripttype="module">import{createApp,ref,onMounted}from'vue'import{QuillyEditor}from'vue-quilly'createApp({setup(){constoptions={theme:'snow',modules:{toolbar:true,},placeholder:'Compose an epic...',readOnly:false}consteditor=ref()constmodel=ref('<p>Hello Quilly!</p>')letquill=nullonMounted(()=>{quill=editor.value.initialize(Quill)})return{ editor, options, model}}}).component('QuillyEditor',QuillyEditor).mount('#app')</script>
Browser setup demo -https://codepen.io/redrobot753/pen/VwJwPLP
Bundlers:
npm install quill vue-quilly# Oryarn add quill vue-quilly# Orpnpm add quill vue-quilly
Import Quill full build if you need all modules orcore build with minimum required modules:
importQuillfrom'quill'// Full buildimportQuillfrom'quill/core'// Core buildimport{QuillyEditor}from'vue-quilly'
Add core styles. Also import one of Quill'sthemes, if you need one:
import'quill/dist/quill.core.css'// Requiredimport'quill/dist/quill.snow.css'// For snow theme (optional)import'quill/dist/quill.bubble.css'// For bubble theme (optional)
Define Quilloptions:
constoptions={theme:'snow',// If you need Quill thememodules:{toolbar:true,},placeholder:'Compose an epic...',readOnly:false}
Initialize the editor:
consteditor=ref<InstanceType<typeofQuillyEditor>>()constmodel=ref<string>('<p>Hello Quilly!</p>')// Quill instanceletquill:Quill|null=nullonMounted(()=>{quill=editor.value?.initialize(Quill)!})
<QuillyEditorref="editor"v-model="model":options="options"@update:modelValue="(value) => console.log('HTML model updated:', value)"@text-change="({ delta, oldContent, source }) => console.log('text-change', delta, oldContent, source)"@selection-change="({ range, oldRange, source }) => console.log('selection-change', range, oldRange, source)"@editor-change="(eventName) => console.log('editor-change', `eventName: ${eventName}`)"@focus="(quill) => console.log('focus', quill)"@blur="(quill) => console.log('blur', quill)"@ready="(quill) => console.log('ready', quill)"/>
v-model for HTML content type. The received content is equal to Quill's editor elementinnerHTML property value.
In some cases it will be better to usequill.semanticHTML() to get a clean HTML output. For doing this just set a property:is-semantic-html-model="true". SeeSemanticHTMLEditor example.
Also you can set content in Delta format using Quill instance:
quill?.setContents(newDelta().insert('Hello').insert('\n',{header:1}).insert('Some ').insert('initial',{bold:true}).insert(' ').insert('content',{underline:true}).insert('\n'))
This is just basic example and shows you how to build your editor.See creating editors withQullyEditorexample or rundemo.
The component emitstext-change,selection-change,editor-change events, similar toQuill events.
All events types:
| Event name | Params |
|---|---|
update:modelValue | value:string |
text-change | { delta:Delta, oldContent:Delta, source:EmitterSource } |
selection-change | { range:Range, oldRange:Range, source:EmitterSource } |
editor-change | eventName:string |
focus | quill:Quill |
blur | quill:Quill |
ready | quill:Quill |
SeeNuxt 3 example.
https://github.com/quilljs/quill
https://github.com/surmon-china/vue-quill-editor
https://github.com/vueup/vue-quill
https://www.matijanovosel.com/blog/making-and-publishing-components-with-vue-3-and-vite
About
Tiny Vue component, that helps to create Quill v2 based WYSIWYG editors
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.