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

最新推荐文章于 2024-09-13 21:34:28 发布

不浪漫先生12

最新推荐文章于 2024-09-13 21:34:28 发布

阅读量2k

点赞数 1

分类专栏：开发工具文章标签：编辑器前端 vue.js javascript

本文链接：https://blog.csdn.net/xxbwbdhc/article/details/130157633

版权

开发工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了如何在md-editor-v3编辑器上扩展一个自定义工具栏，用于添加附件功能。用户可以上传附件或通过链接方式添加，并将附件以a链接形式插入编辑区，点击链接可实现下载。实现过程中涉及DropdownToolbar组件和自定义toolbar配置。

摘要由CSDN通过智能技术生成

需求

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是通过下标来控制的。