
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
vue-quilly
Advanced tools
[](https://www.npmjs.com/package/vue-quilly) [](https://www.npmjs.com/package/vue-quilly?activeTab=code) [!
Tiny Vue component, that helps to create Quill v2 based WYSIWYG editors in Vue-powered apps. Flexible setup, no styles, ready for further customization.
Default input data format is HTML, but also has Delta 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.
Run demo, that shows editors, builded upon QuillyEditor
component. See demo code.
quill/core
to prevent importing all Quill modulesnpm add quill@2.0.0 vue-quilly
# Or
pnpm add quill@2.0.0 vue-quilly
Import Quill full build if you need all modules or core build with minimum required modules:
import Quill from 'quill' // Full build
import Quill from 'quill/core' // Core build
import { QuillyEditor } from 'vue-quilly'
Add core styles. Also import one of Quill's themes, if you need one:
import 'quill/dist/quill.core.css' // Required
import 'quill/dist/quill.snow.css' // For snow theme (optional)
import 'quill/dist/quill.bubble.css' // For bubble theme (optional)
Define Quill options:
const options = {
theme: 'snow', // If you need Quill theme
modules: {
toolbar: true,
},
placeholder: 'Compose an epic...',
readOnly: false
}
Initialize the editor:
const editor = ref<InstanceType<typeof QuillyEditor>>()
const model = ref<string>('<p>Hello Quilly!</p>')
// Quill instance
let quill: Quill | null = null
onMounted(() => {
quill = editor.value?.initialize(Quill)!
})
<QuillyEditor
ref="editor"
v-model="model"
:options="options"
@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)"
/>
Use v-model
for HTML content type. You can set content in Delta format using Quill instance:
quill?.setContents(
new Delta()
.insert('Hello')
.insert('\n', { header: 1 })
.insert('Some ')
.insert('initial', { bold: true })
.insert(' ')
.insert('content', { underline: true })
.insert('\n')
)
Creating editors with QullyEditor
demo
The component emits text-change
, selection-change
, editor-change
events, similar to Quill events.
All events types:
Event name | Params |
---|---|
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 |
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
FAQs
[](https://www.npmjs.com/package/vue-quilly) [](https://www.npmjs.com/package/vue-quilly?activeTab=code) [!
The npm package vue-quilly receives a total of 2,218 weekly downloads. As such, vue-quilly popularity was classified as popular.
We found that vue-quilly demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.