website·Indexed 29 days ago
https://vueup.github.io/vue-quill/A Vue 3 component wrapper for the Quill rich text editor. It supports server-side rendering (SSR), including Nuxt integration with SWR, ISR, and prerendered routes. Features include customizable toolbars, themes (snow and bubble), and support for Delta content via v-model:content.
QuillEditor component with the app instance. This is applicable for both standard browser scripts and Single File Component (SFC) setups.import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import App from './App.vue'
const app = createApp(App)
app.component('QuillEditor', QuillEditor)
app.mount('#app')VueQuill.QuillEditor global variable. For production environments, it is recommended to link to a specific version number rather than @latest to prevent unexpected breakages.<!-- include VueJS first -->
<script src="https://unpkg.com/vue@3"></script>
<!-- use the latest VueQuill release -->
<script src="https://unpkg.com/@vueup/vue-quill@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@latest/dist/vue-quill.snow.prod.css">
<!-- OR point to a specific VueQuill release -->
<script src="https://unpkg.com/@vueup/vue-quill@version"></script>
<link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@version/dist/vue-quill.snow.prod.css">When a package requires formats or blots to be registered before the module itself, use a full registration path in the name field.
blots/ to register a Quill blot. These are not added to the module options.modules/ to register a Quill module. Its options will be passed to Quill as modules.{name}.If you are using the formats option in your editor configuration, ensure you include the name of the custom blot to allow it to be rendered in the editor contents.
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 contents:
const options = {
formats: ['bold', 'italic', 'mention'],
}
QuillEditor component globally, you can define globalOptions to provide default settings across all instances of the editor. This is achieved by overriding the default value of the globalOptions prop on the component definition before registration.import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
const app = createApp()
const globalOptions = {
debug: 'info',
modules: {
toolbar: 'minimal'
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
}
// Set default globalOptions prop
QuillEditor.props.globalOptions.default = () => globalOptions
// Register QuillEditor component
app.component('QuillEditor', QuillEditor)QuillEditor component and include it in the component's components option. You must also import a CSS theme for the editor to render correctly.<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default {
components: {
QuillEditor
}
}
</script>
<template>
<QuillEditor theme="snow" />
</template>document), direct Quill API calls must be executed within browser-only lifecycle hooks. Use the loadQuill function inside onMounted to safely access the Quill instance in an SSR app.<script setup>
import { onMounted } from 'vue'
import { loadQuill } from '@vueup/vue-quill'
onMounted(async () => {
const Quill = await loadQuill()
Quill.register('modules/example', ExampleModule)
})
</script>@vueup/vue-quill package using npm or yarn. This is the recommended installation method when using Vue Single File Components (SFCs).npm install @vueup/vue-quill@latest --save
# OR
yarn add @vueup/vue-quill@latestQuillEditor component renders a stable placeholder element and avoids loading the Quill browser runtime. The actual Quill editor is initialized in the browser only after the component has been mounted by Vue.<script setup>
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const content = ref('<p>Hydrated in the browser.</p>')
</script>
<template>
<QuillEditor
v-model:content="content"
content-type="html"
theme="snow"
toolbar="minimal"
/>
</template>toolbar prop to the CSS selector (e.g., an ID) of your toolbar container. You can place this container inside the #toolbar slot of the QuillEditor component or anywhere else in your template. Use Quill's standard classes (like ql-bold) to map buttons to editor actions.<template>
<!-- Option 1: Using the #toolbar slot -->
<QuillEditor toolbar="#my-toolbar">
<template #toolbar>
<div id="my-toolbar">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button id="custom-button">Custom Action</button>
</div>
</template>
</QuillEditor>
<!-- Option 2: Toolbar outside the component -->
<QuillEditor toolbar="#external-toolbar"></QuillEditor>
<div id="external-toolbar">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
</div>
</template>options or globalOptions objects to customize the editor behavior:{
// DOM Element or CSS selector for confining UI elements (e.g. tooltips). Only considers left/right boundaries.
bounds: document.body,
// Debugging level. Static method affecting all Quill instances on the page. Default: 'warn'.
debug: 'warn',
// Whitelist of allowed formats. See https://quilljs.com/docs/formats/
formats: [],
// Collection of modules and their respective options. See https://quilljs.com/docs/modules/
modules: {},
// Placeholder text shown when editor is empty.
placeholder: 'Text here',
// Whether the editor is instantiated in read-only mode. Default: false.
readOnly: false,
// DOM Element or CSS selector for the container with scrollbars (overflow-y: auto).
// Used to fix scroll jumping when Quill auto-grows and an ancestor handles scrolling.
scrollingContainer: null,
// Theme name: 'bubble' or 'snow'. Requires corresponding stylesheet to be included manually.
theme: 'snow'
}