js实如今可编辑的div中粘贴图片

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

前言

在富文本编辑器中粘贴图片是很正常的操做，以前我也实现过简易版的富文本编辑器，今天借着这个机会，重拾旧日知识，手动实如今可编辑的div中粘贴图片。

可编辑的div

div是能够编辑的？

对的你没听错，html5新增了一个属性，contenteditable

这个属性不仅仅是对div元素有效，而是大部分元素都支持。

<style> div { width: 200px; height: 200px; border: 1px solid red; } </style>
  <div contenteditable="true">
    hello world!
  </div>
复制代码

效果以下：

既然咱们div能够编辑了，那么咱们接下来看看怎么实现往div中粘贴图片？

paste事件

粘贴图片，咱们首先得知道复制的图片的信息，而后再把图片渲染出来。

咱们能够先监听paste事件，也就是粘贴事件，在这个事件里去获取复制的图片。

咱们先把这个事件的event对象打印出来

var div = document.querySelector('div')
    div.addEventListener('paste', (e) => {
      console.log(e)
    })
复制代码

以下图：

这个event对象里面有个clipboardData属性，是一个DataTransfer对象，剪切板的数据都存在这个属性里面。

介绍一下clipboardData对象的几个属性

• files

  复制的文件的列表，数组类型，若是没有复制到文件，则为空数组。每一项是File对象。

  经过clipboardData数据看到的打印是空的，若是你打印files看到是有值的

• items

  包含复制数据的类型的列表，每一项都有2个值

  • kind

    复制的数据的类型，通常为string或者file等

  • type

    复制的数据的MIME-Type类型, 好比image/png, text/plain, text/html等

  它的原型链上还有getAsFile()（获取文件对象）, getAsString((str) => {})（获取字符串）等方法

• types

  复制的数据的类型的列表，通常为这几个值：

  • text/plain
  • text/html
  • Files
  • 等等

  这个clipboardData对象的主要api讲完了，我们试试经过代码来实现获取图片而且实现粘贴图片。

  若是咱们想阻止浏览器的默认行为（默认会把图片粘贴），而是经过咱们手动粘贴上，咱们就要阻止paste事件的默认行为

  经过e.preventDefault()阻止。

  代码以下：

  经过e.clipboardData.files方式

  var div = document.querySelector('div')
    div.addEventListener('paste', (e) => {
      e.preventDefault() // 阻止默认行为
      // 获取files列表
      const files = e.clipboardData.files
      for (let i = 0; i < files.length; i++) {
        const reader = new FileReader()
        reader.onload = (e) => {
          const img = new Image()
          // base64
          img.src = e.target.result
          // 插入到div中
          div.appendChild(img)
        }
        // 使用reader读取file对象
        reader.readAsDataURL(files[i])
      }
    })
  复制代码

  经过e.clipboardData.items方式

  var div = document.querySelector('div')
    div.addEventListener('paste', (e) => {
      e.preventDefault() // 阻止默认行为
      const items = e.clipboardData.items
      for (let i = 0; i < items.length; i++) {
        // 判断是file类型
        if (items[i].kind === 'file') {
          // 获取file对象 
          const file = items[i].getAsFile()
          const reader = new FileReader()
          reader.onload = (e) => {
            const img = new Image()
            // base64
            img.src = e.target.result
            // 插入到div中
            div.appendChild(img)
          }
          // 使用reader读取file对象
          reader.readAsDataURL(file)
        }
      }
    })
  复制代码

  这里的代码只是简单的把剪切板的图片读取渲染的过程，事实上还要兼容不少种状况，好比ctrl+ c复制网页的图片该如何渲染，如何把复制大段的文本提取出img元素等等。

总结

以上就是我总结的js实如今可编辑的div中粘贴图片。

这篇文章是想让你们学习到paste事件，和clipboardData对象，而后实现简易的复制粘贴图片。

感谢大家的阅读。