markdowneditor_不可错过的两⼤开源Markdown在线编辑器
介绍
今天要介绍的是两个开源的Markdown在线编辑器，react-markdown-editor和Vditor，其中react-markdo
wn-editor由于是基于React 和Typescript开发的，⽬前只⽀持React，Vditor是使⽤TypeScript实现的，⽀持原⽣的JavaScript、Vue、React。因此，我们⼀次来体验⼀下这两款编辑器，然后可以选择⼀款适合⾃⼰的，将之运⽤到⾃⼰的代码中。
React-Markdown-Editor编辑器
react-markdown-editor的编辑器⾃带预览功能，我们⾸先看⼀张截图：
react-markdown-editor
安装(直接使⽤npm安装到你的react项⽬中)
npm i @uiw/react-markdown-editor
⽂档地址(我们下⾯会简单介绍下如何使⽤，详细的配置和使⽤⽅式请看⽂档官⽅⽂档)
使⽤⽅式(直接引⽤React组件调⽤即可)
基本⽤法：
react native import MarkdownEditor from '@uiw/react-markdown-editor';import React from 'react';import ReactDOM from 'react-dom';const Dome = () => ( );
或者：
import MarkdownEditor from '@uiw/react-markdown-editor';import React from 'react';import ReactDOM from 'react-dom';class App extends React.Component { c 最基本的⼀些属性props
value (string) - 需要转换成原始html的markdown字符串 (必填参数)
visble (boolean)- 开启预览显⽰
toolbars(array) - ⼯具栏配置
onChange - 更改时调⽤的⽅法(必填参数)
更多的参数配置参照官⽹，我在这就只是截个图，⼤家也应该都能看得懂
所有配置
Vditor编辑器
相对于react-markdown-editor，他的功能就要更强⼤⼀些了，不仅⽀持react，也⽀持vue和原⽣的js，因此它真的是⼀个不错的选择，我
们来看下如何使⽤，先给出官⽹⽂档地址：
功能(功能⾮常多，真的不赖)
1. 插⼊原⽣ Emoji、设置常⽤表情列表
2. ⾃定义⼯具栏按钮、提⽰、插⼊⽂案及快捷键
3. 可使⽤拖拽、剪切板粘贴上传，显⽰实时上传进度
4. ⽀持 CORS 跨域上传
5. 内容保存本地存储，防⽌意外丢失
6. 录⾳⽀持，⽤户可直接发布语⾳
7. 粘贴 HTML ⾃动转换为 Markdown
8. 提供实时预览、滚动同步定位
9. ⽀持主窗⼝⼤⼩拖拽、字符计数
10. 多主题⽀持、内置⿊⽩两套
11. 多语⾔⽀持、内置中英⽂
12. ⽀持主流浏览器和移动端
安装(同样的使⽤npm安装)
npm install vditor --save
模块化使⽤：
import Vditor from 'vditor'@import "~vditor/src/assets/scss/classic" // 或者使⽤ darkconst vditor = new Vditor(id, {})vditor.focus()普通引⽤：
初始化实例：
const vditor = new Vditor(id, {})vditor.focus()
官⽹⽂档提供了很多参数可供选择，我这⾥就不⼀⼀介绍了，都是中⽂⼤家也都看得懂
在github提供的demo中有完整的实例，下⾯是我本地运⾏的效果图
本地运⾏效果图
来⾃官⽹的截图，两种主题⾊
经典主题
⿊⾊主题
总结
今天介绍了两款开源的Markdown在线编辑器，可以选择适合⾃⼰项⽬的⼀个来使⽤，其实还有不少类似的编辑器，如果有更好的欢迎⼤家
推荐，也能够相互传递学习和使⽤，感谢⼤家的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。