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

開啟面向Google編程模式

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

MDN 上的介紹

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

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

話不多說，開始行動

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

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

2.實現(xiàn)幾個簡單的文本效果

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

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

• 添加鏈接 createLink ()

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

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

// 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)
    },

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

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

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

最后，來看一下實現(xiàn)效果。

測試一下

（完）