Vue2中WangEditor使用（renren-fast前端）

引用wangeditor

npm install --save wangeditor

注册组件内容

<template>
  <div>
    <div :id="contentId">
      <p></p>
    </div>
  </div>
</template>
<script>
import WangEditor from 'wangeditor'
export default {
  name: 'wang-editor',
  props: {
    associateId: {
      type: Number
    },
    businessType: {
      type: String
    },
    contentId: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true,
      default: () => ''
    },
    hasImg: {
      type: Boolean,
      default: () => false
    },
    height: {
      type: Number,
      default: () => 260
    }
  },
  data () {
    return {
      editor: null
    }
  },
  watch: {
    content () {
      this.editor.txt.html(this.content)
    }
  },
  computed: {
    fileUploadPreUrl () {
      return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? ('/proxyApi') : window.SITE_CONFIG.baseUrl)
    }
  },
  created () {
  },
  methods: {
    getText () {
      return this.editor.txt.text()
    },
    getContent () {
      return this.editor.txt.html()
    },
    createEditor () {
      const editor = new WangEditor('#' + this.contentId)
      editor.config.height = this.height
      editor.config.zIndex = 0
      // 菜单配置
      let excludeMenus = [
        'todo',
        'video',
        'emoticon'
      ]
      if (!this.hasImg) {
        excludeMenus.push('image')
      }
      editor.config.excludeMenus = excludeMenus
      // 上传图片配置
      editor.config.showLinkImg = false
      editor.config.uploadImgShowBase64 = true
      editor.config.uploadImgMaxLength = 5
      editor.config.uploadImgMaxSize = 10 * 1024 * 1024
      editor.config.uploadImgServer = this.fileUploadPreUrl + 'common/uploadFile'
      editor.config.uploadImgParams = {
        token: this.$cookie.get('token'),
        associateId: this.associateId,
        businessType: this.businessType
      }
      editor.config.uploadImgHooks = {
        customInsert: (insertImgFn, result) => {
          // result 即服务端返回的接口
          result.result.forEach(item => {
            insertImgFn(this.fileUploadPreUrl + item.virPath)
          })
        }
      }
      editor.create()
      editor.txt.clear()
      this.editor = editor
    }
  },
  mounted () {
    this.createEditor()
  },
  beforeDestroy () {
    if (this.editor) {
      this.editor.destroy()
      this.editor = null
    }
  }
}
</script>

页面引用

import WangEditor from '@/components/wang-editor'   // 引用组件

components: {
    WangEditor
}

<wang-editor
          ref="articleContent"      // 自定义组件ref
          contentId="articleContent"    // 组件div的id
          :content="dataForm.content"   // 富文本内容
          :height="200"         // 高度，默认260，非必填
          :hasImg="true"            // 是否需要图片上传，可选，默认false，若true则以下两项必填
          :associateId="dataForm.id"        // 图片关联id
          businessType="article_contentPic"/>   // 图片业务类型

// 更新操作执行之前获取富文本内容
this.dataForm.content = this.$refs.articleContent.getContent()

// 验证富文本字数 // dataRule
    var validateContent = (rule, value, callback) => {
      const contentText = this.$refs.articleContent.getText()
      if (contentText.length < 1 || contentText.length > 2000) {
        callback(new Error('文本内容不可为空（最多2000个字符）'))
      } else {
        callback()
      }
    }

        content: [
          { required: true, message: '文本内容不可为空（最多2000个字符）', trigger: 'blur' },
          { validator: validateContent, trigger: 'blur' }
        ]

// 后台代码部分，可选
        // 删除上传的冗余图片
        fileService.deleteSurplusForRichText(Long associateId, String businessType, String richText);