前端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-v37.x对应仓库feature/7分支首个发布版本7.0.0的使用环境整理完整梳理主入口公开导出、MdEditor的关键 props 与 ref API、MdPreview、MdCatalog、自定义工具栏/页脚组件、config()全局配置、安全与 HTML 清洗以及副作用清理。读完你可以直接在 Vue3 项目中完成编辑器、纯预览、目录导航与自定义扩展的接入并理解每个配置项在源码中的默认行为与安全边界。若你的项目使用其他版本请先按文末方法核对本地安装包的类型定义。目录1. 公开导出从哪些入口拿什么2.MdEditor关键 props3.MdEditorref API4.MdPreview纯渲染组件5.MdCatalog目录导航6. 自定义工具栏 / 页脚组件7.config()全局配置8. 安全与 HTML 清洗9. 清理副作用10. 用户项目里如何核对当前版本 API1. 公开导出从哪些入口拿什么主入口 packages/index.ts 与 packages/preview.ts 是全部公开能力的出口。其中packages/index.ts显式导出MdEditor及一批扩展组件NormalToolbar、DropdownToolbar、ModalToolbar、MdModal、StrIcon、NormalFooterToolbar随后export * from ./preview把预览入口的内容一并转发packages/preview.ts导出MdPreview、MdCatalog并转发 markdown-it XSS 插件、config、util及~/type下的全部类型。汇总的公开能力清单组件MdEditor、MdPreview、MdCatalog、NormalToolbar、DropdownToolbar、ModalToolbar、MdModal、StrIcon、NormalFooterToolbar函数/常量config、allToolbar、allFooter、editorExtensionsAttrs、clearSideEffects、XSSPlugin类型导出ExposeParam、MdHeadingId、ToolbarNames、Footers、Themes、PreviewThemes、GlobalConfig、InsertParam、FocusOption等详见 packages/MdEditor/type.ts样式入口需要区分场景编辑器含编辑预览完整 UImd-editor-v3/lib/style.css仅预览md-editor-v3/lib/preview.css对应源码中预览专用样式集中在 packages/MdEditor/layouts/Content/index.scss 与 packages/MdEditor/styles/preview.scss。注意只使用MdPreview时不要误导入完整编辑器样式避免引入编辑框、工具栏等无关 CSS。2.MdEditor关键 propsMdEditor的 props 由 packages/MdEditor/props.ts 定义它先定义mdPreviewProps再通过...mdPreviewProps扩展出editorProps。因此编辑器天然继承预览组件的全部渲染配置下面按使用场景分组说明。最常用prop类型默认值说明modelValuestringMarkdown 内容配合update:modelValue实现 v-modelthemelight \| darklight整体主题languagestringzh-CN界面文案语言内置zh-CN/en-USpreviewThemestringdefault预览区样式常见default、github、vuepress、mk-cute、smart-blue、cyanosiscodeThemestringatom代码高亮主题如atom、github、a11y、gradient等见 config.ts 中codeCssidstringmd-editor-v3实例唯一标识5.x 起替代旧字段editorIdonChange(v: string) void-输入回调onSave(v: string, h: Promisestring) void-保存回调第二参是渲染出的 HTML PromiseonUploadImg(files: File[], callBack) void-自定义图片上传调用callBack(urls)回填显示与布局pageFullscreen默认false页面内全屏preview默认true是否展开预览htmlPreview默认false是否展开 HTML 源码预览toolbars默认allToolbar工具栏项类型ArrayToolbarNamesToolbarNames keyof ToolbarTips | numberfloatingToolbars默认[]6.0.0浮动工具栏toolbarsExclude默认[]从默认工具栏中排除的项footers默认allFooter [markdownTotal, , scrollSwitch]页脚项inputBoxWidth默认50%输入框宽度支持100px、50%5.3.0 起使用百分比拖拽最小宽度为0.110%catalogLayoutfixed | flat默认fixed悬浮在内容上方或展示在右侧catalogMaxDepth默认undefined限制目录最大展示层级编辑体验placeholder默认空内容提示tabWidth默认2一个 Tab 对应的空格数autoFocus默认false自动聚焦输入框disabled默认false禁用文本区域readOnly默认false只读maxLength最大字符数autoDetectCode默认false自动识别粘贴代码类别目前支持 VSCode 复制代码识别showToolbarName默认false工具栏图标下方显示文字名称completionscodemirror/autocomplete的CompletionSource[]会被嵌入为autocompletion({ override: [...completions] })tableShape默认[6, 4]表格预设格子数也可传[6, 4, 10, 8]scrollAuto默认true输入框与预览同步滚动渲染控制sanitize(html) html默认恒等函数HTML 后处理入口适合接入 DOMPurifysanitizeMermaid(svg) Promisestring默认Promise.resolve(h)Mermaid 渲染后的 SVG 异步清洗mdHeadingId({ text, level, index }) string默认({ text }) text标题 id 生成方式showCodeRowNumber默认true预览代码是否显示行号codeStyleReverse默认true暗色预览主题下自动切换暗色代码风格codeStyleReverseList默认[default, mk-cute]需要自动调整的预览主题列表formatCopiedText(text) text复制代码时的格式化方法previewComponent自定义预览组件可传组件对象或函数codeFoldable默认true代码折叠不开启时用div替代details标签autoFoldThreshold默认30触发自动折叠的行数阈值customIcon自定义图标CustomIcon类型依赖开关noPrettier、noUploadImg、noMermaid、noKatex、noHighlight、noImgZoomIn、noEcharts均为默认false的布尔开关用于按需关闭对应内置能力内部依赖库详见 config.ts 的globalConfig.editorExtensions。图片与拖拽transformImgUrl(t) string | Promisestring替换粘贴图片链接onDrop(event: DragEvent)拖拽事件回调自定义插槽型扩展defToolbars自定义工具栏项string | VNodedefFooters自定义页脚项string | VNode重要事件emitsonChange、onSave、onUploadImg、onHtmlChanged、onGetCatalog、onError、onBlur、onFocus、onInput、onDrop、onInputBoxWidthChange、onRemount。完整 emits 列表见 props.ts 中的editorEmits。其中onError会收到InnerErrorname可能是Cropper、fullscreen、prettier、overlength、mermaid、echartsonGetCatalog会收到HeadList[]含text、level、line等字段。3.MdEditorref API通过模板 ref 获取实例后其类型为ExposeParam定义见 type.ts。可用方法on(eventName, callback)添加事件监听事件名与ExposeEvent对应如pageFullscreen、preview、catalog等状态切换事件togglePageFullscreen(status?)切换页面内全屏toggleFullscreen(status?)切换屏幕全屏togglePreview(status?)切换预览togglePreviewOnly(status?)切换编辑器内仅预览状态toggleHtmlPreview(status?)切换 HTML 预览toggleCatalog(status?)切换目录triggerSave()触发保存走onSaveinsert(generate)手动插入内容focus(options?)手动聚焦rerender()手动重新渲染getSelectedText()获取当前选中文本resetHistory()重置撤销/重做历史domEventHandlers(handlers)注册 CodeMirror DOM 事件处理器execCommand(direct)执行内部插入指令ToolDirectivegetEditorView()获取底层 CodeMirror 6 的EditorView实例值得注意的三点insert(generate)会把「当前选中文本」作为入参传给生成器生成器返回InsertParamtargetValue待插入内容、select是否选中、deviationStart/deviationEnd选区偏移从而精确控制插入行为getEditorView()允许业务方直接接管底层 CodeMirror 6 实例EditorView用于高级扩展togglePreviewOnly只是编辑器内部状态切换不等同于继续使用 4.x 时代的previewOnlyprop——该 prop 自 4.0.0 起已移除props.ts 中该字段已被注释纯展示请使用独立的MdPreview组件。4.MdPreview纯渲染组件MdPreview复用mdPreviewProps见 MdPreview/MdPreview.tsx 与 props.ts 的mdPreviewProps因此以下 props 与编辑器行为一致内容与主题modelValue、theme、language、previewTheme、codeTheme、id渲染控制mdHeadingId、sanitize、sanitizeMermaid、showCodeRowNumber、formatCopiedText、previewComponent、codeFoldable、autoFoldThreshold依赖开关noMermaid、noKatex、noHighlight、noImgZoomIn、noEcharts事件onHtmlChanged、onGetCatalog、onRemountref API 只有一个方法rerender()补充说明MdPreview仍兼容旧字段editorIddeprecated但新代码优先使用idCSS 入口必须用preview.css不要误导入完整编辑器样式见第 1 节。5.MdCatalog目录导航MdCatalogMdCatalog/MdCatalog.tsx通过事件总线监听编辑器/预览实例发布的目录结构CATALOG_CHANGED等事件见 static/event-name.ts并负责滚动联动与高亮。核心 propsprop默认值说明editorIdundefined必须与目标编辑器/预览实例的id一致scrollElement#${editorId}-preview-wrapper滚动容器可传选择器字符串或 HTMLElementthemelight主题offsetTop20标题距滚动容器顶部多少像素时高亮当前目录项scrollElementOffsetTop0滚动区域的固定顶部高度mdHeadingId({ text }) text与编辑器/预览的mdHeadingId保持一致的标题 id 生成规则isScrollElementInShadowfalse滚动容器是否在 Web Component 的 shadow DOM 内syncWithprevieweditor \| preview与哪个区域同步5.3.0catalogMaxDepthundefined最大展示层级onClick-点击目录项回调(e, tocItem)onActive-高亮项变化回调关键约束editorId不匹配时目录拿不到数据scrollElement默认指向#${editorId}-preview-wrapperSSR 场景推荐传选择器字符串若传自定义元素该元素本身应是实际滚动容器并且应具备定位上下文源码注释特别强调「元素必须定位」Web Component 场景中如果滚动容器在 shadow DOM 内document查询不到需要设置isScrollElementInShadow目录层级树由catalogscomputed 依据level递归构建TocItem支持children。6. 自定义工具栏 / 页脚组件库提供三个可直接复用的扩展组件均位于packages/下NormalToolbarNormalToolbar/NormalToolbar.tsx普通按钮式工具栏项title、onClick、默认插槽/trigger、disabled、theme等DropdownToolbarDropdownToolbar/DropdownToolbar.tsx下拉式工具栏项ModalToolbarModalToolbar/ModalToolbar.tsx弹窗式工具栏项内部配合MdModal使用NormalFooterToolbarNormalFooterToolbar/NormalFooterToolbar.tsx页脚项。接入方式不是自动注册而是两步走在toolbars/footers数组里放数字占位如0、1在defToolbars/defFooters里按顺序提供对应的 vnode。库会克隆这些 vnode并额外注入以下 propsthemepreviewThemelanguagecodeThemedisabledshowToolbarNameinsert(generate)—— 仅工具栏扩展会拿到页脚组件拿不到正因为扩展组件会被注入这些 propsNormalToolbar等组件在 props 定义中显式声明了theme、previewTheme、language、codeTheme、disabled、showToolbarName、insert其中insert的注释说明声明它是为了规避克隆组件自动嵌入 insert 方法时产生 warning。7.config()全局配置config(options)config.ts修改的是全局单例globalConfig。源码中config的实现是export const config: Config (option) { return deepMerge(globalConfig, option, { excludeKeys(key) { return /[iI]{1}nstance/.test(key); } }); };两个关键事实深合并config()内部是deepMerge嵌套对象字段会被合并名字带instance的字段不会深合并excludeKeys会排除任何含instance的 key这些字段如highlight.instance、mermaid.instance、katex.instance直接整体替换。最重要的字段editorExtensions传入本地实例或 CDN 地址覆盖内置依赖highlight、prettier、cropper、screenfull、mermaid、katex、echarts。其中 ECharts 相关editorExtensions.echarts.parseOption(code, { editorId, element })6.5.0支持用于自定义 ECharts 代码块内容解析editorExtensions.echarts.sanitizeOption(option, { editorId, element })同步返回处理后的 option默认限制 tooltip HTML、转义数据视图文案并检查导航协议。editorExtensionsAttrs为注入的 script/link 补充integrity、crossOrigin等属性。源码 config.ts 中内置了覆盖 highlight、prettier、cropper、screenfull、mermaid、katex、echarts 的完整 SRISubresource Integrity哈希。注意不要在editorExtensionsAttrs中定义 script 的src/onload/id或 link 的rel/href/id它们会被默认值覆盖。editorConfiglanguageUserDefined自定义提示语言{ [key]: StaticTextDefaultValue }mermaidTemplate自定义内部 mermaid 模板MermaidTemplaterenderDelay输入渲染延迟ms默认500zIndex内部弹窗、下拉框等内联 z-index默认20000codeMirrorExtensions(extensions, options)接管或补充 CodeMirror 扩展列表。回调会收到当前主题下的扩展数组顺序为[keymap, minimalSetup, markdown, lineWrapping, updateListener, domEventHandlers, oneDark/oneLight]以及options含editorId、theme、内置keyBindings。markdownItConfig(md, options)直接修改 markdown-it 实例如md.set({ html: true })。markdownItPlugins(plugins, options)调整内置插件列表与参数ArrayMarkdownItConfigPlugin。mermaidConfig(base)Mermaid 配置。默认securityLevel: strict显式返回loose可开放受信任交互。受保护配置包含dompurifyConfig。katexConfig(baseConfig)KaTeX 配置。默认trust: false允许显式返回true或信任判断函数。echartsConfig(base)只处理解析后的 option不负责解析代码块文本之后还会执行sanitizeOption。细节与安全边界建议默认把config()放在应用启动阶段执行一次不要在组件setup()里频繁调用单例会被反复深合并。ECharts 的调用顺序为parseOption → echartsConfig → sanitizeOption → setOption。默认只处理配置字段及baseOption、时间轴options、media[].option保留普通业务数据导航允许 HTTP(S)、mailto、tel、相对地址和锚点。在内容可信时可单独覆盖parseOption支持 JavaScript 函数再按需设置sanitizeOption: (option) option开放 HTML tooltip 等能力。解析或清洗失败时保留转义源码通过echarts错误事件报告不回退执行 JavaScript这不是沙箱应用提供的函数仍是受信任代码。ECharts 代码块解析版本边界6.5.0历史版本不支持parseOption6.5.0 7.0.0支持parseOption默认解析行为沿用旧版本7.0.0默认使用JSON5.parse只接受对象数据且不会执行代码仍可通过editorExtensions.echarts.parseOption自定义解析器。该默认行为在源码中有完整实现config.ts 中globalConfig.editorExtensions.echarts.parseOption使用JSON5.parse并校验顶层必须是对象拒绝数组与非对象解析失败抛出带cause的SyntaxErrorutils/echarts.ts 中的sanitizeEchartsOption负责收敛 tooltip强制renderMode: richText、数据视图文案转义、link/sublink协议白名单http/https/mailto/tel以及树图treemap/sunburst节点的递归清洗。8. 安全与 HTML 清洗两条常用路径sanitize(html) html适合业务方接入 DOMPurify、自定义清洗逻辑。源码默认是恒等函数(html) htmlprops.ts即不开启任何清洗sanitizeMermaid(svg) Promisestring默认 Mermaid 渲染之后的 SVG 后处理。清洗失败时不插入原始 SVG更换该函数时需使当前预览缓存失效XSSPlugin作为 markdown-it 插件插入渲染链见 layouts/Content/markdownIt/xss/index.ts从packages/preview.ts直接导出。关于原生 HTML默认关闭。业务方可通过markdownItConfig(md)调用md.set({ html: true })显式开启并根据输入来源选择清洗规则自定义 renderer、解析器和回调属于应用提供的受信任代码不属于文档数据的安全边界——对用户可控的 Markdown 输入必须依赖sanitize/XSSPlugin做清洗。9. 清理副作用clearSideEffects()用于移除组件通过 CDN 注入的资源标签script/link定义在 packages/util.tsexport const clearSideEffects () { (Object.keys(CDN_IDS) as Arraykeyof typeof CDN_IDS).forEach((key) { const ele document.getElementById(CDN_IDS[key]); if (ele) { ele.remove(); } }); };它遍历CDN_IDSstatic/index.ts中记录的注入元素 id 并移除。适用场景微前端宿主卸载时清理全局资源Web Component 动态注册/卸载时清理演示页反复重建实例时避免 CDN 标签堆积。如果业务方完全通过config()注入本地实例并自行管理样式通常不需要这个方法。10. 用户项目里如何核对当前版本 API如果担心本文依据的版本7.xfeature/7分支与你的项目不一致按以下顺序核对查看node_modules/md-editor-v3/package.json确认版本号查看node_modules/md-editor-v3/lib/types/index.d.ts核对类型定义重点看ExposeParam、MdEditorProps、GlobalConfig必要时直接看仓库源码packages/MdEditor/props.ts全部 props 与默认值packages/MdEditor/type.ts全部公开类型packages/MdEditor/config.ts全局配置默认值与config()实现此外仓库的 README.md 与 CHANGELOG.md 记录了各版本行为变化例如previewOnlyprop 的移除、id对editorId的替换、EChartsparseOption的引入等升级前建议对照变更记录排查破坏性更新。赞分享前端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点击查看免费下载相关推荐Ant Design Popover 气泡卡片组件完全指南从基本用法到源码级定位原理Ant Design Popover 气泡卡片组件完全指南从基本用法到源码级定位原理 Popover气泡卡片是 Ant Design 中用于在目标元素周围前端UI组件富文本md-editor-v3 安装和配置指南md editor v3 安装和配置指南 项目基础介绍和主要编程语言 md editor v3 是一个基于 Vue 3 开发的 Markdown 编辑器使用前端UI组件富文本md-editor-v3 安装和配置指南md editor v3 安装和配置指南 项目基础介绍 md editor v3 是一个基于 Vue 3 开发的 Markdown 编辑器组件使用 JSX 和前端UI组件富文本上一篇Wav2Lip-HD打造高保真视频唇形同步下一篇【亲测免费】 Intel(R) RDT 软件包资源管理与优化的新利器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考