npm install vue-quill-editor --save
npm install quill-image-extend-module --save-dev
原生quill.js上傳圖片會自動轉(zhuǎn)成base64格式的，我這邊生成的html直接存到mysql的字段中的，base64太大了，quill-image-extend-module是quill的擴(kuò)展，為了上傳圖片到服務(wù)器并獲取圖片地址，這個上傳的后端接口很容易寫，和elementUI的上傳接口一致。
<template>
<div class="quill-wrap">
<quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" />
</div>
</template>
<script>
import 'quill/dist/quill.snow.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
components: { quillEditor },
data() {
return {
content: '',
editorOption: { // 富文本框參數(shù)設(shè)置
modules: {
ImageExtend: {
loading: true,
name: 'img',
action: 'http://127.0.0.1:7001/yun/upload',
response: (res) => {
return `http://127.0.0.1:7001/public/uploadfile/${res.data.filename}`
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
QuillWatch.emit(this.quill.id)
}
}
}
}
}
}
}
}
</script>
<style>
.ql-container {
min-height: 300px;
}
.quill-editor {
width: 880px;
}
</style>
這是我寫在頁面中的效果
image.png
quill的詳細(xì)文檔 ：https://www.kancloud.cn/liuwave/quill/1409423
下一篇我記錄一下自己遇到的問題和解決方案。
注：除了quill，還可以選用tinymce
