wangEditer 富文本编辑器 ---基于vue2.0

npm install @wangeditor/editor --save

npm install @wangeditor/editor-for-vue --save

import E from 'wangeditor'

1. 下载并引入

2. 编辑组件

3. init配置项

4. 配置自定义需求(图片上传方式, 更新数据方式 ...)

5. 获取富文本数据或HTML

<template>
  <div class="app-container">
    <h3>富文本标签:</h3>
    <el-button @click="getEditorInfo">获取文本内容</el-button>
    <div ref="editor" class="text" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import E from 'wangeditor'
export default {
  name: 'Editor',
  data() {
    return {
      editorContent: ''
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.editor = new E(this.$refs.editor)
      // 自定义菜单配置
      this.editor.config.zIndex = 5
      // 文件上传
      this.editor.config.customUploadImg = (files, insert) => {
        this.imageToBase64(files, false, insert)
      }
      this.editor.create()
      // 初始化数据
      // editoror.txt.html(this.editorContent)
    },
    getEditorInfo() {
      this.editor.txt.html()
    },
    //获取图片base64
    imageToBase64(file, isCompression, callback) {
      // 判断图片类型
      // let isJpg
      if (file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/jpg') return this.$message.error("请上传合规格式图片!")
      // 创建一个HTML5的FileReader对象
      let reader = new FileReader()
      // 创建一个img对象
      let img = new Image()
      if (file) {
        reader.readAsDataURL(file[0])
      }
      reader.onload = (e) => {
        // let base64Str = reader.result.split[','][1]
        img.src = e.target.result
        // base64地址图片加载完毕后执行
        img.onload = function () {
          // 缩放图片需要canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
          let canvas = document.createElement('canvas')
          let context = canvas.getContext('2d')
          // 图片原始尺寸
          let originWidth = this.width
          let originHeight = this.height
          // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
          let maxWidth = 300,
            maxHeight = 300
          // 目标尺寸
          let targetWidth = originWidth
          let targetHeight = originHeight
          // 图片尺寸超过最大尺寸限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更改宽度，按照宽度限定尺寸
              targetWidth = maxWidth
              targetHeight = Math.round(maxWidth * (originHeight / originWidth))
            } else {
              targetHeight = maxHeight
              targetWidth = Math.round(maxHeight * (originWidth / originHeight))
            }
          }
          // 对图片进行缩放
          canvas.width = targetWidth
          canvas.height = targetHeight
          // 清除画布
          context.clearRect(0, 0, targetWidth, targetHeight)
          /** 图片压缩
           * 第一个参数是创建的img对象
           * 第二三个参数是左上角坐标
           * 后两个参数是画布区域宽高
           */
          context.drawImage(img, 0, 0, targetWidth, targetHeight)
          /** 压缩后的base64文件
           * 第一个参数可以为image/jpeg或image/webp类型的图片
           * 第二个参数设置图片质量取值0-1，超出则以默认值0.92替代
           */
          let newUrl = canvas.toDataURL('image/jpeg', 0.02)
          console.log(newUrl);
          if (isCompression) { // 返回压缩后的base64
            callback(newUrl)
          } else { // 返回不压缩的base64
            callback(e.target.result)
          }
        }
      }
    },
  }
}
</script>

<style scoped>
.text {
  text-align: left;
  width: 100%;
  height: 400px;
}
::v-deep .w-e-text-container {
  height: 420px !important;
}
</style>