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

Mount

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

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.

SSR

``` vue ```

SPA

``` vue ref="myQuillEditor"

:options="editorOption"

@blur="onEditorBlur($event)"

@focus="onEditorFocus($event)"

@ready="onEditorReady($event)">

:options="editorOption"

@change="onEditorChange($event)">

```

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