README.md 8.08 KB
Newer Older
surmon's avatar
surmon committed
1
[![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)
surmon's avatar
surmon committed
2
[![Build Status](https://travis-ci.org/surmon-china/vue-quill-editor.svg?branch=master)](https://travis-ci.org/surmon-china/vue-quill-editor)
surmon's avatar
surmon committed
3
4
[![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)
surmon's avatar
surmon committed
5
6
7
8
[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-quill-editor.svg?style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/surmon-china/vue-quill-editor)
[![](https://badge.juejin.im/entry/5852b6fc61ff4b006c89b49d/likes.svg?style=flat-square)](https://juejin.im/entry/5852b6fc61ff4b006c89b49d/detail)
surmon's avatar
ok    
surmon committed
9

surmon's avatar
surmon committed
10
[![NPM](https://nodei.co/npm/vue-quill-editor.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-quill-editor/)
surmon's avatar
surmon committed
11
[![NPM](https://nodei.co/npm-dl/vue-quill-editor.png?months=9&height=3)](https://nodei.co/npm/vue-quill-editor/)
surmon's avatar
surmon committed
12
13
14


# Vue-Quill-Editor
surmon's avatar
surmon committed
15
🍡Quill editor component for Vue, support SPA and SSR.
surmon's avatar
update    
surmon committed
16

surmon's avatar
surmon committed
17
基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。
surmon's avatar
surmon committed
18
19


surmon's avatar
update    
surmon committed
20
## Example
surmon's avatar
update    
surmon committed
21

surmon's avatar
surmon committed
22
23
[Demo Page](https://surmon-china.github.io/vue-quill-editor/)

surmon's avatar
update    
surmon committed
24
[CDN Example](https://jsfiddle.net/tng9r8j3/)
surmon's avatar
update    
surmon committed
25

surmon's avatar
surmon committed
26
27
[Nuxt.js/SSR example code](https://github.com/surmon-china/vue-quill-editor/blob/master/examples/nuxt-ssr-example)

mahnouman's avatar
mahnouman committed
28
#### Projects Using Vue-Quill-Editor
29
30
[Tamiat CMS](https://github.com/tamiat/tamiat/)

surmon's avatar
update    
surmon committed
31

surmon's avatar
update    
surmon committed
32
## Install
surmon's avatar
surmon committed
33

surmon's avatar
update    
surmon committed
34
#### CDN
surmon's avatar
update    
surmon committed
35
36
37
38
39
40
41
42
43

``` html
<link rel="stylesheet" href="path/to/quill.core.css"/>
<link rel="stylesheet" href="path/to/quill.snow.css"/>
<link rel="stylesheet" href="path/to/quill.bubble.css"/>
<script type="text/javascript" src="path/to/quill.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
<script type="text/javascript">
surmon's avatar
surmon committed
44
  Vue.use(window.VueQuillEditor)
surmon's avatar
update    
surmon committed
45
46
</script>
```
surmon's avatar
surmon committed
47

surmon's avatar
update    
surmon committed
48
#### NPM
surmon's avatar
update    
surmon committed
49
50
51
52
53

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

surmon's avatar
surmon committed
54
### Mount
surmon's avatar
surmon committed
55

surmon's avatar
update    
surmon committed
56
#### mount with global
surmon's avatar
update    
surmon committed
57

surmon's avatar
surmon committed
58
59
60
61
``` javascript
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

surmon's avatar
surmon committed
62
// require styles
surmon's avatar
update    
surmon committed
63
64
65
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
surmon's avatar
surmon committed
66

surmon's avatar
surmon committed
67
Vue.use(VueQuillEditor, /* { default global options } */)
surmon's avatar
update    
surmon committed
68
```
surmon's avatar
surmon committed
69

surmon's avatar
update    
surmon committed
70
#### mount with component
surmon's avatar
update    
surmon committed
71
72

```javascript
surmon's avatar
update    
surmon committed
73
// require styles
surmon's avatar
surmon committed
74
75
76
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
surmon's avatar
update    
surmon committed
77

surmon's avatar
surmon committed
78
79
80
81
82
83
84
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}
surmon's avatar
update    
surmon committed
85
86
```

surmon's avatar
update    
surmon committed
87
#### mount with ssr
surmon's avatar
surmon committed
88

surmon's avatar
update    
surmon committed
89
```javascript
surmon's avatar
update    
surmon committed
90
// if used in nuxt.js/ssr, you should keep require it only in browser build environment
surmon's avatar
surmon committed
91
if (process.browser) {
surmon's avatar
surmon committed
92
  const VueQuillEditor = require('vue-quill-editor/dist/ssr')
Surmon's avatar
Surmon committed
93
  Vue.use(VueQuillEditor, /* { default global options } */)
surmon's avatar
surmon committed
94
}
surmon's avatar
update    
surmon committed
95
96
```

surmon's avatar
update    
surmon committed
97
#### register quill module
surmon's avatar
surmon committed
98

surmon's avatar
update    
surmon committed
99
```javascript
surmon's avatar
surmon committed
100
// register quill modules, you need to introduce and register before the vue program is instantiated
surmon's avatar
update    
surmon committed
101
import Quill from 'quill'
surmon's avatar
update    
surmon committed
102
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
surmon's avatar
surmon committed
103
Quill.register('modules/yourQuillModule', yourQuillModule)
surmon's avatar
surmon committed
104
105
```

surmon's avatar
surmon committed
106
### Difference(使用方法的区别)
surmon's avatar
surmon committed
107

surmon's avatar
update    
surmon committed
108
**SSR and the only difference in the use of the SPA:**
surmon's avatar
update    
surmon committed
109
110
- SPA worked by the `component`, find quill instance by `ref attribute`.
- SSR worked by the `directive`, find quill instance by `directive arg`.
surmon's avatar
update    
surmon committed
111
- Other configurations, events are the same.
surmon's avatar
surmon committed
112

surmon's avatar
surmon committed
113
### SSR
surmon's avatar
surmon committed
114
115
116
117
118
119
120
121
122
123

``` vue
<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
<template>
  <!-- bidirectional data binding(双向数据绑定) -->
  <div class="quill-editor" 
       v-model="content"
       v-quill:myQuillEditor="editorOption">
  </div>

surmon's avatar
surmon committed
124
  <!-- Or manually control the data synchronization(手动控制数据流)  -->
surmon's avatar
surmon committed
125
126
127
128
129
130
131
132
133
  <div class="quill-editor" 
       :content="content"
       @change="onEditorChange($event)"
       v-quill:myQuillEditor="editorOption">
  </div>
</template>

<script>
  export default {
surmon's avatar
surmon committed
134
135
136
137
138
139
    data() {
      return {
        content: '<p>example content</p>',
        editorOption: { /* quill options */ }
      }
    },
surmon's avatar
surmon committed
140
141
    mounted() {
      console.log('this is current quill instance object', this.myQuillEditor)
surmon's avatar
surmon committed
142
143
144
145
146
    },
    methods: {
      onEditorChange(event) {
        console.log('onEditorChange')
      }
surmon's avatar
surmon committed
147
    },
surmon's avatar
surmon committed
148
149
150
151
    // Omit the same parts as in the following component sample code
    // ...
  }
</script>
surmon's avatar
surmon committed
152
153
154
```


surmon's avatar
surmon committed
155
### SPA
surmon's avatar
surmon committed
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

``` vue
<template>
  <!-- bidirectional data binding(双向数据绑定) -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>

  <!-- Or manually control the data synchronization(或手动控制数据流) -->
  <quill-editor :content="content"
                :options="editorOption"
                @change="onEditorChange($event)">
  </quill-editor>
</template>

<script>
surmon's avatar
update    
surmon committed
176
177

  // you can also register quill modules in the component
surmon's avatar
surmon committed
178
179
180
181
182
183
184
185
186
187
188
  import Quill from 'quill'
  import { someModule } from '../yourModulePath/someQuillModule.js'
  Quill.register('modules/someModule', someModule)
  
  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // some quill options
        }
surmon's avatar
surmon committed
189
190
      }
    },
surmon's avatar
surmon committed
191
    // manually control the data synchronization
surmon's avatar
surmon committed
192
193
    // 如果需要手动控制数据同步,父组件需要显式地处理changed事件
    methods: {
surmon's avatar
surmon committed
194
195
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
surmon's avatar
surmon committed
196
      },
surmon's avatar
surmon committed
197
198
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
surmon's avatar
surmon committed
199
      },
surmon's avatar
surmon committed
200
201
      onEditorReady(quill) {
        console.log('editor ready!', quill)
surmon's avatar
surmon committed
202
      },
surmon's avatar
surmon committed
203
204
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
surmon's avatar
surmon committed
205
206
        this.content = html
      }
surmon's avatar
surmon committed
207
    },
surmon's avatar
surmon committed
208
209
210
211
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
surmon's avatar
surmon committed
212
    },
surmon's avatar
surmon committed
213
214
    mounted() {
      console.log('this is current quill instance object', this.editor)
surmon's avatar
surmon committed
215
216
    }
  }
surmon's avatar
surmon committed
217
</script>
surmon's avatar
surmon committed
218
219
```

surmon's avatar
surmon committed
220

surmon's avatar
update    
surmon committed
221
## Modules
surmon's avatar
update    
surmon committed
222
- [quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)
surmon's avatar
surmon committed
223
- [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)
surmon's avatar
update    
surmon committed
224
- [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)
surmon's avatar
surmon committed
225
- [quilljs-table](https://github.com/dost/quilljs-table)
surmon's avatar
update    
surmon committed
226
- [more modules...](https://github.com/search?o=desc&q=quill+module&s=stars&type=Repositories&utf8=%E2%9C%93)
surmon's avatar
surmon committed
227

surmon's avatar
surmon committed
228

surmon's avatar
update    
surmon committed
229
## Issues
surmon's avatar
surmon committed
230
- [Add attributes from toolbar options](https://github.com/quilljs/quill/issues/1084)
surmon's avatar
surmon committed
231
- [Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)
surmon's avatar
surmon committed
232
233
- [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https://github.com/surmon-china/vue-quill-editor/issues/39)
- [配合 element-ui 实现上传图片/视频到七牛 demo](https://github.com/surmon-china/vue-quill-editor/issues/102)
234
- [How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR](https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411)
surmon's avatar
surmon committed
235

Surmon's avatar
Surmon committed
236

surmon's avatar
update    
surmon committed
237
## Quill documents
surmon's avatar
surmon committed
238
239
240
[Api docs](https://quilljs.com/docs/quickstart/)


surmon's avatar
update    
surmon committed
241
## Author
Surmon's avatar
Surmon committed
242
[Surmon](https://surmon.me)