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對象，而後實現簡易的複製粘貼圖片。

感謝大家的閱讀。