StackEdit：来自StackOverflow官方热门Markdown编辑器

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 StackEdit

Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

StackEdit 是基于 PageDown 的全功能开源 Markdown 编辑器，也是目前 Stack Overflow 和其他 Stack Exchange 站点使用的 Markdown 库。

Markdown 编写界面

丰富的格式支持

StackEdit 具有以下突出特征：

丰富的 Markdown 编辑器：StackEdit 的 Markdown 语法高亮非常优秀，可帮助开发者可视化文件的最终渲染效果。大量所见即所得 (WYSIWYG) 的控件： StackEdit 提供了非常方便的格式化按钮和快捷方式，其来源于 StackOverflow 所见即所得风格的 Markdown 编辑器 PageDown支持智能布局：无论是写作、审阅还是评论，StackEdit 的布局都非常灵活，用户无需做出任何牺牲支持滚动同步实时预览：StackEdit 的滚动同步功能可准确绑定编辑器面板和预览面板的滚动条，以确保在书写时用户始终只需要关注内容撰写本身支持丰富的评论和始终在线：StackEdit 允许在文件中插入内联注释和嵌入协作者讨论，就像 Microsoft Word 和 Google Docs 一样。同时支持将文件发布到其他博客平台，例如：Blogger、WordPress 和 Zendesk等等支持社区合作：借助 StackEdit，用户可以通过同步机制共享与协作工作区。而且，如果多个协作者同时处理一个文件，StackEdit 会负责合并更改。支持离线写；支持不同的 Markdown 风格，例如： Markdown Extra、GFM 和 CommonMark；支持 LaTeX 数学表达式；支持 UML 图；支持 Emojis 等等丰富功能

目前 StackEdit 在 Github 通过 Apache-2.0 协议开源，有超过 21.3k 的 star、2.7k 的 star、是一个值得关注的前端开源项目。

2.如何使用 StackEdit2.1 本地构建和部署

如果需要本地构建 StackEdit，可以参考下面的步骤：

// 安装依赖npm install// 在 localhost:8080 进行热重载服务npm start// 生产构建、压缩体积npm run build// 为生产进行构建并查看捆绑分析器报告npm run build --report

StackEdit Helm 还允许将 StackEdit 轻松部署到任何 Kubernetes 集群。开发者可以使用其来配置现有入口控制器和证书管理器的部署：

// 添加 StackEdit Helm 存储库helm repo add stackedit https://benweet.github.io/stackedit-charts/// 更新本地 Helm 图表存储库缓存helm repo update// 将 StackEdit 图表部署到集群helm install --name stackedit stackedit/stackedit \ --set dropboxAppKey=$DROPBOX_API_KEY \ --set dropboxAppKeyFull=$DROPBOX_FULL_ACCESS_API_KEY \ // 这里其他的配置2.2 使用 stackedit.js

stackedit.js 用于将 StackEdit 添加到任何网站，下面示例使用 stackedit.js 将 StackEdit 绑定到特定的 textarea 元素：

// 导入开源库import Stackedit from 'stackedit-js';// 获取 textarea 元素const el = document.querySelector('textarea');// 获取 Stackedit 对象const stackedit = new Stackedit();// 打开iframestackedit.openFile({ name: 'Filename', // 文件名称 content: { text: el.value // Markdown 内容 }});// 监听 StackEdit 事件，修改 textarea内容stackedit.on('fileChange', (file) => { el.value = file.content.text;});

当然，开发者也可以直接从CDN引用相关资源：

经过清理的 HTML 在 fileChange 事件中作为 file.content.html 返回以便可以将格式化的输出打印到页面中。下面示例使用静默模式在页面加载时将 Markdown 转换为 HTML：

stackedit.openFile({ name: 'Filename', content: { text: 'Hello **Markdown** writer!' }}, true /* 静默模式 */);// 静默模式下，`fileChange` 事件只会抛出一次stackedit.on('fileChange', (file) => { divEl.innerHTML = file.content.html;});

关于 StackEdit 的更多主题可以参考文末参考文献，本文不再过多展开。

参考资料

https://github.com/benweet/stackedit

https://medium.com/@vladimir.simovic/stackedit-a-feature-rich-web-based-markdown-editor-%EF%B8%8F-b0946edcbcb2

https://github.com/StackExchange/pagedown

https://benweet.github.io/stackedit.js/

幸福双城资讯网

StackEdit：来自StackOverflow官方热门Markdown编辑器

前有科技后进阶