一.下载组件
npm install vue-quill-editor
二.在需要使用的组件内引用富文本组件及其样式
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
三.注册组件及使用
// 注册
components: {
quillEditor
}
// 引用
<quillEditor></quillEditor>
四.基本配置
data () {
return {
content: '',
editorOption: {}
}
},
methods: {
submit () {
console.log(this.$refs.text.value)
}
}
// editorOption里是放图片上传配置参数用的,例如:
// action: '/api/product/richtext_img_upload.do', // 必填参数 图片上传地址
// methods: 'post', // 必填参数 图片上传方式
// token: '', // 可选参数 如果需要token验证,假设你的token有存放在sessionStorage
// name: 'upload_file', // 必填参数 文件的参数名
// size: 500, // 可选参数 图片大小,单位为Kb, 1M = 1024Kb
// accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg' // 可选 可上传的图片格式