repository·master·Indexed 23 days ago
https://github.com/vueup/vue-quillA Vue 3 rich text editor component built on the Quill 2 engine. It is fully typed with TypeScript, compatible with SSR environments, and supports content binding via v-model:content using Delta objects, HTML, or plain text. The library provides the QuillEditor component along with utilities like loadQuill for asynchronous browser runtime loading in SSR applications.
VueQuill is a rich text editor component for Vue 3 built on top of Quill 2. Key features include:
The example source demonstrates the following implementation patterns for @vueup/vue-quill:
QuillEditor component.v-model:content to bind HTML strings.Snow, Bubble, and core theme variants.placeholder, read-only, and live enable states.ready, focus, blur, textChange, selectionChange, and editorChange.focus(), setHTML(), and getHTML().When working with this example, you can control whether you are using the local workspace source or the published npm package using environment variables and specific scripts:
By default, npm run dev, npm run build, and npm run generate use the local workspace source from ../../packages/vue-quill (if available). This is useful for validating unreleased changes.
To force the use of the released npm package, use the NUXT_VUE_QUILL_SOURCE=npm environment variable with these commands:
npm run dev:npmnpm run build:npmnpm run generate:npmTo build static output specifically for deployment under /vue-quill/examples/nuxt-app/ on GitHub Pages, use:
npm run generate:pages
In Server-Side Rendering (SSR) applications, you should not access Quill APIs directly during the initial setup as they require a browser environment. Instead, use loadQuill to load the Quill browser runtime asynchronously. This should be called within browser-only lifecycle hooks, such as onMounted in Vue components.
To retrieve the runtime once it has been loaded, you can use getLoadedQuill.
When a package exposes formats or blots that must be registered before the module can function, use a full Quill registration path in the name property.
blots/name to register a Quill blot. These are not added to the module options.modules/name to register a Quill module. The options provided will be passed to Quill as modules.name.If you are using the formats option on QuillEditor, ensure you include the blot name in the allowed formats array so Quill permits those embeds in the editor content.
import { Mention, MentionBlot } from 'quill-mention'
const modules = [
{
name: 'blots/mention',
module: MentionBlot,
},
{
name: 'modules/mention',
module: Mention,
options: {
mentionDenotationChars: ['@'],
source: (searchTerm, renderList) => {
renderList([], searchTerm)
},
},
},
]
// To allow the blot in the editor:
const options = {
formats: ['bold', 'italic', 'mention'],
}⚠️ VueQuill is currently in @beta.
It is not recommended for production use in serious projects yet. The focus is currently on stability and feature completeness. Some features are not finalized and may undergo breaking changes as better solutions are discovered.
When registering the QuillEditor component globally, use the globalOptions prop to set default configurations for all instances. To implement this, you must set the default value of QuillEditor.props.globalOptions before registering the component with your Vue app.
import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
const app = createApp()
// define your options
const globalOptions = {
debug: 'info',
modules: {
toolbar: ['bold', 'italic', 'underline']
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
}
// set default globalOptions prop
QuillEditor.props.globalOptions.default = () => globalOptions
// register QuillEditor component
app.component('QuillEditor', QuillEditor)import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
const app = createApp()
const globalOptions = {
debug: 'info',
modules: {
toolbar: ['bold', 'italic', 'underline']
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
}
QuillEditor.props.globalOptions.default = () => globalOptions
app.component('QuillEditor', QuillEditor)VueQuill provides several built-in toolbar presets to quickly set up common formatting options. You can pass these presets as a string to the toolbar prop:
essential: A basic set of tools.minimal: A minimal set of tools.full: A comprehensive set of tools."" (empty string): Uses the default Quill options.<template>
<QuillEditor toolbar="minimal" .../>
</template>When registering the QuillEditor component locally, use the options prop to pass a configuration object. This object allows you to customize the editor's behavior, modules, and appearance for that specific instance.
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
components: {
QuillEditor
},
data() {
return {
options: {
debug: 'info',
modules: {
toolbar: ['bold', 'italic', 'underline']
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
}
}
},
}In your template, bind the object to the component:
<template>
<QuillEditor :options="options" />
</template>import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
components: {
QuillEditor
},
data() {
return {
options: {
debug: 'info',
modules: {
toolbar: ['bold', 'italic', 'underline']
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
}
}
},
}
// In template:
// <QuillEditor :options="options" />Install the @vueup/vue-quill package using your preferred package manager.
npm install @vueup/vue-quill@latest
# or
yarn add @vueup/vue-quill@latest
# or
pnpm add @vueup/vue-quill@latestFor projects using Single File Components (SFCs), use a package manager to install @vueup/vue-quill. This is the recommended method for modern Vue 3 development.
npm install @vueup/vue-quill@latest --save
# OR
yarn add @vueup/vue-quill@latest