mengdu / m-quill-editor

A quill editor component for vue.

MQuillEditor

A quill editor component for vue.

Example

npm

npm install vue-m-quill-editor

use

import MQuillEditor from 'vue-m-quill-editor'

Vue.use(MQuillEditor)

<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>
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')
    }
  }
}
</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	禁用

other

Quill

Quill Github

Quill API

m-quill-editor's Issues

支持图片url方式插入图片

mark

图片尺寸缩放工具存在bug

• 时有时无
• z-index不支持配置

感觉像。。 vue-quii-editor 的改样式。。

Upload event

Hey!
I've got a question about the 'Upload event'.

So when I was messing with your demo, I noticed that the upload event fires up only when you upload an image by clicking on the 'upload button', but when I drag'n'drop the image on top of the text editor, it does not. And instead of running that function you wrote, it just inserts the dragged image.

So is this a bug? Or there are ways to prevent that from happening?