Vue-Quill-Editor

🍡Quill editor component for Vue, support SPA and SSR.

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

Example

Demo Page

CDN Example

Nuxt.js/SSR example code

#### Projects Using Vue-Quill-Editor
Tamiat CMS

Install

#### CDN

`` html







`

#### NPM

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

$3

#### mount with global

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

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, / { default global options } /)
`

#### mount with component

`javascript
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
components: {
quillEditor
}
}
`

#### mount with ssr

`javascript
// if used in nuxt.js/ssr, you should keep require it only in browser build environment
if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/dist/ssr')
Vue.use(VueQuillEditor, / { default global options } /)
}
`

#### register quill module

`javascript
// 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)
`

$3

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.

$3

` vue




`

$3

` vue



``

Modules

- quill-image-extend-module
- quill-image-resize-module
- quill-image-drop-module
- quilljs-table
- more modules...

Issues

- Add attributes from toolbar options
- Option to insert an image from a URL
- How vue-quill-editor combine with the syntax highlighter module of highlight.js
- 配合 element-ui 实现上传图片/视频到七牛 demo
- 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

Quill documents

Api docs

Author

Surmon