https://github.com/CroudSupport/vue-quill
Quill component for vue
https://github.com/CroudSupport/vue-quill
Last synced: 6 months ago
JSON representation
Quill component for vue
- Host: GitHub
- URL: https://github.com/CroudSupport/vue-quill
- Owner: CroudTech
- License: mit
- Archived: true
- Created: 2016-03-12T13:12:38.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-02-19T08:52:29.000Z (over 6 years ago)
- Last Synced: 2025-04-19T01:44:39.532Z (7 months ago)
- Language: Vue
- Size: 42 KB
- Stars: 121
- Watchers: 5
- Forks: 22
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-vue - vue-quill - vue组件构建quill编辑器 (UI组件)
- awesome-github-vue - vue-quill - vue组件构建quill编辑器 (UI组件)
- awesome-vue - vue-quill - quill?style=social) - vue组件构建quill编辑器 (UI组件)
- awesome - vue-quill - vue组件构建quill编辑器 (UI组件)
README
# vue-quill
[](https://badge.fury.io/js/vue-quill)
A vue component wrapping the quill editor
## Demo
You can view a basic demo of this component in this [CodeSandbox](https://codesandbox.io/s/nnw7rwx48m)
## Installation
```
npm install --save vue-quill
-or-
yarn add vue-quill
```
You will also need to include the following css file in your project
```html
```
## Vue 1
For Vue 1 components use v0.1.5 or earlier
## Usage
Install the vue plugin
```js
import Vue from 'vue'
import VueQuill from 'vue-quill'
Vue.use(VueQuill)
```
### Component
```html
```
You may want to initialize the synced variable as a valid delta object too
```js
data() {
return {
content: {
ops: [],
},
}
}
```
### Configuration
```html
```
You can also provide a config object as described in http://quilljs.com/docs/configuration/
```js
data() {
return {
content: {
ops: [],
},
config: {
readOnly: true,
placeholder: 'Compose an epic...',
},
}
}
```
## Options
By default, the component outputs the content as a delta object, you can pass in a prop to return raw html
```html
```
## Custom Formats
To add custom formats to the editor, you can pass an array of formats as a prop. The array should be in the following format
```js
formats: [
{
name: 'custom',
options: {
attribute: 'custom',
},
},
],
```
## Custom Keybindings
You can add custom keybindings by passing through an array in the props, the array should be in the following format
```js
keyBindings: [
{
key: 's',
method: function(range) {
this.$dispatch('save', this.editor, range)
return false
},
},
]
```
## Events
This quill component emits events when the text or selection changes on the quill editor
```html
methods: {
selectionChange(editor, range) {
if (range) {
if (range.start !== range.end) {
this.selectedText = editor.getText(range.start, range.end)
editor.formatText(range, 'custom', 'hello world')
}
}
},
},
```