某天，當(dāng)我安安靜靜的在敲代碼，突然業(yè)務(wù)同事問(wèn)我，
-‘hi，我們可以做公司公告的子應(yīng)用嗎？’
-‘當(dāng)然可以’
-‘那，可以發(fā)布公告嗎？有圖有文字的那種！’
-‘你讓我想想’

開(kāi)啟面向Google編程模式

劃重點(diǎn),核心API ===>document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

MDN 上的介紹

當(dāng)一個(gè)HTML文檔切換到設(shè)計(jì)模式時(shí)，document暴露 **execCommand **方法，該方法允許運(yùn)行命令來(lái)操縱可編輯內(nèi)容區(qū)域的元素。

大多數(shù)命令影響document的 selection（粗體，斜體等），當(dāng)其他命令插入新元素（添加鏈接）或影響整行（縮進(jìn)）。當(dāng)使用contentEditable時(shí)，調(diào)用 execCommand() 將影響當(dāng)前活動(dòng)的可編輯元素。

話不多說(shuō)，開(kāi)始行動(dòng)

1. 首先需要準(zhǔn)備一個(gè)div用來(lái)承放內(nèi)容,contenteditable屬性置為true，準(zhǔn)備幾個(gè)按鈕對(duì)編輯區(qū)域進(jìn)行操作

 <button @click="execCommand('bold')">加粗</button>
 <div class="editor" contenteditable="true" />

2.實(shí)現(xiàn)幾個(gè)簡(jiǎn)單的文本效果

• 加粗 execCommand('bold')
• 添加水平線 execCommand('insertHorizontalRule'）

execCommand (name, args = null) {
  document.execCommand(name, false, args)
 }

• 添加鏈接 createLink ()

 createLink () {
  let url = window.prompt('請(qǐng)輸入鏈接地址')
  if (url) this.execCommand('createLink', url)
}

3.上傳圖片（以本地圖片為例，也可將圖片上傳服務(wù)器后再進(jìn)行添加）。

// html
<button class="upload-img" >插入圖片
   <input  type="file"  @change="insertImg($event)">
</button>
// js
  insertImg (e) {
      console.log(e.target.files[0])
      let reader = new FileReader()
      let file = e.target.files[0]
      reader.onload = () => {
        let base64Img = reader.result
        console.log(base64Img)
        this.execCommand('insertImage', base64Img)
        document.querySelector('.upload-img input').value = ''
      }
      reader.readAsDataURL(file)
    },

當(dāng)我以為一切都結(jié)束的時(shí)候，‘誒？如果想撤銷(xiāo)編輯內(nèi)容咋整？還有回復(fù)？’

不復(fù)雜，繼續(xù)給execCommand()傳入相應(yīng)的命令唄，第二步相同的方法，改一下傳入的參數(shù)即可。

• 撤銷(xiāo) execCommand('undo')
• 恢復(fù) execCommand('redo'）

最后，來(lái)看一下實(shí)現(xiàn)效果。

測(cè)試一下

（完）