{"id":17242805,"url":"https://github.com/imcuttle/markdown-editor","last_synced_at":"2025-04-14T03:25:44.934Z","repository":{"id":45112858,"uuid":"65618498","full_name":"imcuttle/markdown-editor","owner":"imcuttle","description":"markdown-editor as your wish","archived":false,"fork":false,"pushed_at":"2022-01-07T14:46:24.000Z","size":3975,"stargazers_count":11,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T02:34:02.888Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imcuttle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-13T13:27:04.000Z","updated_at":"2021-03-23T08:57:18.000Z","dependencies_parsed_at":"2022-09-26T17:30:25.557Z","dependency_job_id":null,"html_url":"https://github.com/imcuttle/markdown-editor","commit_stats":null,"previous_names":["moyuyc/markdown-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmarkdown-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmarkdown-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmarkdown-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmarkdown-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imcuttle","download_url":"https://codeload.github.com/imcuttle/markdown-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248814692,"owners_count":21165804,"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":[],"created_at":"2024-10-15T06:14:07.025Z","updated_at":"2025-04-14T03:25:44.916Z","avatar_url":"https://github.com/imcuttle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 探究SegumentFault Markdown编辑器\n\n[SegumentFault](https://segmentfault.com/) 中的Markdown编辑器用户体验不错，比如\n\n1. 高亮提示并显示你当前正在编辑的文本\n2. 支持剪贴板图片直接粘贴上传，插入图片十分方便\n3. 自动保存\n\n为了探究sf实现的原理，在sf中我提出了下面的问题\n【[segmentfault的实时markdown编辑修改位置定位是怎么做到的，而且效率还不低](https://segmentfault.com/q/1010000006166048)】\n\n根据采纳答案提供的信息，我搜索到了这段谷歌开源代码 [google-diff-match-patch](https://code.google.com/p/google-diff-match-patch/)\n\n根据官方的介绍，我们能用这个称为diff-match-path的开源库，进行diff(差异)/match(配对)/patch(补全)， 但我们只需要diff功能即可\n\n在官方给出的[diff demo](https://neil.fraser.name/software/diff_match_patch/svn/trunk/demos/demo_diff.html)中, 通过源码可以很清晰的了解diff的使用\n\n大体就是，对比两个字符串，找到两个字符串的不同，包括多余的，相同的，缺失的。\n\n算法思想贪心，参考如下  \n[英文原版](http://simplygenius.net/Article/DiffTutorial1)  \n[翻译](http://yaowhat.com/2014/07/21/entry-version-diff-1.html)\n\n\n**2016/8/14 更新**  \n其实不需要使用`diff_match_patch.js`得到字符串之间所有的差异，我们只需要得到第一个不同的位置即可，所以改进为扫描一遍的方法，求第一个不同的位置，效率更佳\n\n## 我的工作\n\n既然知道了sf的实时编辑高亮是基于diff的，那我也基于这个工具实现个markdown编辑器吧。 \n用了如下第三方库\n1. ace.js (一个漂亮的编辑器)\n2. marked.js (一个markdown文本转html库)\n3. highlight.js (将code文本高亮展示)\n4. diff_match_patch.js\n\n效果图\n![ClipboardImage](/upload/1471093544488.png)\n\n具有如下功能：\n1. markdown编辑，实时预览\n2. 高亮提示并显示你当前正在编辑的文本\n3. 支持剪贴板图片直接粘贴上传，插入图片十分方便\n4. 自动保存\n\n编辑器部分快捷键说明\n1. cmd/ctrl + K : 33种编辑器主题供选择\n2. cmd/ctrl + B : 编辑器字体放大\n3. cmd/ctrl + M : 编辑器字体缩小\n4. cmd/ctrl + U : 自动保存功能开关\n5. cmd/ctrl + S : 保存\n\n其他交互说明：\n1. 编辑器左下角提示保存信息，右下角提示字数\n ![ClipboardImage](/upload/1471093917303.png)\n2. 中部可拖动调节大小\n![ClipboardImage](/upload/1471094067216.png)\n3. 预览可直接复制代码\n![ClipboardImage](/upload/1471095177629.png)\n\n## 怎么安装使用？\n\n代码地址  \n[markdown-editor](https://github.com/moyuyc/markdown-editor)\n\n```sh\nnpm i moyu-markdown-editor -g\nmd-editor -p 9999\nopen http://localhost:9999\n```\n\n别忘了给个Star！","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fmarkdown-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimcuttle%2Fmarkdown-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fmarkdown-editor/lists"}