前端UI组件富文本【免费下载链接】md-editor-v3Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...项目地址https://gitcode.com/gh_mirrors/md/md-editor-v3点击查看免费下载md-editor-v3 是一个面向 Vue3 生态、使用jsx与typescript语法开发的 Markdown 编辑器库内置白色/暗黑双主题、prettier 内容美化、多语言、图片粘贴/裁剪上传、仅预览渲染、mermaid 绘图与 katex 数学公式等能力。本文以仓库根目录的 README-CN.md 为骨架结合 packages 下的源码实现系统讲解它的安装、两种核心使用模式编辑器模式与仅预览模式、按需引用、核心属性与主题体系以及参与贡献时的提交规范帮助你在实际项目中快速落地并理解其底层工作方式。功能一览根据官方 README 的描述md-editor-v3 提供以下开箱即用的能力快捷插入内容工具栏支持编辑器浏览器全屏、页面内全屏等视图切换双主题支持内置白色主题和暗黑主题可通过属性绑定切换快捷键插入内容支持常用编辑快捷键prettier 内容美化以 CDN 方式引入 prettier只格式化 Markdown 内容不影响代码块等其他文本并可在代码内设置关闭多语言内置中文与英文默认中文支持自行扩展语言图片能力粘贴上传图片、图片裁剪上传仅预览模式不显示编辑器、无额外事件监听只渲染 Markdown 预览内容适合直接渲染文章多种预览主题内置default、vuepress、github、cyanosis、mk-cute、smart-blue6 种预览主题与原站主题不完全相同支持自定义主题绘图与公式mermaid绘图1.8.0、katex数学公式1.9.0工具栏可定制自定义工具栏顺序或显隐自定义扩展工具栏支持点击类型、下拉菜单类型及弹窗类型按需引用从v4.0.0起内部组件支持按需导入。这些能力并非只停留在 README 描述层面在源码中allToolbar 定义了编辑器默认的全部功能点加粗、下划线、斜体、删除线、标题、上下标、引用、列表、任务列表、行内/块级代码、链接、图片、表格、mermaid、katex、撤销/重做、保存、prettier 美化、页面全屏、屏幕全屏、预览、仅预览、HTML 预览、目录、GitHub 入口等allFooter 定义了底部工具栏字数统计、同步滚动开关与 README 的功能清单一一对应。安装使用 npm 安装核心库npm i md-editor-v3按需安装生态扩展# 使用已存在的语言、主题扩展例如日语 npm i vavt/cm-extension # 使用更多的扩展工具栏组件例如导出内容为 PDF npm i vavt/v3-extension更多扩展的使用及贡献方式可参考官方扩展仓库md-editor-extension。从当前仓库的 package.json 可以看出核心库还依赖了codemirror/*编辑内核、markdown-itMarkdown 解析、vavt/markdown-theme预览主题、xss安全过滤、medium-zoom图片放大等关键依赖其peerDependencies声明了vue ^3.5.3main指向./lib/cjs/index.cjs、module指向./lib/es/index.mjs可直接被 Vite 等现代构建工具消费。用法从v4.0.0开始内部组件支持按需引用。下面给出 README 中两种最核心的使用方式。编辑器模式在 Vue3 单文件组件中使用MdEditor完成双向绑定template MdEditor v-modeltext / /template script setup import { ref } from vue; import { MdEditor } from md-editor-v3; import md-editor-v3/lib/style.css; const text ref(# Hello Editor); /script要点说明v-model绑定的是 Markdown 源文本编辑器内部通过update:modelValue事件同步给外层见 Editor.tsx 的handleUpdateModelValue必须引入md-editor-v3/lib/style.css否则编辑器缺少基础样式编辑器模式默认同时展示工具栏、编辑区与预览区可通过属性进一步控制。仅预览模式不展示编辑器直接用MdPreview渲染 Markdown 文章配合MdCatalog生成目录导航template MdPreview :idid :modelValuetext / MdCatalog :editorIdid :scrollElementscrollElement / /template script setup import { ref } from vue; import { MdPreview, MdCatalog } from md-editor-v3; import md-editor-v3/lib/preview.css; const id preview-only; const text ref(# Hello Editor); const scrollElement document.documentElement; /script关键说明仅预览模式只需引入md-editor-v3/lib/preview.css体积更小MdPreview通过id与MdCatalog的editorId建立关联用于目录与标题锚点的联动服务端渲染SSR注意使用 SSR 时scrollElement应为字符类型例如html、body、#id、.class而不是 DOM 对象客户端渲染时可直接传document.documentElement。从源码角度看仅预览模式正是 README 中渲染文章直接显示、无额外监听的实现载体MdPreview/index.ts 与 MdCatalog/index.ts 各自提供独立的install方法可通过app.use()全局注册在 packages/index.ts 中MdPreview与MdCatalog经由export * from ./preview统一对外导出见 packages/preview.ts因此既可以import { MdPreview, MdCatalog }具名引入也可以全局安装。按需引用与全局安装README 强调按需引用4.0.0。仓库的入口文件清晰呈现了这一机制packages/index.ts 具名导出MdEditor、NormalToolbar、DropdownToolbar、ModalToolbar、MdModal、StrIcon、NormalFooterToolbar并通过export * from ./preview导出MdPreview、MdCatalog及类型、工具函数packages/MdEditor/index.ts 为Editor组件挂载了install方法安装MdEditor时会自动app.use()注册NormalToolbar、DropdownToolbar、ModalToolbar、MdCatalog、MdPreview方便整库全局引入。因此你可以按需选择要么import { MdEditor } from md-editor-v3局部注册以减小打包体积要么app.use(MdEditor)一次性全局注册全部相关组件。核心属性从 props 源码看懂配置项编辑器的全部属性定义集中在 packages/MdEditor/props.tsmdPreviewProps编辑器与预览共用L22-L262与在其之上扩展的editorPropsL264 起。以下表格整理常用属性及其默认值便于对照配置属性类型默认值说明modelValuestringMarkdown 内容双向绑定themelight \| darklight编辑器整体主题type.ts 定义Themes类型languagestringzh-CN界面语言内置中文/英文可扩展previewThemestringdefault预览主题可选default、vuepress、github、cyanosis、mk-cute、smart-bluetype.ts 注释明确列出codeThemestringatom代码高亮主题showCodeRowNumberbooleantrue预览中代码块是否显示行号codeStyleReversebooleantrue某些预览主题的代码背景为暗色系置为true会在该主题的 light 模式下自动使用暗色代码风格codeStyleReverseListArraystring[default, mk-cute]需要自动调整代码风格的预览主题列表mdHeadingIdFunction(text) text标题锚点 id 的生成方式sanitize(html: string) string原样返回Markdown 编译后的 HTML 后处理入口原生 HTML 默认关闭开启或使用自定义 renderer 时建议接入 DOMPurify、sanitize-html 等清洗策略noMermaid/noKatex/noHighlight/noEchartsbooleanfalse分别关闭 mermaid、katex、代码高亮、echarts 能力noImgZoomInbooleanfalse关闭编辑器默认的图片放大功能codeFoldablebooleantrue开启代码折叠否则用div替代detailsautoFoldThresholdnumber30触发自动折叠代码的行数阈值pageFullscreenbooleanfalse是否页面内全屏previewbooleantrue是否展开预览区htmlPreviewbooleanfalse是否展开 HTML 源码预览toolbarsArrayToolbarNamesallToolbar工具栏显隐与顺序默认即 config.ts 中的完整列表footersArrayFootersallFooter底部工具栏配置onChange/onHtmlChanged/onGetCatalog/onSave/onUploadImgFunctionundefined输入、HTML 变化、目录获取、保存快捷键、图片上传回调注意previewOnly属性在4.0.0起已从MdEditor移除props.ts 中被注释仅预览需求统一改用独立的MdPreview组件实现——这正是 README 中仅预览模式一节的设计初衷。主题体系与底层加载机制预览主题与代码主题预览主题default、vuepress、github、cyanosis、mk-cute、smart-blue六种通过previewTheme切换主题样式来自vavt/markdown-theme依赖README 说明不完全相同于同名原站主题且支持自定义主题。代码主题codeTheme默认为atom。在 config.ts 的codeCss中内置了 8 组明暗配对a11y、atom、github、gradient、kimbie、paraiso、qtcreator、stackoverflow每组均通过 CDN 提供 light/dark 两套 highlight.js 样式。CDN 按需加载扩展README 提到的 prettier、mermaid、katex、图片裁剪cropper、全屏screenfull、代码高亮highlight等能力均以 CDN 方式按需动态加载相关 URL 集中定义在 config.ts代码高亮highlightjs/cdn-assets11.12.0prettier 美化prettier3.9.6的standalone.js与plugins/markdown.js只格式化 md 内容可在代码内关闭图片裁剪cropperjs1.6.3css js全屏screenfull5.2.0源码注释说明screenfull6 改为 ESM而当前加载器通过经典 script 读取window.screenfull故固定使用 5.2.0mermaid 绘图mermaid11.17.2katex 公式katex0.18.5js cssechartsecharts6.1.0。同时globalConfig 提供了全局配置入口config(option)基于deepMerge深合并并排除instance相关键支持自定义各扩展的 URL、editorExtensionsAttrsCDN 资源的integrity与crossOrigin属性、languageUserDefined扩展语言、renderDelay默认 500ms、zIndex默认 20000以及mermaidConfig、katexConfig、echartsConfig、markdownItConfig、markdownItPlugins、codeMirrorExtensions等钩子方便深度定制。参与贡献提交规范README 中明确了协同开发的提交规范目的是与发布流水线对齐流水线会基于提交信息生成CHANGELOG.md见 CHANGELOG.md格式type(scope)!: summary推荐类型feat进入Featuresrefactor进入Refactorsfix进入Fixed Bugs其他类型进入Others标题应描述用户可感知的改动/修复问题不要只写机械动作例如只写bump xxx建议补充提交正文对应git cz的 long description说明动机与影响特别是依赖升级类提交不要使用纯版本号作为标题如6.3.2、v6.3.2-beta.1发布脚本会忽略docs(changelog): ...预留给流水线自动生成的 changelog 提交如果在提交标题或正文写了#123发布后流水线会给该 issue 留言并自动关闭只关联真正已在该版本解决的问题。示例git commit -m feat(editor): support drag-sort toolbar items git commit -m fix(preview): sync anchor when heading id contains emoji #1234 git commit -m fix(deps): bump vavt/markdown-theme to fix mermaid overflow git commit -m refactor(build): simplify dts rollup pipeline当前仓库的提交风格也可以从 package.json 中的lint-staged配置得到印证对*.{ts,tsx,vue}执行eslint --fix与prettier --write对*.{json,md}执行prettier --write即先格式化、再提交的工程化约束。进一步探索入门用法与属性默认值README-CN.md、packages/MdEditor/props.ts完整工具栏与静态文案、CDN 配置packages/MdEditor/config.ts入口导出与按需引用packages/index.ts、packages/preview.ts、packages/MdEditor/index.ts编辑器组合式逻辑与事件分发packages/MdEditor/Editor.tsx预览/目录组件packages/MdPreview/MdPreview.tsx、packages/MdCatalog/MdCatalog.tsx完整的开发示例含各种模式与扩展组合dev/App.tsx、example 目录下的 electron、nuxt、webComponent 示例工程。赞分享前端UI组件富文本【免费下载链接】md-editor-v3Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...项目地址https://gitcode.com/gh_mirrors/md/md-editor-v3点击查看免费下载相关推荐强大的Vue3 Markdown编辑器md-editor-v3强大的Vue3 Markdown编辑器md editor v3 md editor v3 是一个专为Vue3设计的现代化Markdown编辑器采用jsx和T前端UI组件富文本强大的Vue3 Markdown编辑器md-editor-v3强大的Vue3 Markdown编辑器md editor v3 md editor v3 是一个专为Vue3设计的现代化Markdown编辑器采用JSX和T前端UI组件富文本Vue3 Markdown编辑器md-editor-v3技术解析与应用指南Vue3 Markdown编辑器md editor v3技术解析与应用指南 md editor v3是一个专为Vue3设计的现代化Markdown编辑器采用前端UI组件富文本上一篇雾霾照片秒变清晰深度学习图像去雾技术深度解析下一篇wifi-hacker实战案例从扫描到破解的全过程演示创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考