3.0.6 • Published 7 years ago
vue-quill-editor v3.0.6
Vue-Quill-Editor
🍡Quill editor component for Vue, support SPA and SSR.
基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。
Example
Projects Using Vue-Quill-Editor
Install
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>
NPM
npm install vue-quill-editor --save
Mount
mount with global
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
// 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
// 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
// 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 byref attribute
. - SSR worked by the
directive
, find quill instance bydirective arg
. - Other configurations, events are the same.
SSR
<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
<template>
<!-- bidirectional data binding(双向数据绑定) -->
<div class="quill-editor"
v-model="content"
v-quill:myQuillEditor="editorOption">
</div>
<!-- Or manually control the data synchronization(手动控制数据流) -->
<div class="quill-editor"
:content="content"
@change="onEditorChange($event)"
v-quill:myQuillEditor="editorOption">
</div>
</template>
<script>
export default {
data() {
return {
content: '<p>example content</p>',
editorOption: { /* quill options */ }
}
},
mounted() {
console.log('this is current quill instance object', this.myQuillEditor)
},
methods: {
onEditorChange(event) {
console.log('onEditorChange')
}
},
// Omit the same parts as in the following component sample code
// ...
}
</script>
SPA
<template>
<!-- bidirectional data binding(双向数据绑定) -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- Or manually control the data synchronization(或手动控制数据流) -->
<quill-editor :content="content"
:options="editorOption"
@change="onEditorChange($event)">
</quill-editor>
</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
}
}
},
// manually control the data synchronization
// 如果需要手动控制数据同步,父组件需要显式地处理changed事件
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>
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
Author
3.0.6
7 years ago
3.0.5
7 years ago
3.0.4
7 years ago
3.0.3
7 years ago
3.0.2
7 years ago
3.0.1
7 years ago
3.0.0
7 years ago
2.3.3
7 years ago
2.3.2
7 years ago
2.3.0
7 years ago
2.2.6
7 years ago
2.2.4
7 years ago
2.2.2
8 years ago
2.2.1
8 years ago
2.2.0
8 years ago
2.1.8
8 years ago
2.1.6
8 years ago
2.1.4
8 years ago
2.1.2
8 years ago
2.1.0
8 years ago
2.0.4
8 years ago
2.0.3
8 years ago
2.0.2
8 years ago
2.0.0
8 years ago
1.1.1
8 years ago
1.1.0
8 years ago
1.0.0
8 years ago