vue-quill-editor

Quill editor component for Vue

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-quill-editor
7,3632623.0.66 years ago7 years agoMinified + gzip package size for vue-quill-editor in KB

Readme

GitHub stars Build Status GitHub issues GitHub forks GitHub last commit license Twitter NPM NPM
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
v-model="content"
v-quill:myQuillEditor="editorOption">
:content="content"
@change="onEditorChange($event)"
v-quill:myQuillEditor="editorOption">
```

SPA

``` vue ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
:options="editorOption"
@change="onEditorChange($event)">
```

Modules

Issues

Quill documents

Api docs

Author

Surmon