1.3.0 • Published 5 years ago
vue-quill-img-editor v1.3.0
vue-quill-img-editor
🍡Quill editor component for Vue, support SPA.
基于 Quill、适用于 Vue 的富文本编辑器,支持单页应用。
NPM
npm install vue-quill-img-editor quill --save
Mount
mount with global
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-img-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 { vueQuillImgEditor } from 'vue-quill-img-editor'
export default {
components: {
vueQuillImgEditor
}
}
vue测试环境注意要配置babel
module.exports = {
presets: [
['@vue/app', {modules: 'umd', useBuiltIns: 'entry'}]
]
}
Difference(使用方法)
SPA
<template>
<!-- bidirectional data binding(双向数据绑定) -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
:upload="upload"
:headers="headers"
@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 {
upload: '', // 图片文件上传地址
headers:{},//请求头
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>
配置服务器
{
code: 200
msg: "quilljs"
}
{
code: 200
url: "http://127.0.0.1:7001/public/uploads/fb3d66947fa94904e13a4a118a590ed5.png"
}
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-img-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