README.md · dukexia/vue-quill-editor

[![GitHub issues](https://img.shields.io/github/issues/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/issues)
[![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/network)
[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/stargazers)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/surmon-china/vue-quill-editor/master/LICENSE)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-quill-editor.svg?style=social?style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/surmon-china/vue-quill-editor)

[![NPM](https://nodei.co/npm/vue-quill-editor.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-quill-editor/)
[![NPM](https://nodei.co/npm-dl/vue-quill-editor.png?months=9&height=3)](https://nodei.co/npm/vue-quill-editor/)

# Vue-Quill-Editor
🍡Quill editor component for Vue2, support SPA and SSR.

基于Quill、适用于Vue2的富文本编辑器，支持服务端渲染和单页应用。

# Example
[Demo Page](https://surmon-china.github.io/vue-quill-editor/)

# Update
This component is a simple and lightweight editor. It doesn't depend on any other resources except quill core and css. Quill is an open source prototypical editor which has a powerful extension API and module registration function. If you need any other attached functions, please program on your own or use other extention modules. Finally, please don't ask the questions like whether i can realize some function in the editor or why not. Thanks.

# Use Setup

### Install vue-quill-editor

``` bash
npm install vue-quill-editor --save
```

### Vue mount

``` javascript
// import
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// or require
var Vue = require('vue')
var VueQuillEditor = require('vue-quill-editor')

// mount with global
Vue.use(VueQuillEditor)

// If used in Nuxt.js/SSR, you should keep it only in browser build environment
if (process.BROWSER_BUILD) {
  const VueQuillEditor = require('vue-quill-editor/ssr')
  Vue.use(VueQuillEditor)
}

// if you need register quill modules, you need to introduce and register before the vue program is instantiated
import Quill from 'quill'
import { yourQuillModule } from '../yourModulePath/yourQuillModule.js'
Quill.register('modules/yourQuillModule', yourQuillModule)

// mount with component(can't work in Nuxt.js/SSR)
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}
```

### Use the difference（使用方法的区别）

**SSR and the only difference in the use of the SPA:**
- SPA worked by the `component`, find quill instance by `ref attribute`.
- SSR worked by the `directive`, find quill instance by `directive arg`.
- Other configurations, events are the same.

### Use in SSR

``` vue

<template>
  
  <div class="quill-editor" 
       v-model="content"
       v-quill:myQuillEditor="editorOption">
  </div>

<div class="quill-editor" 
       :content="content"
       @change="onEditorChange($event)"
       v-quill:myQuillEditor="editorOption">
  </div>
</template>

### Use in SPA

``` vue
<template>
  
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>

<quill-editor :content="content"
                :options="editorOption"
                @change="onEditorChange($event)">
  </quill-editor>
</template>

# Some extendings of quill
- [Quill - Issues - Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)
- [Quill - Issues - Image Resize](https://github.com/quilljs/quill/issues/104)
- [Quill - Modules - ImageImport and ImageResize](https://www.webpackbin.com/bins/-Ket3Oz1330Cy0MbddU3)
- [Quill - toolbar - attributes](https://github.com/quilljs/quill/issues/1084)
- [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)

# Quill Config
[Api docs](https://quilljs.com/docs/quickstart/)

# Author Blog
[Surmon](https://surmon.me)

dukexia/vue-quill-editor

简介

发行版

贡献者

近期动态

dukexia/vue-quill-editor .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

dukexia/vue-quill-editor