“发布公司公告，有图有文字的那种”

某天，当我安安静静的在敲代码，突然业务同事问我，
-‘hi，我们可以做公司公告的子应用吗？’
-‘当然可以’
-‘那，可以发布公告吗？有图有文字的那种！’
-‘你让我想想’

开启面向Google编程模式

划重点,核心API ===>document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

MDN 上的介绍

当一个HTML文档切换到设计模式时，document暴露 **execCommand **方法，该方法允许运行命令来操纵可编辑内容区域的元素。

大多数命令影响document的 selection（粗体，斜体等），当其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。

话不多说，开始行动

1. 首先需要准备一个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'）

最后，来看一下实现效果。

测试一下

（完）