markdown富文本编辑器(md-editor-v3)-自定义扩展工具栏

需求

1.在原有的md-editor-v3上扩展一个自定义工具栏，”添加附件“；

2.可以通过链接上传附件，同时也可以直接上传附件；

3.上传后，在指定区域(md编辑器的编辑区)以a链接的形式插入内容；

4.点击该链接后，可以实现下载

预期效果:

选择添加链接

部分重要代码
<md-editor
        ref="mdEditorRef"
        v-model="text"
        :auto-detect-code="true"
        style="height: 100%"
        :toolbars-exclude="[github, save]"
        :toolbars="toolbars" //定义toolbars
        :show-code-row-number="true"
        @on-upload-img="onUploadImg"
        @on-change="onChange"
      >
        <template #defToolbars> //自定义工具
          <DropdownToolbar
            title="附件"
            :visible="appendixVisible"
            :on-change="appendixVisibleChanged"
          >
            <template #overlay>
              <div class="appendix-container">
                <ul class="md-editor-menu" style="height: 56px">
                  <li class="md-editor-menu-item" @click="handleInsertLink">
                    添加链接
                  </li>
                  <li class="md-editor-menu-item">
                    <el-upload
                      ref="uploadRef"
                      :auto-upload="false"
                      :on-change="uploadAppendix"
                      :show-file-list="false"
                      accept=".jpg,.jpeg,.png,.gif,.heic,.webp,.md,.ppt,.pptx,.doc,.docx,.xls,.pdf,.rar,.zip,.7z,.gz,.tar,.xmind,.xmap"
                      >上传文件
                    </el-upload>
                  </li>
                </ul>
              </div>
            </template>
            <template #trigger>
              <el-icon class="md-editor-icon" :size="18"
                ><upload-filled
              /></el-icon>
            </template>
          </DropdownToolbar>
        </template>
      </md-editor>

   ...
import MdEditor from md-editor-v3 //安装并在需要该组件的组件内引入
import md-editor-v3/lib/style.css //引入样式文件
const DropdownToolbar = MdEditor.DropdownToolbar //使用官方的下拉组件，并在template使用
const toolbars = [
  bold,
  underline,
  italic,
  -,
  title,
  strikeThrough,
  sub,
  sup,
  quote,
  unorderedList,
  orderedList,
  task,
  -,
  codeRow,
  code,
  link,
  image,
  0,
  table,
  mermaid,
  katex,
  -,
  revoke,
  next,
  save,
  =,
  pageFullscreen,
  fullscreen,
  preview,
  htmlPreview,
  catalog,
  github
]

特别注意:当扩展工具栏时，需要在toolbars数组中预留一个位置，来显示我们新增的图标。目前md-editor-v3是通过下标来控制的。