一:安装
npm install vue-quill-editor -S
二:挂载
//全局
// main.js
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
//组件内使用
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: {
'quill-editor':quillEditor
}
}
这里主要使用组件内挂载
父组件引用
// 内容传递 改变监听
<quill-editor :replyContent="tempForm.tempCont" @updateReply="updateReply"></quill-editor>
//script
import QuillEditor from './quillEditor'
export default {
components: {
'quill-editor': QuillEditor,
},
methods: {
updateReply (content) {
this.tempForm.tempCont = content
},
}
}
子组件
<quill-editor ref="addQuillEditor" v-model="replyText" :options="editorOption">
<div id="addBar" slot="toolbar">
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
<button class="ql-underline">underline</button>
<button class="ql-list" value="ordered"></button>
<button class="ql-strike">strike</button>
<select class="ql-align">align</select>
<select class="ql-color">color</select>
<select class="ql-background">background</select>
<button class="ql-indent" value="+1"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
<button class="ql-clean"></button>
//自定义图片上传按钮
<span class="custom-button" @click="addImage"><i class="el-icon-picture"></i></span>
</div>
</quill-editor>
然后直接上全部代码
<template>
<div class="cont">
<div class="custom-quill-editor-war">
<quill-editor ref="addQuillEditor" v-model="replyText" :options="editorOption">
<div id="addBar" slot="toolbar">
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
<button class="ql-underline">underline</button>
<button class="ql-list" value="ordered"></button>
<button class="ql-strike">strike</button>
<select class="ql-align">align</select>
<select class="ql-color">color</select>
<select class="ql-background">background</select>
<button class="ql-indent" value="+1"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
<button class="ql-clean"></button>
<span class="custom-button" @click="addImage"><i class="el-icon-picture"></i></span>
</div>
</quill-editor>
</div>
//图片组件
<insert-picture :insertPictureVisible="insertPictureVisible" @updateInsertPicture="updateInsertPicture"></insert-picture>
</div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import InsertPicture from './insertPicture'
export default {
name: 'quillEditor',
components: {
'quill-editor': quillEditor,
'insert-picture': InsertPicture
},
props: {
replyContent: {
type: String
}
},
data () {
return {
editorOption: {
modules: {
toolbar: '#addBar'
}
},
innerVisible: false,
replyText: '',
pushText: '',
linkUrl: '',
linkUrlText: '',
effectThemeId: '',
textTitle: '',
jumpBrowserWay: 'appBrowser',
rangeIndex: 0,
rangeLength: 0,
insertPictureVisible: false
}
},
watch: {
replyContent: {
handler (val) {
this.replyText = `${val}`
},
immediate: true
}
},
mounted(){
},
methods: {
wayChange () {
this.textTitle = ''
},
listenerClickQuill (event) {
if (event.target.nodeName === 'IMG') {
console.log(this.$refs.addQuillEditor.quill.getLeaf)
}
},
addImage () {
this.insertPictureVisible = true
},
updateInsertPicture (val) {
console.log('updateInsertPicture')
console.log(val)
if (val === null) {
this.insertPictureVisible = false
return
}
this.$refs.addQuillEditor.quill.focus()
let range = this.$refs.addQuillEditor.quill.getSelection()
this.$refs.addQuillEditor.quill.insertEmbed(range.index, 'image', {
alt: 'picture',
url: val.imgUrl,
})
this.insertPictureVisible = false
}
},
created() {
this.$nextTick(() => {
console.log(this.$refs.addQuillEditor)
this.$refs.addQuillEditor && this.$refs.addQuillEditor.quill && this.$refs.addQuillEditor.quill.root.addEventListener('click', this.listenerClickQuill)
let _that = this
this.$refs.addQuillEditor.quill.on('text-change', function() {
_that.pushText = _that.$refs.addQuillEditor.quill.getText()
console.log(_that.replyText)
_that.$emit('updateReply', _that.replyText, _that.pushText)
})
})
}
}
</script>
<style lang="scss" scoped>
.custom-quill-editor-war {
width: 100%;
box-sizing: border-box;
}
.quill-editor {
width: 100%;
}
.custom-button {
cursor: pointer;
font-weight: bold;
font-size: 18px;
margin-left: 5px;
i {
font-weight: bold;
}
&:hover {
color: #72a0fd;
}
}
</style>
<style lang="scss">
.cont{
width: 100%;
}
.custom-quill-editor-war {
.ql-container {
min-height: 250px;
}
.el-form-item__content {
line-height: normal;
}
.ql-toolbar {
line-height: 24px;
}
.ql-editor {
img {
width: 20%!important;
margin: 0 auto!important;
&:hover {
cursor: pointer;
}
}
.u-color-blue {
color: blue!important;
}
}
}
</style>