https://github.com/mengdu/m-quill-editor
A quill editor component for vue.
https://github.com/mengdu/m-quill-editor
m-quill-editor quill quill-editor vue-quill-editor
Last synced: about 1 month ago
JSON representation
A quill editor component for vue.
- Host: GitHub
- URL: https://github.com/mengdu/m-quill-editor
- Owner: mengdu
- License: mit
- Created: 2018-06-07T16:18:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-03T14:34:41.000Z (about 7 years ago)
- Last Synced: 2025-08-09T18:45:59.913Z (2 months ago)
- Topics: m-quill-editor, quill, quill-editor, vue-quill-editor
- Language: JavaScript
- Homepage: https://mengdu.github.io/m-quill-editor/example/
- Size: 1.07 MB
- Stars: 8
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## MQuillEditor
A quill editor component for vue.
[Example](https://mengdu.github.io/m-quill-editor/example/)
npm
```ls
npm install vue-m-quill-editor
```
use
```js
import MQuillEditor from 'vue-m-quill-editor'
Vue.use(MQuillEditor)
```
```js
import MQuillEditor from 'm-quill-editor'
export default {
components: {
MQuillEditor
},
data () {
return {
pkg,
quill: {
width: 800,
border: false,
content: 'wellcome ~',
syncOutput: false,
theme: 'snow', //bubble snow
disabled: false,
full: false,
toolbar: [
[{ 'header': 1 }, { 'header': 2 }],
['bold', 'italic', 'underline', 'strike', 'link']
]
}
}
},
methods: {
upload (file, insert) {
console.log(file)
insert('https://avatars0.githubusercontent.com/u/11366654?s=460&v=4', 'center')
}
}
}
```
## MQuillEditor Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value | 内容 | string | — | — |
| width | 宽度 | number | — | — |
| height | 高度 | number | — | — |
| placeholder | 占位符 | string | — | 在这里输入内容... |
| toolbar | 工具栏配置 | object | — | |
| zIndex | 编辑器z-index值 | string | — | 1000 |
| fullscreen | 是否全屏 | boolean | true/false | false |
| show-full-button | 是否显示全屏按钮 | boolean | true/false | true |
| syncOutput | 是否同步value（同步到v-model） | boolean | true/false | false |
| theme | 主题 | string | bubble/snow | snow |
| has-border | 是否显示边框 | boolean | true/false | false |
| disabled | 禁用 | boolean | true/false | false |
| img-accept | 图片输入框 `accept` 属性 | string | — | 空 |
**toolbar 的值可以是一下数组:**
```js
[
// [{'size': ['small', false, 'large', 'huge']}],
['bold', 'italic', 'underline', 'strike', 'link', {'header': [1, 2, 3, 4, 5, 6, false]}],
// [{ 'header': 1 }, { 'header': 2 }],
// [{'header': [1, 2, 3, 4, 5, 6, false]}],
['blockquote', 'code-block'],
[{'list': 'ordered'}, {'list': 'bullet'}],
// [{ 'script': 'sub'}, { 'script': 'super' }],
// [{ 'indent': '-1'}, { 'indent': '+1' }],
// [{ 'direction': 'rtl' }],
[{'color': []}, {'background': []}],
// [{align: []}],
// [{ 'align': [false, 'right', 'center', 'justify'] }],
[{align: ''}, {align: 'right'}, {align: 'center'}, {align: 'justify'}],
['image', 'video'],
['clean']
]
```
## MQuillEditor Events
| 事件 | 说明 |参数 |
|---------- |-------- |----------|
| init | 初始化 | quill, MQuillEditor |
| blur | 失去焦点 | — |
| focus | 获取焦点 | — |
| change | 内容改变 | — |
| upload | 选择图片 | File, quill.insertImage |
## MQuillEditor Methods
| 名称 | 说明 |参数 |
|---------- |-------- |----------|
| setContent | 设置html | html |
| getContent | 获取html | |
| setDisabled | 禁用 | |
## other
[Quill](https://quilljs.com/)
[Quill Github](https://github.com/quilljs/quill)
[Quill API](https://quilljs.com/docs/quickstart/)