UNION_HUTB/target/classes/static/components/plugins/textEditor.vue

/**
*Desc:
*Create by: jug
*Create time:2024/1/24/16:40
*/
<template>
  <div>
    <div ref="editorDom"></div>
    <input type="file" style="display: none;">
  </div>
</template>


<script src="/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
<script>

const {$, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip} = wangEditor

class AlertMenu extends BtnMenu {
  constructor(editor) {
    const $elem = wangEditor.$(
        `<div class="w-e-menu" data-title="上传word">
              word
         </div>`
    )
    super($elem, editor)
  }

  clickHandler() {
    const _this = this
    const inputFileElement = document.querySelector('#'+this.editor.textElemId).parentElement.parentElement.nextElementSibling
    inputFileElement.click()
    inputFileElement.addEventListener('change', function () {
      const file = this.files[0];
      const fileName = file.name

      if (!fileName.toLowerCase().endsWith('.doc') && !fileName.toLowerCase().endsWith('.docx')) {
        alert('请上传doc或者docx的文件')
        _this.clearInputFile()
        return
      }


      const formData = new FormData()
      formData.append('file', file, file.name)
      axios.post('/file_server/word2Html', formData, {}).then(response => {
        console.log(response.data)
        if (response.data.code === 0) {
          _this.editor.txt.html(response.data.data)
        } else {
          alert(response.data.msg + ',上传word失败，请联系管理员！')
          _this.clearInputFile()
        }
      }).catch(error => {
        console.log(error)
        _this.clearInputFile()
        alert('上传word失败，请联系管理员！')
      });
    });
  }

  clearInputFile() {
    const obj = document.getElementById('fileInput');
    obj.outerHTML = obj.outerHTML
  }

  tryChangeActive() {
    this.active()
  }

}

wangEditor.registerMenu('alertMenuKey', AlertMenu)
module.exports = {
  name: "textEditor",
  props: {
    // 定义值属性，用于接收父组件传递的值
    value: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 300
    },
    menus: {
      type: Array,
      default: () => {
        return [
          'head',//标题
          'bold',//加粗
          'fontSize',//字号
          'fontName',//字体
          'italic',//斜体
          'underline',//下划线
          'strikeThrough',//删除线
          'indent',//缩进
          'lineHeight',//行高
          'foreColor',//文字颜色
          'backColor',//背景颜色
          //'link',//链接
          'list',//序列
          'todo',//待办
          'justify',//对齐
          'quote',//引用
          // 'emoticon',//表情
          'image',
          //'video',
          'table',
          //'code',
          'splitLine',//分割线
          'undo',
          'redo',
        ]
      }
    }
  },
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.initEditor()
  },

  watch: {
    value: {
      handler: function (newValue) {
        this.$nextTick(() => {
          this.editor.txt.html(newValue);
          // this.editor.config.focus = true
        })
        // const _this = this
        // const waitUntilEditorNotNull = () => {
        //   if (_this.editor != null) {
        //     _this.editor.txt.html(newValue);
        //   } else {
        //     setTimeout(waitUntilEditorNotNull, 100); // 每隔100毫秒检查一次
        //   }
        // }
        // waitUntilEditorNotNull();
      },
      immediate: true
    }
  },

  methods: {
    initEditor() {
      let _this = this
      this.editor = new wangEditor(this.$refs.editorDom)

      // this.editor.config.focus = false // 取消光标自动定位

      //内容change回调
      this.editor.config.onchange = function (newHtml) {
        let content = _this.editor.txt.html()
        let text = _this.editor.txt.text()
        // 对于一键格式化后的内容，空内容可能会出现<p></br></p>标签，此处进行判断
        // if (_this.isEmptyEditor()) {
        //   content = ''
        // }
        const newContent = content.replaceAll('<img', '<image');
        _this.$emit('input', newContent)
        _this.$emit('catchData', newContent, text)
      }

      //配置图片上传
      this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法

        Promise.all(_this.uploadFiles(resultFiles)).then(res => {
          res.forEach(v => {
            if (v.code === 0) {
              insertImgFn(APP_DOMAIN + CREATE_PREVIEW_URL(v.data.filepath))
            } else {
              ELEMENT.message.warning('图片上传失败')
            }
          })
        })

      }
      //粘贴过滤
      this.editor.config.pasteFilterStyle = false
      //高度
      this.editor.config.height = this.height
      //菜单
      this.editor.config.menus = this.menus
      this.editor.create()
    },
    isEmptyEditor() {
      const children = this.editor.$textElem.children()
      for (let i = 0; i < children.elems.length; i++) {
        const node = children.elems[i]
        if (node && node.nodeType === Node.TEXT_NODE && node.textContent.trim().length !== '') {
          return false
        }
        if (node && node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'p' && node.innerText.trim() !== '') {
          return false
        }
      }
      return true
    },
    uploadFiles(resultFiles) {
      return resultFiles.map(async file => {
        const formData = new FormData()
        formData.append('file', file, file.name)
        formData.append("folderPath", "/wangEditorImg/")
        return jQuery.ajax({
          url: '/file_server/uploadFile',
          type: 'post',
          data: formData,
          processData: false,
          contentType: false
        })
      })
    }
  },
  created() {

  }
}

</script>


<style scoped>

</style>