升级富文本，可上传视频

long

2022-01-21 958f5a5abc6b5d4efee768d0b181078c25d4199e

升级富文本，可上传视频

 package.json

@@ -24,7 +24,7 @@
    "vue": "2.6.10",
    "vue-router": "3.0.6",
    "vuex": "3.1.0",
    "wangeditor": "^3.1.1"
    "wangeditor": "^4.7.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",

 src/components/WangEnduit/index.vue

@@ -40,16 +40,16 @@
  mounted() {
    self = this
    this.editor = new E(this.$refs.editorElem)
    this.editor.customConfig.focus = false
    this.editor.customConfig.onchange = (html) => {
    this.editor.config.focus = false
    this.editor.config.onchange = (html) => {
      this.editorContent = html
      this.catchdata(this.editorContent) // 把这个html通过catchData的方法传入父组件
    }
    // 去掉插入网络图片
    this.editor.customConfig.showLinkImg = false
    this.editor.config.showLinkImg = false
    // 粘贴来的内容过滤图片
    this.editor.customConfig.pasteIgnoreImg = true
    this.editor.customConfig.menus = [ // 菜单配置
    this.editor.config.pasteIgnoreImg = true
    this.editor.config.menus = [ // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
@@ -65,26 +65,29 @@
      'quote', // 引用
      // 'emoticon',  // 表情
      'image', // 插入图片
      'video', // 插入视频
      // 'table',  // 表格
      // 'code',  // 插入代码
      'code', // 插入代码
      'video',
      'undo', // 撤销
      'redo' // 重复
    ]
    // 下面是最重要的的方法
    // this.editor.customConfig.withCredentials = true
    // this.editor.config.withCredentials = true
    // 将图片大小限制为 5M
    this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
    this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024
    // 限制一次最多上传 1 张图片
    this.editor.customConfig.uploadImgMaxLength = 1
    this.editor.config.uploadImgMaxLength = 1
    // 不忽略粘贴内容中的图片
    this.editor.customConfig.pasteIgnoreImg = false
    this.editor.customConfig.customUploadImg = function(files, insert) {
    this.editor.config.pasteIgnoreImg = false
    this.editor.config.customUploadImg = function(files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      // 因为file是个FormData格式的对象所以可以直接通过接口开始上传，不需要做多余操作
      // 虽然文档说是FormData格式，但是我实际使用需要以下操作
      const formData = new FormData()
      formData.append('file', files[0])
      console.log(formData, 'formDataformDataformDataformDataformData')
      self.postFN(
        {
          url: 'admin/image/upload?folderCode=IMG',
@@ -103,13 +106,42 @@
        }
      )
    }

    // 配置富文本视频上传
    this.editor.config.customUploadVideo = function(files, insert) {
    // files 是 input 中选中的文件列表
    // insert 是获取视频 url 后，插入到编辑器的方法
      const formDataVideo = new FormData()
      formDataVideo.append('file', files[0])
      console.log(formDataVideo, 'formDataVideoformDataVideoformDataVideoformDataVideo')
      self.postFN(
        {
          url: 'admin/image/upload?folderCode=VIDEO',
          header: { 'Content-Type': 'multipart/form-data' },
          params: formDataVideo,
          mockData: {
            code: 100,
            msg: '',
            data: {
              imgUrl: 'xxxx'
            }
          }
        },
        inf => {
          // 上传视频，返回结果，将视频地址插入到编辑器中
          insert(inf.imgUrl)
          console.log(inf.imgUrl, '99999999999999999999999999')
        }
      )
    }

    // 自定义错误提示
    this.editor.customConfig.customAlert = function(info) {
    this.editor.config.customAlert = function(info) {
      // info 是需要提示的内容
      self.$messagewarn(info)
    }
    // 过滤word复制
    this.editor.customConfig.pasteTextHandle = function(content) {
    this.editor.config.pasteTextHandle = function(content) {
      var html = content
      html = html.replace(/<\/?SPANYES[^>]*>/gi, '')//  移除span
      html = html.replace(/<\!\-\-(.|[\r\n])*?\-\->/gi, '')//  移除注释

 src/components/WangEnduit/index_old.vue

New file
@@ -0,0 +1,141 @@
<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;" />
  </div>
</template>
<script>
import E from 'wangeditor'
let self
export default {
  name: 'EditorElem',
  props: {
    catchdata: {
      type: Function,
      default() {}
    },
    content: {
      type: String,
      default: ''
    },
    rangenum: {
      type: Range,
      default: null
    }
  },
  data() {
    return {
      editor: null,
      editorContent: ''
    }
  }, // 接收父组件的方法
  watch: {
    content(value) {
      // console.log("没有光标则执行，有光标不执行，回显--解决输入时光标老跳到最底部", this.content, this.rangenum)
      if (this.rangenum == null) {
        // this.content.setRange(this.rangenum)
        this.editor.txt.html(value)
      }
    }
  },
  mounted() {
    self = this
    this.editor = new E(this.$refs.editorElem)
    this.editor.customConfig.focus = false
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html
      this.catchdata(this.editorContent) // 把这个html通过catchData的方法传入父组件
    }
    // 去掉插入网络图片
    this.editor.customConfig.showLinkImg = false
    // 粘贴来的内容过滤图片
    this.editor.customConfig.pasteIgnoreImg = true
    this.editor.customConfig.menus = [ // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      // 'emoticon',  // 表情
      'image', // 插入图片
      // 'table',  // 表格
      // 'code',  // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]
    // 下面是最重要的的方法
    // this.editor.customConfig.withCredentials = true
    // 将图片大小限制为 5M
    this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
    // 限制一次最多上传 1 张图片
    this.editor.customConfig.uploadImgMaxLength = 1
    // 不忽略粘贴内容中的图片
    this.editor.customConfig.pasteIgnoreImg = false
    this.editor.customConfig.customUploadImg = function(files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      // 因为file是个FormData格式的对象所以可以直接通过接口开始上传，不需要做多余操作
      // 虽然文档说是FormData格式，但是我实际使用需要以下操作
      const formData = new FormData()
      formData.append('file', files[0])
      self.postFN(
        {
          url: 'admin/image/upload?folderCode=IMG',
          header: { 'Content-Type': 'multipart/form-data' },
          params: formData,
          mockData: {
            code: 100,
            msg: '',
            data: {
              imgUrl: 'xxxx'
            }
          }
        },
        inf => {
          insert(inf.imgUrl)
        }
      )
    }
    // 自定义错误提示
    this.editor.customConfig.customAlert = function(info) {
      // info 是需要提示的内容
      self.$messagewarn(info)
    }
    // 过滤word复制
    this.editor.customConfig.pasteTextHandle = function(content) {
      var html = content
      html = html.replace(/<\/?SPANYES[^>]*>/gi, '')//  移除span
      html = html.replace(/<\!\-\-(.|[\r\n])*?\-\->/gi, '')//  移除注释
      html = html.replace(/<(\w[^>]*) {2}lang=([^|>]*)([^>]*)/gi, '<$1$3')// 移除lang属性
      html = html.replace(/<\\?\?xml[^>]*>/gi, '')//  移除xml和相关描述
      html = html.replace(/<\/?\w+:[^>]*>/gi, '')// 移除xml命名空间的标签
      html = html.replace(/&nbsp;/gi, '')//  移除空格
      html = html.replace(/^\s+|\s+$/g, '')
      html = html.replace(/<o:p> <\/o:p>/g, '')// 移除标签
      html = html.replace(/<br\/>/g, '')// 移除br标签
      return html
    }
    this.editor.create() // 创建富文本实例
    // if (!this.content) {
    //     // this.editor.txt.html('请编辑内容1')
    // }
  }
}
</script>
<style lang="scss" scoped>
#wangeditor {
    position: sticky;
    /*设置富文本框高度*/
    .w-e-text-container{
        height: 500px !important;
    }
}
</style>