MQuillEditor
A quill editor component for vue.
npm
npm install vue-m-quill-editor
use
Vue
<template> <m-quill-editor :width="quill.width" :has-border="quill.border" v-model="quill.content" :sync-output="quill.syncOutput" :theme="quill.theme" :disabled="quill.disabled" :fullscreen="quill.full" :toolbar="quill.toolbar" @upload="upload" ></m-quill-editor></template><script> components: MQuillEditor { 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: { console } </script>
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 的值可以是一下数组:
// [{'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 | 禁用 |