【VUE+Element】vue-quill-editor的使用，上传图片+音频+视频+自定义上传方式

<p><strong>效果：</strong></p>
<p><img alt="" height="269" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-b693794fdfb44c4c319f0de2b38a6d5b.png" width="1200"></p>
<p><strong>前提：</strong></p>
<ul><li> quill-editor只支持三种标签p b span ,如果要用其他等标签，要用Quill中提供的register方法去注册标签。</li><li>对于原生的视频上传，只能上传地址，现在要实现本地上传</li><li>对于本地上传，需要组件辅助，上传时打开本地文件，如下。</li><li>对于音频及其他，要组件工具栏中自定义，因为原生没有对音频图标进行封装（格外注意！）</li><li>本文对编辑的文字大小做了格式扩展</li></ul>
<p><strong>实现： </strong></p>
<p>1、引入vue-quill-editor</p>
<pre class="blockcode"><code>cnpm install vue-quill-editor</code></pre>
<p>2、使用vue-quill-editor</p>
<p>template：</p>
<pre class="blockcode"><code>
      <el-upload class="avatar-uploader-editor" :action="serverUrl" name="img" :headers="header" :show-file-list="false"
      :on-success="uploadSuccess" :on-error="uploadError"> </el-upload>
      <el-upload class="avatar-uploader-editor-video" :action="serverUrl" name="video" :headers="header" :show-file-list="false"
      :on-success="uploadSuccessVideo" :on-error="uploadError"> </el-upload>
      <el-upload class="avatar-uploader-editor-voice" :action="serverUrl" name="voice" :headers="header" :show-file-list="false"
      :on-success="uploadSuccessVoice" :on-error="uploadError"> </el-upload>

<quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;margin-top: -22px;" :options="editorOption">
      <div id="toolbar" slot="toolbar">
         <button class="ql-bold" title="加粗">Bold</button>
         <button class="ql-italic" title="斜体">Italic</button>
         <button class="ql-underline" title="下划线">underline</button>
         <button class="ql-strike" title="删除线">strike</button>
         <button class="ql-blockquote" title="引用"></button>
         <button class="ql-code-block" title="代码"></button>
         <button class="ql-header" value="1" title="标题1"></button>
         <button class="ql-header" value="2" title="标题2"></button>
         <button class="ql-list" value="ordered" title="有序列表"></button>
         <button class="ql-list" value="bullet" title="无序列表"></button>
         <select class="ql-header" title="段落格式">
            <option selected>段落</option>
            <option value="1">标题1</option>
            <option value="2">标题2</option>
            <option value="3">标题3</option>
            <option value="4">标题4</option>
            <option value="5">标题5</option>
            <option value="6">标题6</option>
         </select>
         <select class="ql-size" title="字体大小">
            <option value="10px">10px</option>
            <option value="12px">12px</option>
            <option value="14px">14px</option>
            <option value="16px" selected>16px</option>
            <option value="18px">18px</option>
            <option value="20px">20px</option>
            <option value="30px">30px</option>
         </select>
         <select class="ql-font" title="字体">
            <option value="SimSun">宋体</option>
            <option value="SimHei">黑体</option>
            <option value="Microsoft-YaHei">微软雅黑</option>
            <option value="KaiTi">楷体</option>
            <option value="FangSong">仿宋</option>
            <option value="Arial">Arial</option>
         </select>
         <select class="ql-color" value="color" title="字体颜色"></select>
         <select class="ql-background" value="background" title="背景颜色"&g