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)
|
2 | [![Build Status](https://travis-ci.org/surmon-china/vue-quill-editor.svg?branch=master)](https://travis-ci.org/surmon-china/vue-quill-editor)
|
3 | [![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)
|
4 | [![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)
|
5 | [![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor)
|
6 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor)
|
7 | [![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)
|
8 | [![](https://badge.juejin.im/entry/5852b6fc61ff4b006c89b49d/likes.svg?style=flat-square)](https://juejin.im/entry/5852b6fc61ff4b006c89b49d/detail)
|
9 |
|
10 | [![NPM](https://nodei.co/npm/vue-quill-editor.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-quill-editor/)
|
11 | [![NPM](https://nodei.co/npm-dl/vue-quill-editor.png?months=9&height=3)](https://nodei.co/npm/vue-quill-editor/)
|
12 |
|
13 |
|
14 | # Vue-Quill-Editor
|
15 | 🍡Quill editor component for Vue, support SPA and SSR.
|
16 |
|
17 | 基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。
|
18 |
|
19 |
|
20 | ## Example
|
21 |
|
22 | [Demo Page](https://surmon-china.github.io/vue-quill-editor/)
|
23 |
|
24 | [CDN Example](https://jsfiddle.net/tng9r8j3/)
|
25 |
|
26 | [Nuxt.js/SSR example code](https://github.com/surmon-china/vue-quill-editor/blob/master/examples/nuxt-ssr-example)
|
27 |
|
28 | #### Projects Using Vue-Quill-Editor
|
29 | [Tamiat CMS](https://github.com/tamiat/tamiat/)
|
30 |
|
31 |
|
32 | ## Install
|
33 |
|
34 | #### CDN
|
35 |
|
36 | ``` html
|
37 | <link rel="stylesheet" href="path/to/quill.core.css"/>
|
38 | <link rel="stylesheet" href="path/to/quill.snow.css"/>
|
39 | <link rel="stylesheet" href="path/to/quill.bubble.css"/>
|
40 | <script type="text/javascript" src="path/to/quill.js"></script>
|
41 | <script type="text/javascript" src="path/to/vue.min.js"></script>
|
42 | <script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
|
43 | <script type="text/javascript">
|
44 | Vue.use(window.VueQuillEditor)
|
45 | </script>
|
46 | ```
|
47 |
|
48 | #### NPM
|
49 |
|
50 | ``` bash
|
51 | npm install vue-quill-editor --save
|
52 | ```
|
53 |
|
54 | ### Mount
|
55 |
|
56 | #### mount with global
|
57 |
|
58 | ``` javascript
|
59 | import Vue from 'vue'
|
60 | import VueQuillEditor from 'vue-quill-editor'
|
61 |
|
62 | // require styles
|
63 | import 'quill/dist/quill.core.css'
|
64 | import 'quill/dist/quill.snow.css'
|
65 | import 'quill/dist/quill.bubble.css'
|
66 |
|
67 | Vue.use(VueQuillEditor, /* { default global options } */)
|
68 | ```
|
69 |
|
70 | #### mount with component
|
71 |
|
72 | ```javascript
|
73 | // require styles
|
74 | import 'quill/dist/quill.core.css'
|
75 | import 'quill/dist/quill.snow.css'
|
76 | import 'quill/dist/quill.bubble.css'
|
77 |
|
78 | import { quillEditor } from 'vue-quill-editor'
|
79 |
|
80 | export default {
|
81 | components: {
|
82 | quillEditor
|
83 | }
|
84 | }
|
85 | ```
|
86 |
|
87 | #### mount with ssr
|
88 |
|
89 | ```javascript
|
90 | // if used in nuxt.js/ssr, you should keep require it only in browser build environment
|
91 | if (process.browser) {
|
92 | const VueQuillEditor = require('vue-quill-editor/dist/ssr')
|
93 | Vue.use(VueQuillEditor, /* { default global options } */)
|
94 | }
|
95 | ```
|
96 |
|
97 | #### register quill module
|
98 |
|
99 | ```javascript
|
100 | // register quill modules, you need to introduce and register before the vue program is instantiated
|
101 | import Quill from 'quill'
|
102 | import yourQuillModule from '../yourModulePath/yourQuillModule.js'
|
103 | Quill.register('modules/yourQuillModule', yourQuillModule)
|
104 | ```
|
105 |
|
106 | ### Difference(使用方法的区别)
|
107 |
|
108 | **SSR and the only difference in the use of the SPA:**
|
109 | - SPA worked by the `component`, find quill instance by `ref attribute`.
|
110 | - SSR worked by the `directive`, find quill instance by `directive arg`.
|
111 | - Other configurations, events are the same.
|
112 |
|
113 | ### SSR
|
114 |
|
115 | ``` vue
|
116 | <!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
|
117 | <template>
|
118 | <!-- bidirectional data binding(双向数据绑定) -->
|
119 | <div class="quill-editor"
|
120 | v-model="content"
|
121 | v-quill:myQuillEditor="editorOption">
|
122 | </div>
|
123 |
|
124 | <!-- Or manually control the data synchronization(手动控制数据流) -->
|
125 | <div class="quill-editor"
|
126 | :content="content"
|
127 | @change="onEditorChange($event)"
|
128 | v-quill:myQuillEditor="editorOption">
|
129 | </div>
|
130 | </template>
|
131 |
|
132 | <script>
|
133 | export default {
|
134 | data() {
|
135 | return {
|
136 | content: '<p>example content</p>',
|
137 | editorOption: { /* quill options */ }
|
138 | }
|
139 | },
|
140 | mounted() {
|
141 | console.log('this is current quill instance object', this.myQuillEditor)
|
142 | },
|
143 | methods: {
|
144 | onEditorChange(event) {
|
145 | console.log('onEditorChange')
|
146 | }
|
147 | },
|
148 | // Omit the same parts as in the following component sample code
|
149 | // ...
|
150 | }
|
151 | </script>
|
152 | ```
|
153 |
|
154 |
|
155 | ### SPA
|
156 |
|
157 | ``` vue
|
158 | <template>
|
159 | <!-- bidirectional data binding(双向数据绑定) -->
|
160 | <quill-editor v-model="content"
|
161 | ref="myQuillEditor"
|
162 | :options="editorOption"
|
163 | @blur="onEditorBlur($event)"
|
164 | @focus="onEditorFocus($event)"
|
165 | @ready="onEditorReady($event)">
|
166 | </quill-editor>
|
167 |
|
168 | <!-- Or manually control the data synchronization(或手动控制数据流) -->
|
169 | <quill-editor :content="content"
|
170 | :options="editorOption"
|
171 | @change="onEditorChange($event)">
|
172 | </quill-editor>
|
173 | </template>
|
174 |
|
175 | <script>
|
176 |
|
177 | // you can also register quill modules in the component
|
178 | import Quill from 'quill'
|
179 | import { someModule } from '../yourModulePath/someQuillModule.js'
|
180 | Quill.register('modules/someModule', someModule)
|
181 |
|
182 | export default {
|
183 | data () {
|
184 | return {
|
185 | content: '<h2>I am Example</h2>',
|
186 | editorOption: {
|
187 | // some quill options
|
188 | }
|
189 | }
|
190 | },
|
191 | // manually control the data synchronization
|
192 | // 如果需要手动控制数据同步,父组件需要显式地处理changed事件
|
193 | methods: {
|
194 | onEditorBlur(quill) {
|
195 | console.log('editor blur!', quill)
|
196 | },
|
197 | onEditorFocus(quill) {
|
198 | console.log('editor focus!', quill)
|
199 | },
|
200 | onEditorReady(quill) {
|
201 | console.log('editor ready!', quill)
|
202 | },
|
203 | onEditorChange({ quill, html, text }) {
|
204 | console.log('editor change!', quill, html, text)
|
205 | this.content = html
|
206 | }
|
207 | },
|
208 | computed: {
|
209 | editor() {
|
210 | return this.$refs.myQuillEditor.quill
|
211 | }
|
212 | },
|
213 | mounted() {
|
214 | console.log('this is current quill instance object', this.editor)
|
215 | }
|
216 | }
|
217 | </script>
|
218 | ```
|
219 |
|
220 |
|
221 | ## Modules
|
222 | - [quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)
|
223 | - [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)
|
224 | - [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)
|
225 | - [quilljs-table](https://github.com/dost/quilljs-table)
|
226 | - [more modules...](https://github.com/search?o=desc&q=quill+module&s=stars&type=Repositories&utf8=%E2%9C%93)
|
227 |
|
228 |
|
229 | ## Issues
|
230 | - [Add attributes from toolbar options](https://github.com/quilljs/quill/issues/1084)
|
231 | - [Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)
|
232 | - [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https://github.com/surmon-china/vue-quill-editor/issues/39)
|
233 | - [配合 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)
|
235 |
|
236 |
|
237 | ## Quill documents
|
238 | [Api docs](https://quilljs.com/docs/quickstart/)
|
239 |
|
240 |
|
241 | ## Author
|
242 | [Surmon](https://surmon.me)
|