jazz
2022-08-24 b413394a0a4bdbb2b3af67f3faf86b3b7351655a
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,10 +106,53 @@
        }
      )
    }
    // 配置富文本视频上传
    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)
      self.$messageWarn(info)
    }
    // 过滤word复制
    this.editor.config.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) {