介绍

今天要介绍的是两个开源的Markdown在线编辑器，react-markdown-editor和Vditor，其中react-markdown-editor由于是基于React和Typescript开发的，目前只支持React，Vditor是使用TypeScript实现的，支持原生的JavaScript、Vue、React。因此，我们一次来体验一下这两款编辑器，然后可以选择一款适合自己的，将之运用到自己的代码中。

React-Markdown-Editor编辑器

react-markdown-editor的编辑器自带预览功能，我们首先看一张截图：

• 安装（直接使用npm安装到你的react项目中）

npm i @uiw/react-markdown-editor

• 文档地址（我们下面会简单介绍下如何使用，详细的配置和使用方式请看文档官方文档）

http://uiw.gitee.io/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，因此它真的是一个不错的选择，我们来看下如何使用，先给出官网文档地址：

https://hacpai.com/article/1549638745630

• 功能（功能非常多，真的不赖）

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" // 或者使用 dark
const vditor = new Vditor(id, {options...})
vditor.focus()

普通引用：

<!-- 可使用 index.dark.css 或 index.classic.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.classic.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js" defer></script>

初始化实例：

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

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

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

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

总结

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