某天捶朵，當(dāng)我安安靜靜的在敲代碼蜘矢，突然業(yè)務(wù)同事問我，
-‘hi综看，我們可以做公司公告的子應(yīng)用嗎品腹？’
-‘當(dāng)然可以’
-‘那，可以發(fā)布公告嗎寓搬？有圖有文字的那種珍昨！’
-‘你讓我想想’
開啟面向Google編程模式
劃重點(diǎn),核心API ===>document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
MDN 上的介紹
當(dāng)一個HTML文檔切換到設(shè)計模式時，
document暴露 **execCommand**方法句喷，該方法允許運(yùn)行命令來操縱可編輯內(nèi)容區(qū)域的元素镣典。
大多數(shù)命令影響
document的 selection（粗體，斜體等）唾琼，當(dāng)其他命令插入新元素（添加鏈接）或影響整行（縮進(jìn)）兄春。當(dāng)使用contentEditable時，調(diào)用execCommand()將影響當(dāng)前活動的可編輯元素锡溯。
話不多說赶舆，開始行動
- 首先需要準(zhǔn)備一個div用來承放內(nèi)容,
contenteditable屬性置為true，準(zhǔn)備幾個按鈕對編輯區(qū)域進(jìn)行操作
<button @click="execCommand('bold')">加粗</button>
<div class="editor" contenteditable="true" />
2.實(shí)現(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ù)器后再進(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é)束的時候，‘誒倡蝙？如果想撤銷編輯內(nèi)容咋整九串？還有回復(fù)？’
不復(fù)雜寺鸥，繼續(xù)給execCommand()傳入相應(yīng)的命令唄猪钮，第二步相同的方法，改一下傳入的參數(shù)即可胆建。
- 撤銷 execCommand('undo')
- 恢復(fù) execCommand('redo'）
最后烤低，來看一下實(shí)現(xiàn)效果。
測試一下
（完）
