Open mileOfSunshine opened 4 years ago
首先先声明下，我们今天要讲的并非客户端软件，而是“嵌入式”的 Markdown。
什么是嵌入式？嵌入式是计算机工程中的一个专业术语，即嵌入式系统。
嵌入式系统用于控制、监视或者辅助操作机器和设备的装置，是一种专用的计算机系统。
本文中提到的嵌入式，其实更偏向于这种解释：一个可插拔的组件。
插上它，某个功能就会实现。拔掉，又不会影响系统运行。
Markdown是一种轻量级标记语言，易读易写，对图片、图标、数学式都有支持。可用于十几种编程语言，目前许多平台和框架都支持Markdown，主要应用在各个笔记和博客平台。
Markdown的时间轴 它诞生于2004年 2014年9月，被更名为 CommonMark 2012年，实施标准化 2017年，Github发布了基于CommonMark的Github Flavored Markdown（GFM）的正式规范。 2018年，发布 CommonMark 规范和测试包 ...
Markdown的时间轴
它诞生于2004年
2014年9月，被更名为 CommonMark
2012年，实施标准化
2017年，Github发布了基于CommonMark的Github Flavored Markdown（GFM）的正式规范。
2018年，发布 CommonMark 规范和测试包
...
此时，你可能会cue到富文本编辑器，它拥有着类 Word 软件般的用户体验————所见即所得，但其致命的缺点是容易造成 XSS 漏洞。
跑偏了，今天的主角不是它『富文本』，而是它『Markdown』👈
接下来推荐几款小编接触到的可嵌入的Markdown编辑器。
第一款是由韩国 nhn 官方维护 tui.editor。
tui.editor
TOAST UI Editor 是一款的基于 GFM(GitHub Flavored Markdown)的编辑器，拥有两个模式 Markdown 和 WYSIWYG（所见即所得），可在写作过程中任意切换。 用户体验也是相当的舒适，对于偏好富文本编辑器的用户来说，可谓是顺滑切换。
如果你读过 tui.editor 的文档，是否也和我一样觉得真香呢。
👉它的特性：
介绍到这，你是否也心动了。喜欢它，就Pick它吧~
在线demo
SimpleMDE 是一个可嵌入的JavaScript Markdown编辑器，除了基础的字体加粗、倾斜，插入图片、链接等功能外，还支持自动保存和拼写检查。
小编研究了下，这个自动保存是基于 localStorage 存储，如果你用到这个功能了，切记尽量不存储base64格式的图片，不然会造成内存溢出。你懂得『毕竟localstorage只支持5M大小』。
在预防XSS攻击方面，作者并未对此做处理。从github的代码提交时间来看，目前已不再维护，深表遗憾。如果你有想法，可以fork 它，自己维护，小编表示很赞同呢。
这款编辑器虽未像 tui.editor一样，提供了 “所见即所得”模式，但它有贴心地提供了 Markdown使用指南，不管你的项目是基于 Vue 还是 React，你都可以Pick它，还是很nice的~
以上两款，不管在哪个框架中都能使用。接下来介绍三款分别基jQuery、Vue和React的Markdown Editor组件
Editor.md 是一款国产可嵌入的开源 Markdown 在线编辑器组件。基于 CodeMirror、jQuery 和 Marked 构建。同时支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，特性相当丰富。在这5款编辑器中，目前 Star 数也是仅次于 tui.editor。
它的特性也是很丰富，总有一个满足你的要求😍。
虽说这款编辑器已经对基础的XSS攻击做了处理，但还是存在安全隐患，由于它目前处于维护态，可能维护者已经在修BUG的路上了。如果你有解决办法，可以给它提 PR 👈。
如果你对我所说的安全隐患有兴趣，可以试运行以下代码。
<img src="https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png" onload="javascript:alert(1)"/>
@uiw/react-md-editor 是一个由 React 和 TypeScript 实现的带有预览的 Markdown 编辑器。目前由 uiw 团队维护。
uiw 是基于 React 16+ 的 UI 组件库。
因为它是一个 React 组件，所以用法也很简单。直接引入，加上配置就哦了。
import React from "react"; import ReactDOM from "react-dom"; import MDEditor from '@uiw/react-md-editor'; export default function App() { const [value, setValue] = React.useState("**Hello world!!!**"); return ( <div className="container"> <MDEditor value={value} onChange={setValue} /> <MDEditor.Markdown source={value} /> </div> ); }
mavonEditor是一个基于 Vue 的 Markdown 编辑器。目前它是由个人维护，实现了部分国际化，支持8种语言。看过之前几款后，再来看它，有种眼前一亮的感觉，因为它的特性很新颖。可以在vue中使用，也可以在 nuxt.js 中使用。
以上是这几个嵌入式 Markdown 编辑器的一览。除了小编介绍的这几款，肯定还有很多其他优秀的 Markdown 编辑器，如果你知道也可推荐给我。
推荐了这么多款，总有一款适合你，快点来Pick吧！！！
首先先声明下，我们今天要讲的并非客户端软件，而是“嵌入式”的 Markdown。
什么是嵌入式？嵌入式是计算机工程中的一个专业术语，即嵌入式系统。
本文中提到的嵌入式，其实更偏向于这种解释：一个可插拔的组件。
插上它，某个功能就会实现。拔掉，又不会影响系统运行。
Markdown是一种轻量级标记语言，易读易写，对图片、图标、数学式都有支持。可用于十几种编程语言，目前许多平台和框架都支持Markdown，主要应用在各个笔记和博客平台。
此时，你可能会cue到富文本编辑器，它拥有着类 Word 软件般的用户体验————所见即所得，但其致命的缺点是容易造成 XSS 漏洞。
跑偏了，今天的主角不是它『富文本』，而是它『Markdown』👈
接下来推荐几款小编接触到的可嵌入的Markdown编辑器。
tui.editor
第一款是由韩国 nhn 官方维护
tui.editor。TOAST UI Editor 是一款的基于 GFM(GitHub Flavored Markdown)的编辑器，拥有两个模式 Markdown 和 WYSIWYG（所见即所得），可在写作过程中任意切换。 用户体验也是相当的舒适，对于偏好富文本编辑器的用户来说，可谓是顺滑切换。
如果你读过 tui.editor 的文档，是否也和我一样觉得真香呢。
👉它的特性：
介绍到这，你是否也心动了。喜欢它，就Pick它吧~
在线demo
SimpleMDE
SimpleMDE 是一个可嵌入的JavaScript Markdown编辑器，除了基础的字体加粗、倾斜，插入图片、链接等功能外，还支持自动保存和拼写检查。
小编研究了下，这个自动保存是基于 localStorage 存储，如果你用到这个功能了，切记尽量不存储base64格式的图片，不然会造成内存溢出。你懂得『毕竟localstorage只支持5M大小』。
在预防XSS攻击方面，作者并未对此做处理。从github的代码提交时间来看，目前已不再维护，深表遗憾。如果你有想法，可以fork 它，自己维护，小编表示很赞同呢。
这款编辑器虽未像 tui.editor一样，提供了 “所见即所得”模式，但它有贴心地提供了 Markdown使用指南，不管你的项目是基于 Vue 还是 React，你都可以Pick它，还是很nice的~
在线demo
以上两款，不管在哪个框架中都能使用。接下来介绍三款分别基jQuery、Vue和React的Markdown Editor组件
Editor.md
Editor.md 是一款国产可嵌入的开源 Markdown 在线编辑器组件。基于 CodeMirror、jQuery 和 Marked 构建。同时支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，特性相当丰富。在这5款编辑器中，目前 Star 数也是仅次于 tui.editor。
它的特性也是很丰富，总有一个满足你的要求😍。
👉它的特性：
虽说这款编辑器已经对基础的XSS攻击做了处理，但还是存在安全隐患，由于它目前处于维护态，可能维护者已经在修BUG的路上了。如果你有解决办法，可以给它提 PR 👈。
如果你对我所说的安全隐患有兴趣，可以试运行以下代码。
在线demo
@uiw/react-md-editor
@uiw/react-md-editor 是一个由 React 和 TypeScript 实现的带有预览的 Markdown 编辑器。目前由 uiw 团队维护。
👉它的特性：
因为它是一个 React 组件，所以用法也很简单。直接引入，加上配置就哦了。
在线demo
mavon-editor
mavonEditor是一个基于 Vue 的 Markdown 编辑器。目前它是由个人维护，实现了部分国际化，支持8种语言。看过之前几款后，再来看它，有种眼前一亮的感觉，因为它的特性很新颖。可以在vue中使用，也可以在 nuxt.js 中使用。
👉它的特性：
在线demo
一览
以上是这几个嵌入式 Markdown 编辑器的一览。除了小编介绍的这几款，肯定还有很多其他优秀的 Markdown 编辑器，如果你知道也可推荐给我。
推荐了这么多款，总有一款适合你，快点来Pick吧！！！