lgc-vue-quill-editor
Vue-Quill-Editor
Quill editor component for Vue.
基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。
Example
Install
NPM
npm install vue-quill-editor --save
# or
yarn add vue-quill-editor
CDN
<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">
Vue.use(window.VueQuillEditor)
</script>
Mount
Mount with global
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor, /* { default global options } */)
Mount with local component
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
View Nuxt.js example code.
Register Quill module
import Quill from 'quill'
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
Quill.register('modules/yourQuillModule', yourQuillModule)
// Vue app...
Component
<template>
<!-- Two-way Data-Binding -->
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
/>
<!-- Or manually control the data synchronization -->
<quill-editor
:content="content"
:options="editorOption"
@change="onEditorChange($event)"
/>
</template>
<script>
// You can also register Quill modules in the component
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...
}
}
},
methods: {
onEditorBlur(quill) {
console.log('editor blur!', quill)
},
onEditorFocus(quill) {
console.log('editor focus!', quill)
},
onEditorReady(quill) {
console.log('editor ready!', quill)
},
onEditorChange({ quill, html, text }) {
console.log('editor change!', quill, html, text)
this.content = html
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
mounted() {
console.log('this is current quill instance object', this.editor)
}
}
</script>
Projects using vue-quill-editor
- Tamiat CMS
- ...
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 Modules
- quill-image-extend-module
- quill-image-resize-module
- quill-image-drop-module
- quilljs-table
- more modules...
Quill
Dependencies
Dependencies
autoprefixer: ^6.7.2babel-cli: ^6.23.0babel-core: ^6.24.1babel-eslint: ^7.1.1babel-helper-vue-jsx-merge-props: ^2.0.2babel-loader: ^6.2.10babel-plugin-istanbul: ^3.1.2babel-plugin-syntax-jsx: ^6.13.0babel-plugin-transform-es2015-destructuring: ^6.23.0babel-plugin-transform-export-extensions: ^6.8.0babel-plugin-transform-object-rest-spread: ^6.23.0babel-plugin-transform-runtime: ^6.23.0babel-preset-es2015: ^6.24.1babel-preset-stage-2: ^6.22.0babel-register: ^6.0.0chai: ^3.5.0chalk: ^1.1.3connect-history-api-fallback: ^1.1.0copy-webpack-plugin: ^4.0.0cross-env: ^5.0.0cross-spawn: ^5.1.0css-loader: ^0.25.0eslint: ^3.14.1eslint-config-standard: ^6.1.0eslint-friendly-formatter: ^2.0.5eslint-loader: ^1.6.1eslint-plugin-html: ^2.0.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1eventsource-polyfill: ^0.9.6express: ^4.13.3extract-text-webpack-plugin: ^2.0.0-rc.3file-loader: ^0.10.0friendly-errors-webpack-plugin: ^1.1.3function-bind: ^1.1.0highlight.js: ^9.12.0html-loader: ^0.4.4html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3inject-loader: ^2.0.1json-loader: ^0.5.4jstransformer-markdown-it: ^2.0.0karma: ^1.4.1karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.2karma-sinon-chai: ^1.2.4karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.26karma-webpack: ^2.0.2lolex: ^1.5.2mocha: ^3.2.0node-sass: ^4.7.2opn: ^4.0.2optimize-css-assets-webpack-plugin: ^1.3.0ora: ^0.3.0phantomjs-prebuilt: ^2.1.3raw-loader: ^0.5.1sass-loader: ^6.0.6semver: ^5.3.0shelljs: ^0.7.4sinon: ^2.1.0sinon-chai: ^2.8.0uglify-js: ^3.0.15url-loader: ^0.5.7vue: ^2.5.0vue-hot-reload-api: ^1.2.0vue-html-loader: ^1.0.0vue-loader: ^13.3.0vue-template-compiler: ^2.5.2vue-template-es2015-compiler: ^1.6.0webpack: ^2.2.1webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.16.1webpack-merge: ^2.6.1