第一步下載組件
npm install vue-quill-editor
第二步在需要使用的組件內(nèi)引入· 富文本組件
import { quillEditor } from 'vue-quill-editor'
需要在main.js中同時(shí)引入相關(guān)css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
因?yàn)槭莻€(gè)組件所以要注冊(cè)才能使用
components: {
quillEditor
}
放到視圖容器中
<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
<el-button type="primary" @click="submit">提交</el-button>
基本配置
data () {
return {
content: '',
editorOption: {}
}
},
methods: {
submit () {
console.log(this.$refs.text.value)
}
}
editorOption里是放圖片上傳配置參數(shù)用的，例如：
action: '/api/product/richtext_img_upload.do', // 必填參數(shù) 圖片上傳地址
methods: 'post', // 必填參數(shù) 圖片上傳方式
token: '', // 可選參數(shù) 如果需要token驗(yàn)證掉房，假設(shè)你的token有存放在sessionStorage
name: 'upload_file', // 必填參數(shù) 文件的參數(shù)名
size: 500, // 可選參數(shù) 圖片大小躲舌，單位為Kb, 1M = 1024Kb
accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg' // 可選 可上傳的圖片格式
