Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 91 Commits
demo		demo
nuxt		nuxt
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Repository files navigation

vue-quilly

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 uponQuillyEditor component.
See editorsexample.
Create editors withNuxt 3.

Features

Builded on top ofQuill v2 and Vue 3
Usesquill/core to prevent importing all Quill modules
Works with both HTML and Quill Delta format
Typescript support

Setup

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)"/>

⚠️ Usev-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.

Events

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`