element UI 富文本和轮播图

安装

 npm i wangeditor --save

页面导入

import E from "wangeditor"

setRichText(html) {
  this.$nextTick(() => {
    this.editor = new E(`#editor`)
    this.editor.config.uploadImgServer = this.$baseUrl + '/files/editor/upload'
    this.editor.config.uploadFileName = 'file'
    this.editor.config.uploadImgHeaders = {
      token: this.user.token
    }
    this.editor.config.uploadImgParams = {
      type: 'img',
    }
    this.editor.config.zIndex = 0
    this.editor.create()  // 创建
    this.editor.txt.html(html)
  })
},

新增和编辑设置富文本

handleAdd() {   // 新增数据
  this.form = {}  // 新增数据的时候清空数据
  this.fromVisible = true   // 打开弹窗
  this.setRichText('')
},
handleEdit(row) {   // 编辑数据
  this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
  this.fromVisible = true   // 打开弹窗
  this.setRichText(this.form.content)
},

轮播图

<el-carousel height="400px">
	<el-carousel-item v-for="item in imgs" :key="item">
    <img :src="item" alt="" style="width: 100%">
  </el-carousel-item>
</el-carousel>