{"id":14981968,"url":"https://github.com/imzbf/md-editor-v3","last_synced_at":"2025-05-13T17:11:21.419Z","repository":{"id":37281622,"uuid":"381968555","full_name":"imzbf/md-editor-v3","owner":"imzbf","description":"Markdown 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...","archived":false,"fork":false,"pushed_at":"2025-04-22T09:28:30.000Z","size":29249,"stargazers_count":1952,"open_issues_count":0,"forks_count":185,"subscribers_count":14,"default_branch":"develop","last_synced_at":"2025-05-04T07:04:20.499Z","etag":null,"topics":["editor","jsx","markdown","markdown-editor","theme","tsx","vue","vue3"],"latest_commit_sha":null,"homepage":"https://imzbf.github.io/md-editor-v3","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imzbf.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-07-01T08:49:40.000Z","updated_at":"2025-05-03T09:40:22.000Z","dependencies_parsed_at":"2023-11-07T05:14:36.960Z","dependency_job_id":"50e9f53e-0730-493d-8380-42da727ea2fa","html_url":"https://github.com/imzbf/md-editor-v3","commit_stats":{"total_commits":1229,"total_committers":13,"mean_commits":94.53846153846153,"dds":0.3100081366965012,"last_synced_commit":"6de07c0790c6b24404e6478c12d91cc5c505ad65"},"previous_names":[],"tags_count":179,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzbf%2Fmd-editor-v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzbf%2Fmd-editor-v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzbf%2Fmd-editor-v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzbf%2Fmd-editor-v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imzbf","download_url":"https://codeload.github.com/imzbf/md-editor-v3/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253528362,"owners_count":21922623,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","jsx","markdown","markdown-editor","theme","tsx","vue","vue3"],"created_at":"2024-09-24T14:04:34.233Z","updated_at":"2025-05-13T17:11:16.408Z","avatar_url":"https://github.com/imzbf.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","编码与开发工具"],"sub_categories":["开发组件"],"readme":"# 🎄 md-editor-v3\n\n![](https://img.shields.io/github/package-json/v/imzbf/md-editor-v3) ![](https://img.shields.io/npm/dm/md-editor-v3) ![](https://img.shields.io/github/license/imzbf/md-editor-v3) ![](https://img.shields.io/badge/ssr-%3E1.6.0-brightgreen) ![](https://img.shields.io/badge/webcomponent-%3E4.19.0-brightgreen)\n\n[English](https://github.com/imzbf/md-editor-v3) \\| 中文\n\nvue3 环境的 Markdown 编辑器，使用 `jsx` 和 `typescript` 语法开发。\n\n- 文档与在线预览：[传送门](https://imzbf.github.io/md-editor-v3)\n\n- 同系列`react`版本：[md-editor-rt](https://github.com/imzbf/md-editor-rt)\n\n## ⭐️ 功能一览\n\n- 快捷插入内容工具栏、编辑器浏览器全屏、页面内全屏等；\n- 内置的白色主题和暗黑主题，支持绑定切换；\n- 支持快捷键插入内容； 支持使用 `prettier` 格式化内容（使用 CDN 方式引入，只支持格式化 md 内容，可在代码内设置关闭）；\n- 多语言，支持自行扩展语言；\n- 粘贴上传图片，图片裁剪上传；\n- 仅预览模式（不显示编辑器，只显示 md 预览内容，无额外监听）；\n- 预览主题，内置`default`、`vuepress`、`github` 、`cyanosis`、`mk-cute`、`smart-blue` 6 种预览主题（不完全相同），支持自定义主题（参考文档 demo 页示例）；\n- `mermaid`绘图（\u003e=1.8.0），`katex`数学公式（\u003e=1.9.0）；\n- 自定义工具栏顺序或显示，自定义扩展工具栏（支持点击类型、下拉菜单类型及弹窗类型）等。\n- 按需引用(\u003e=4.0.0)。\n\n## 🗺 预览图\n\n| 默认模式 | 暗黑模式 | 仅预览 |\n| --- | --- | --- |\n| ![](https://imzbf.github.io/md-editor-v3/imgs/preview-light.png) | ![](https://imzbf.github.io/md-editor-v3/imgs/preview-dark.png) | ![](https://imzbf.github.io/md-editor-v3/imgs/preview-previewOnly.png) |\n\n输入提示和自定义简单的标记、表情扩展预览\n\n![](https://imzbf.github.io/md-editor-v3/imgs/mark_emoji.gif)\n\n## 📦 安装\n\n```shell\nyarn add md-editor-v3\n```\n\n使用已存在的语言、主题扩展，例如：日语\n\n```shell\nyarn add @vavt/cm-extension\n```\n\n使用更多的扩展工具栏组件，例如：导出内容为 PDF\n\n```shell\nyarn add @vavt/v3-extension\n```\n\n更多使用及贡献方式参考：[md-editor-extension](https://github.com/imzbf/md-editor-extension)\n\n## 💡 用法\n\n从`v4.0.0`开始，内部组件支持按需引用。\n\n### ✍🏻 编辑器模式\n\n```vue\n\u003ctemplate\u003e\n  \u003cMdEditor v-model=\"text\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport { MdEditor } from 'md-editor-v3';\nimport 'md-editor-v3/lib/style.css';\n\nconst text = ref('# Hello Editor');\n\u003c/script\u003e\n```\n\n### 📖 仅预览模式\n\n```vue\n\u003ctemplate\u003e\n  \u003cMdPreview :editorId=\"id\" :modelValue=\"text\" /\u003e\n  \u003cMdCatalog :editorId=\"id\" :scrollElement=\"scrollElement\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport { MdPreview, MdCatalog } from 'md-editor-v3';\nimport 'md-editor-v3/lib/preview.css';\n\nconst id = 'preview-only';\nconst text = ref('# Hello Editor');\nconst scrollElement = document.documentElement;\n\u003c/script\u003e\n```\n\n当使用服务端渲染时，`scrollElement`应该是字符类型，例：`html`、`body`、`#id`、`.class`。\n\n---\n\n更多用法请前往 [文档](https://imzbf.github.io/md-editor-v3)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimzbf%2Fmd-editor-v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimzbf%2Fmd-editor-v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimzbf%2Fmd-editor-v3/lists"}