{"id":13455695,"url":"https://github.com/Tencent/cherry-markdown","last_synced_at":"2025-03-24T08:34:38.355Z","repository":{"id":37378678,"uuid":"417477677","full_name":"Tencent/cherry-markdown","owner":"Tencent","description":"✨ A Markdown Editor","archived":false,"fork":false,"pushed_at":"2024-10-11T11:09:17.000Z","size":139535,"stargazers_count":3531,"open_issues_count":186,"forks_count":411,"subscribers_count":46,"default_branch":"main","last_synced_at":"2024-10-19T05:48:41.919Z","etag":null,"topics":["editor","javascript","markdown"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.CN.md","changelog":"CHANGELOG.md","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}},"created_at":"2021-10-15T11:38:22.000Z","updated_at":"2024-10-17T16:00:41.000Z","dependencies_parsed_at":"2022-07-15T16:37:10.424Z","dependency_job_id":"42a14bd3-bb32-48cf-aa46-1d6e65ab4e81","html_url":"https://github.com/Tencent/cherry-markdown","commit_stats":{"total_commits":387,"total_committers":29,"mean_commits":"13.344827586206897","dds":0.6718346253229974,"last_synced_commit":"519ee7e76a6857d55b831ddad775f430974f86e0"},"previous_names":[],"tags_count":82,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fcherry-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fcherry-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fcherry-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fcherry-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/cherry-markdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221955899,"owners_count":16907463,"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","javascript","markdown"],"created_at":"2024-07-31T08:01:09.534Z","updated_at":"2024-10-28T23:30:33.411Z","avatar_url":"https://github.com/Tencent.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"logo/logo--color.svg\" alt=\"cherry logo\" width=\"50%\"/\u003e\u003c/p\u003e\n\n# Cherry Markdown Editor\n[![Cloud Studio Template](https://cs-res.codehub.cn/common/assets/icon-badge.svg)](https://cloudstudio.net#https://github.com/Tencent/cherry-markdown)\n\n### 文档\n- [初识cherry markdown 编辑器](https://github.com/Tencent/cherry-markdown/wiki/%E5%88%9D%E8%AF%86cherry-markdown-%E7%BC%96%E8%BE%91%E5%99%A8)\n- [hello world](https://github.com/Tencent/cherry-markdown/wiki/hello-world)\n- [配置图片\u0026文件上传接口](https://github.com/Tencent/cherry-markdown/wiki/%E9%85%8D%E7%BD%AE%E5%9B%BE%E7%89%87\u0026%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E6%8E%A5%E5%8F%A3)\n- [调整工具栏](https://github.com/Tencent/cherry-markdown/wiki/%E8%B0%83%E6%95%B4%E5%B7%A5%E5%85%B7%E6%A0%8F)\n- [自定义语法](https://github.com/Tencent/cherry-markdown/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95)\n- [配置项全解](https://github.com/Tencent/cherry-markdown/wiki/%E9%85%8D%E7%BD%AE%E9%A1%B9%E5%85%A8%E8%A7%A3)\n- [配置主题](https://github.com/Tencent/cherry-markdown/wiki/%E9%85%8D%E7%BD%AE%E4%B8%BB%E9%A2%98)\n- [扩展代码块语法](https://github.com/Tencent/cherry-markdown/wiki/%E6%89%A9%E5%B1%95%E4%BB%A3%E7%A0%81%E5%9D%97%E8%AF%AD%E6%B3%95)\n- [事件\u0026回调](https://github.com/Tencent/cherry-markdown/wiki/%E4%BA%8B%E4%BB%B6\u0026%E5%9B%9E%E8%B0%83)\n- [API](https://tencent.github.io/cherry-markdown/examples/api.html)\n\n### 在线体验\n\n- [全功能](https://tencent.github.io/cherry-markdown/examples/index.html)\n- [基础版](https://tencent.github.io/cherry-markdown/examples/basic.html)\n- [H5](https://tencent.github.io/cherry-markdown/examples/h5.html)\n- [多实例](https://tencent.github.io/cherry-markdown/examples/multiple.html)\n- [无 toolbar](https://tencent.github.io/cherry-markdown/examples/notoolbar.html)\n- [纯预览模式](https://tencent.github.io/cherry-markdown/examples/preview_only.html)\n- [注入](https://tencent.github.io/cherry-markdown/examples/xss.html)（默认防注入，需要配置才允许注入）\n- [图片所见即所得编辑尺寸](https://tencent.github.io/cherry-markdown/examples/img.html)\n- [表格编辑](https://tencent.github.io/cherry-markdown/examples/table.html)\n- [标题自动序号](https://tencent.github.io/cherry-markdown/examples/head_num.html)\n- [流式输入模式（AI chart场景）](https://tencent.github.io/cherry-markdown/examples/ai_chat.html)\n- [VIM 编辑模式](https://tencent.github.io/cherry-markdown/examples/vim.html)\n\n\n-----\n\n## 介绍\n\nCherry Markdown Editor 是一款 Javascript Markdown 编辑器，具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs).\n\n### **开箱即用**\n\n开发者可以使用非常简单的方式调用并实例化 Cherry Markdown 编辑器，实例化的编辑器默认支持大部分常用的 markdown 语法（如标题、目录、流程图、公式等）。\n\n### **易于拓展**\n\n当 Cherry Markdown 编辑器支持的语法不满足开发者需求时，可以快速的进行二次开发或功能扩展。同时，CherryMarkdown 编辑器应该由纯 JavaScript 实现，不应该依赖 angular、vue、react 等框架技术，框架只提供容器环境即可。\n\n## 特性\n\n### 语法特性\n\n1. 图片缩放、对齐、引用\n2. 根据表格内容生成图表\n3. 字体颜色、字体大小\n4. 字体背景颜色、上标、下标\n5. checklist\n6. 音视频\n\n### 多种模式\n\n1. 双栏编辑预览模式（支持同步滚动）\n2. 纯预览模式\n3. 无工具栏模式（极简编辑模式）\n4. 移动端预览模式\n\n### 功能特性\n\n1. 复制 Html 粘贴成 MD 语法\n2. 经典换行\u0026常规换行\n3. 多光标编辑\n4. 图片尺寸\n5. 导出长图、pdf\n6. float toolbar 在新行行首支持快速工具栏\n7. bubble toolbar 选中文字时联想出快速工具栏\n\n### 性能特性\n\n1. 局部渲染\n2. 局部更新\n\n### 安全\n\nCherry Markdown 有内置的安全 Hook，通过过滤白名单以及 DomPurify 进行扫描过滤.\n\n### 样式主题\n\nCherry Markdown 有多种样式主题选择\n\n### 特性展示\n\n这里可以看到特性的简短的演示 [screenshot](https://github.com/Tencent/cherry-markdown/wiki/%E7%89%B9%E6%80%A7%E5%B1%95%E7%A4%BA-features)\n\n## 安装\n\n通过 yarn\n\n```bash\nyarn add cherry-markdown\n```\n\n通过 npm\n\n```bash\nnpm install cherry-markdown --save\n```\n\n如果需要开启 `mermaid` 画图、表格自动转图表功能，需要同时添加`mermaid` 与`echarts`包。\n\n目前**Cherry**推荐的插件版本为`echarts@4.6.0`、`mermaid@9.4.3`\n\n```bash\n# 安装mermaid依赖开启mermaid画图功能\nyarn add mermaid@9.4.3\n# 安装echarts依赖开启表格自动转图表功能\nyarn add echarts@4.6.0\n```\n\n## Quick start\n\n### Browser\n\n#### UMD\n\n```html\n\u003clink href=\"cherry-editor.min.css\" /\u003e\n\u003cdiv id=\"markdown-container\"\u003e\u003c/div\u003e\n\u003cscript src=\"cherry-editor.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  new Cherry({\n    id: 'markdown-container',\n    value: '# welcome to cherry editor!',\n  });\n\u003c/script\u003e\n```\n\n#### ESM\n\n```javascript\nimport 'cherry-markdown/dist/cherry-markdown.css';\nimport Cherry from 'cherry-markdown';\nconst cherryInstance = new Cherry({\n  id: 'markdown-container',\n  value: '# welcome to cherry editor!',\n});\n```\n\n### Node\n\n```javascript\nconst { default: CherryEngine } = require('cherry-markdown/dist/cherry-markdown.engine.core.common');\nconst cherryEngineInstance = new CherryEngine();\nconst htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');\n```\n\n## 使用轻量版本\n\n因 mermaid 库尺寸非常大，Cherry 构建产物中包含了不内置 mermaid 的核心构建包，可按以下方式引入核心构建。\n\n### 完整模式 (图形界面)\n\n```javascript\nimport 'cherry-markdown/dist/cherry-markdown.css';\nimport Cherry from 'cherry-markdown/dist/cherry-markdown.core';\nconst cherryInstance = new Cherry({\n  id: 'markdown-container',\n  value: '# welcome to cherry editor!',\n});\n```\n\n### 引擎模式 (语法编译)\n\n```javascript\n// 引入Cherry引擎核心构建\n// 引擎配置项与Cherry通用，以下文档内容仅介绍Cherry核心包\nimport CherryEngine from 'cherry-markdown/dist/cherry-markdown.engine.core';\nconst cherryEngineInstance = new CherryEngine();\nconst htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');\n\n// --\u003e \u003ch1\u003ewelcome to cherry editor!\u003c/h1\u003e\n```\n\n### ⚠️ 关于 mermaid\n\n核心构建包不包含 mermaid 依赖，需要手动引入相关插件。\n\n```javascript\nimport 'cherry-markdown/dist/cherry-markdown.css';\nimport Cherry from 'cherry-markdown/dist/cherry-markdown.core';\nimport CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';\nimport mermaid from 'mermaid';\n\n// 插件注册必须在Cherry实例化之前完成\nCherry.usePlugin(CherryMermaidPlugin, {\n  mermaid, // 传入mermaid引用\n  // mermaidAPI: mermaid.mermaidAPI, // 也可以传入mermaid API\n  // 同时可以在这里配置mermaid的行为，可参考mermaid官方文档\n  // theme: 'neutral',\n  // sequence: { useMaxWidth: false, showSequenceNumbers: true }\n});\n\nconst cherryInstance = new Cherry({\n  id: 'markdown-container',\n  value: '# welcome to cherry editor!',\n});\n```\n\n### 异步加载\n\n**recommend** 使用异步引入，以下为 webpack 异步引入样例。\n\n```javascript\nimport 'cherry-markdown/dist/cherry-markdown.css';\nimport Cherry from 'cherry-markdown/dist/cherry-markdown.core';\n\nconst registerPlugin = async () =\u003e {\n  const [{ default: CherryMermaidPlugin }, mermaid] = await Promise.all([\n    import('cherry-markdown/src/addons/cherry-code-block-mermaid-plugin'),\n    import('mermaid'),\n  ]);\n  Cherry.usePlugin(CherryMermaidPlugin, {\n    mermaid, // 传入mermaid引用\n  });\n};\n\nregisterPlugin().then(() =\u003e {\n  // 插件注册必须在Cherry实例化之前完成\n  const cherryInstance = new Cherry({\n    id: 'markdown-container',\n    value: '# welcome to cherry editor!',\n  });\n});\n```\n\n## 配置\n所有的配置基本都在/src/Cherry.config.js里进行了标注，具体[看这里](https://github.com/Tencent/cherry-markdown/wiki/%E9%85%8D%E7%BD%AE%E9%A1%B9%E5%85%A8%E8%A7%A3)\n\n\n## 例子\n\n点击查看 [各种例子](https://github.com/Tencent/cherry-markdown/wiki)\n\n### 客户端\n\n正在开发中... ，可见`/client`目录\n\n## 拓展\n\n### 自定义语法\n可以看[这里](https://github.com/Tencent/cherry-markdown/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95)\n\n### 自定义工具栏\ncherry有**五种**工具栏位置，如下：\n![cherry工具栏](https://github.com/Tencent/cherry-markdown/assets/998441/fecbc23c-5e85-4072-9dc5-8c71faa9d700)\n\n每个位置都可以增加自定义工具栏，具体可以看[这里](https://github.com/Tencent/cherry-markdown/wiki/%E8%B0%83%E6%95%B4%E5%B7%A5%E5%85%B7%E6%A0%8F#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B7%A5%E5%85%B7%E6%A0%8F%E6%8C%89%E9%92%AE)\n\n\n## 单元测试\n\n选用 Jest 作为单元测试工具，主要看好其断言、支持异步和快照测试等功能。单元测试分为两个部分，CommonMark 用例测试和快照测试。\n\n### CommonMark 测试用例\n\n运行 `yarn run test:commonmark` 测试 CommonMark 官方用例，运行速度较快。\n\n用例位于 `test/suites/commonmark.spec.json`， 比如：\n\n```json\n{\n  \"markdown\": \"  \\tfoo\\tbaz\\t\\tbim\\n\",\n  \"html\": \"\u003cpre\u003e\u003ccode\u003efoo\\tbaz\\t\\tbim\\n\u003c/code\u003e\u003c/pre\u003e\\n\",\n  \"example\": 2,\n  \"start_line\": 363,\n  \"end_line\": 368,\n  \"section\": \"Tabs\"\n},\n```\n\n对于这个测试点，Jest 会比对 `Cherry.makeHtml(\" \\tfoo\\tbaz\\t\\tbim\\n\")` 生成的 html 与用例中的预期结果 `\"\u003cpre\u003e\u003ccode\u003efoo\\tbaz\\t\\tbim\\n\u003c/code\u003e\u003c/pre\u003e\\n\"`。Cherry Markdown 的匹配器已忽略 `data-line` 等私有属性。\n\nCommonMark 规范及测试用例可参考：https://spec.commonmark.org/ 。\n\n### 快照测试\n\n调用 `yarn run test:snapshot` 运行快照测试，书写用例可参考 `test/core/hooks/List.spec.ts`，新用例第一次运行会自动生成快照，第二次会将生成内容与快照进行比对。如果需要重新生成快照，将 `test/core/hooks/__snapshots__` 下对应的旧快照删除再运行一次即可。\n\n快照测试运行速度较慢，仅在易出错且包含 Cherry 特色语法的 Hook 上使用。\n\n## Contributing\n\n欢迎加入我们打造强大的 Markdown 编辑器。当然你也可以给我们提交特性需求的 issue。 在写特性功能之前，你需要了解 [这些内容](https://github.com/Tencent/cherry-markdown/wiki/%E5%88%9D%E8%AF%86cherry-markdown-%E7%BC%96%E8%BE%91%E5%99%A8#%E4%BB%8E%E5%BC%80%E5%A7%8B%E5%88%B0%E4%B8%8B%E7%8F%AD)\n\n## License\n\nApache-2.0\n","funding_links":[],"categories":["JavaScript","编码与开发工具"],"sub_categories":["开发组件"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTencent%2Fcherry-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTencent%2Fcherry-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTencent%2Fcherry-markdown/lists"}