Vue element-ui vue-quill-editor 富文本编辑器实现

第一步下载组件

npm install vue-quill-editor --save

第二步在需要使用的组件内引入· 富文本组件

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'

因为是个组件所以要注册才能使用

放到视图容器中

<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />

基本配置

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'  // 可选 可上传的图片格式

富文本大小可以根据父元素调整

参考:https://my.oschina.net/u/4094683/blog/4269977

回显

原本的{{item.content}}改为v-html="content"

<div class="ql-editor" v-html="content">
</div>