第一步，先下载组件
npm install vue-quill-editor
第二步，在需要使用的位置引入（富文本组件）
import { quillEditor } from 'vue-quill-editor'
第三步，引入相关的css
import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'
第四步，注册组件（因为这个是组件，所以要先注册一下）
components: {quillEditor}
第五步，放到需要的盒子中
<quill-editorref="text"v-model="content"class="myQuillEditor":options="editorOption"/><el-button type="primary" @click="submit">提交</el-button><div v-html="data"></div>
第六步，配置基本数据
data() {return {content: "",editorOption: {},data:''};},methods: {submit() {this.data = this.$refs.text.valueconsole.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' // 可选 可上传的图片格式},
一切准备完毕后点击提交按钮就可以看见自己写的内容了~~
