Vditor自定义工具栏按钮，实现从素材库选择或上传图片功能。

Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。 这里主要分享Vditor自定义图片上传工具栏按钮，实现自定义按钮调用图片素材库选择和上传图片功能。 1、自定义图片上传按钮，并赋矛点击事件。 ``` { hotkey: '⌘-⇧-S', name: 'insertImage', tipPosition: 's', tip: '插入图片', className: 'right', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48"> <g fill="none"> <path fill="currentColor" d="M44 24a2 2 0 1 0-4 0h4ZM24 8a2 2 0 1 0 0-4v4Zm15 32H9v4h30v-4ZM8 39V9H4v30h4Zm32-15v15h4V24h-4ZM9 8h15V4H9v4Zm0 32a1 1 0 0 1-1-1H4a5 5 0 0 0 5 5v-4Zm30 4a5 5 0 0 0 5-5h-4a1 1 0 0 1-1 1v4ZM8 9a1 1 0 0 1 1-1V4a5 5 0 0 0-5 5h4Z"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m6 35l10.693-9.802a2 2 0 0 1 2.653-.044L32 36m-4-5l4.773-4.773a2 2 0 0 1 2.615-.186L42 31m-5-13V6m-5 5l5-5l5 5"/> </g> </svg>', click() { showChooseImgs.value = true; } } ``` 2、监听素材库选择或上传图片回传的图片路径。 ``` watch(() => imgs.value, (n) => { if (n) { vditor.value.insertValue(``); imgs.value = '';//监听到值存在则插入编辑器后清空值，以便二次选择 } }); ```