介绍

今天要介绍的是两个开源的Markdown在线编辑器，react-markdown-editor和Vditor，其中react-markdown-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组件调用即可）

基本用法：

import MarkdownEditor from '@uiw/react-markdown-editor';import React from 'react';import ReactDOM from 'react-dom';const Dome = () => ( <MarkdownEditor value={this.state.markdown} onChange={this.updateMarkdown} />);

或者：

import MarkdownEditor from '@uiw/react-markdown-editor';import React from 'react';import ReactDOM from 'react-dom';class App extends React.Component { constructor() { super(); this.state = { markdown: '# This is a H1 \n## This is a H2 \n###### This is a H6', }; this.updateMarkdown = this.updateMarkdown.bind(this); } updateMarkdown(editor, data, value) { this.setState({ markdown: value }); } render() { return ( <MarkdownEditor value={this.state.markdown} onChange={this.updateMarkdown} /> ); }}ReactDOM.render( <App />, document.getElementById('app'));

最基本的一些属性props

value (string) - 需要转换成原始html的markdown字符串 (必填参数)visble (boolean)- 开启预览显示toolbars(array) - 工具栏配置onChange - 更改时调用的方法（必填参数）

更多的参数配置参照官网，我在这就只是截个图，大家也应该都能看得懂

所有配置

Vditor编辑器

相对于react-markdown-editor,他的功能就要更强大一些了，不仅支持react，也支持vue和原生的js，因此它真的是一个不错的选择，我们来看下如何使用，先给出官网文档地址：

功能（功能非常多，真的不赖）插入原生 Emoji、设置常用表情列表自定义工具栏按钮、提示、插入文案及快捷键可使用拖拽、剪切板粘贴上传，显示实时上传进度支持 CORS 跨域上传内容保存本地存储，防止意外丢失录音支持，用户可直接发布语音粘贴 HTML 自动转换为 Markdown提供实时预览、滚动同步定位支持主窗口大小拖拽、字符计数多主题支持、内置黑白两套多语言支持、内置中英文支持主流浏览器和移动端安装（同样的使用npm安装）

npm install vditor --save

模块化使用：

import Vditor from 'vditor'@import "~vditor/src/assets/scss/classic" // 或者使用 darkconst vditor = new Vditor(id, {options...})vditor.focus()

普通引用：

<!-- 可使用 index.dark.css 或 index.classic.css --><link rel="stylesheet" href="" /><script src="" defer></script>

初始化实例：

const vditor = new Vditor(id, {options...})vditor.focus()

官网文档提供了很多参数可供选择，我这里就不一一介绍了，都是中文大家也都看得懂

在github提供的demo中有完整的实例，下面是我本地运行的效果图

本地运行效果图

来自官网的截图，两种主题色

经典主题

黑色主题

总结

今天介绍了两款开源的Markdown在线编辑器，可以选择适合自己项目的一个来使用，其实还有不少类似的编辑器，如果有更好的欢迎大家推荐，也能够相互传递学习和使用，感谢大家的支持！