网页粘贴

 <!--聊天输入框-->
    <div
      class="contenteditable"
      :contenteditable="isReceiver"
      ref="inputContent"
      id="js_input_content"
      spellcheck="false"
      accesskey="j"
      // 粘贴事件
      @paste="onPaste($event)"
      @keydown="onKeydown($event)"
      @input.stop="onInput($event)"
      @contextmenu.stop="inputShowMenu($event)"
      @copy="onCopy($event)"
    ></div>
    <!--聊天输入框-->

// 粘贴操作
    onPaste (event) {
     
      // 如果有元素
      const self = this
      let items = Array.from(event.clipboardData.items)

      if (items.length && items.some(item => item.kind === 'file')) {
     
        event.preventDefault()
        self.copyPaste.pasteClipboardData(event.clipboardData.items)
      } else {
     
        event.preventDefault()
        let html = event.clipboardData.getData('text/plain')

        // 判断如果粘贴内容为cdn图片
        if (html && /http[s]?:\/\/img.*?.(jpg|png|gif|jpeg)/isu.test(html)) {
     
          console.log(123)
          var img = document.createElement('img'),
            imgContainer = document.getElementById('js_input_content')
          img.src = html
          img.style.maxWidth = '100px'
          img.style.maxHeight = '100px'
          img.style.paddingRight = '5px'
          img.style.display = 'inline-block'
          img.style.verticalAlign = 'baseline'
          imgContainer.appendChild(img)
          return false
        }
        if (html) {
     
          // document.execCommand('insertHTML', false, html)
          let selection = window.getSelection(),
            range = selection.getRangeAt(0),
            text = document.createTextNode(html)
          range.insertNode(text)
          range.collapse(false)
        }
      }
    },

	// 剪贴板处理
	pasteClipboardData(items) {
     
		items = Array.from(items)
    let item = items.shift(),
			data
		if (item) {
     
			if (item.kind === 'file' && item.type.includes('image/')) {
     
				data = item.getAsFile()
				if (data) {
     
					let file = new FileReader()
					file.onload = res => {
     
						// console.log(res)
						_insertEel({
     
								type: 'image',
								value: res.target.result
							})
							.then(() => {
     
								this.pasteClipboardData(items)
							})
					}
					file.onerror = err => {
     
						console.log(err)
						this.pasteClipboardData(items)
					}
					file.readAsDataURL(data)
				}
			} else if (item.kind === 'string') {
     
				item.getAsString((str) => {
     
					data = str.replace(/<[^>]*>/g, "")
					_insertEel({
     
							type: 'text',
							value: data
						})
						.then(() => {
     
							this.pasteClipboardData(items)
						})
				})
			}
		} else {
     
			return
		}
	}

/**
 * @description: 插入节点
 * @param {Object}
 * @return:
 */
function _insertEel({
     
	type,
	value
}) {
     
	return new Promise((resolve) => {
     
		if (!type) resolve()
		// 获取当前光标位置
		let selection = window.getSelection(),
			range = selection.getRangeAt(0)
		if (type === 'image') {
     
			let image = document.createElement('img')
			image.onload = () => {
     
				image.dataset.width = image.naturalWidth
				image.dataset.height = image.naturalHeight
				image.style.maxWidth = '100px'
				image.style.maxHeight = '100px'
				image.style.paddingRight = '5px'
				image.style.display = 'inline-block'
				image.style.verticalAlign = 'baseline'
				range.insertNode(image)
				range.collapse(false)
				resolve()
			}
			image.src = value
		} else if (type === 'text') {
     
			let text = document.createTextNode(value)
			range.insertNode(text)
			range.collapse(false)
			resolve()
		}
	})
}