m-quill-editor

KO | EN

gitlite — search

#python #hacktoberfest #llm #golang #deep-learning #linux #nodejs #java #windows #cli #kubernetes #vue #ios #mcp

(★ 8)

A quill editor component for vue.

m-quill-editor 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## MQuillEditor

A quill editor component for vue.

[Example](https://mengdu.github.io/m-quill-editor/example/)

![img](https://raw.githubusercontent.com/mengdu/m-quill-editor/master/20180610000744.png)

npm

```ls
npm install vue-m-quill-editor
```

use

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

Vue.use(MQuillEditor)
```

```js
<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

**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/)

m-quill-editor

m-quill-editor 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

m-quill-editor

m-quill-editor 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README