UNION_NSI/target/classes/static/components/plugins/TextEditor.vue

<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);
        })
      },
      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.linkImgCheck = function (imgSrc, alt, href) {
        if (containsXSS(imgSrc)) {
          ELEMENT.Message.warning('请输入合法链接地址')
          return undefined
        }
        return true
      }


      //配置alt选项
      this.editor.config.showLinkImgAlt = false
      //配置超链接
      this.editor.config.showLinkImgHref = false
      //粘贴过滤
      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>