某天，当我安安静静的在敲代码，突然业务同事问我，
-‘hi，我们可以做公司公告的子应用吗？’
-‘当然可以’
-‘那，可以发布公告吗？有图有文字的那种！’
-‘你让我想想’
开启面向Google编程模式
划重点,核心API ===>document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
MDN 上的介绍
当一个HTML文档切换到设计模式时，
document暴露 **execCommand**方法，该方法允许运行命令来操纵可编辑内容区域的元素。
大多数命令影响
document的 selection（粗体，斜体等），当其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用execCommand()将影响当前活动的可编辑元素。
话不多说，开始行动
- 首先需要准备一个div用来承放内容,
contenteditable属性置为true，准备几个按钮对编辑区域进行操作
<button @click="execCommand('bold')">加粗</button>
<div class="editor" contenteditable="true" />
2.实现几个简单的文本效果
- 加粗 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.上传图片（以本地图片为例，也可将图片上传服务器后再进行添加）。
// 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)
},
当我以为一切都结束的时候，‘诶？如果想撤销编辑内容咋整？还有回复？’
不复杂，继续给execCommand()传入相应的命令呗，第二步相同的方法，改一下传入的参数即可。
- 撤销 execCommand('undo')
- 恢复 execCommand('redo'）
最后，来看一下实现效果。
测试一下
（完）
