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吧!!!