markdown编辑器专题之不可错过的两大开源Markdown在线编辑器

介绍

今天要介绍的是两个开源的Markdown在线编辑器react-markdown-editor和Vditor。其中react-markdown-editor是基于react和JavaScript开发的，因此目前仅支持React。因此，您可以一次使用这两个编辑器，然后选择适合您的编辑器并将其应用于代码。(大卫亚设)。

React-Markdown-Editor编辑器

React-markdown-editor中的编辑器包含预览功能。我们先看一下截图。

React-markdown-editor

安装(使用NPM直接安装在react项目中)NPM I @uiw/react-markdown-editor

文档地址(使用方法、详细配置和使用方法，请参阅文档正式文档。）

使用方法(直接引用React组件调用即可)默认使用：

import markdown editor from ' @ uiw/react-markdown-editor '；

Import React from ' react

import react DOM from ' react-DOM '；

Const Dome=()=(

标记下降编辑器(MarkdownEditor)

值={}

OnChange={}

/

)；

或者：

import markdown editor from ' @ uiw/react-markdown-editor '；

Import React from ' react

import react DOM from ' react-DOM '；

class app extends react.com ponent {

Constructor() {

超级()；

={

markdown : ' # this is a h1 \ n # # this is a H2 \ n # # # # # # # this is a h6 '、

}

=。bind(this)；

}

Updatemarkdown(编辑器、数据、值){

({ markdown : value })；

}

Render() {

Return(

标记下降编辑器(MarkdownEditor)

值={}

OnChange={}

/

)；

}

}

Reac(

App/，

Document.getElementById('app ')

)；

一些最基本的属性props

Value (string)-需要转换为原始html的markdown字符串(必需参数)visble (boolean)-打开预览显示toolbars(array)-工具栏配置onChange-更改

所有配置

Vditor编辑器

与React-markdown-editor相比，他的功能将更加强大。这是一个非常好的选择，因为它不仅支持react，还支持vue和基本js。看看怎么用，先告诉你官网文件地址。

功能(功能很多，真的不错)插入默认的Emoji、设置常用表情列表自定义工具栏按钮、提示、插入拷贝和使用快捷方式拖放、粘贴剪贴板、上传实时上传进度显示EMOJI域之间的上传内容保存本地保存，防止意外的录音支持丢失，用户可以直接发布语音粘贴HTML，自动转换为Markdown。

模块化使用：

Import Vditor from 'vditor '

使用' @ import ' ~ vditor/src/assets/scss/classic '//或dark

Const vditor=new vditor (id，{options).})

Vdi()

一般参考：

！-可以使用index.dark.css或index.cla

link rel=' style sheet ' href=' https://cdn . jsdelivr . net/NPM/v ditor/dist/index . cla '/

脚本src='；Defer/script

要初始化实例，请执行以下操作：

Const vditor=new vditor (id，{options).})

Vdi()

官网文档提供了很多参数供您选择。我这里不一一介绍。都是中文。大家都能理解

Github提供的demo有完整的实例。以下是我在本地运行的图片

局部运行效果图

官网的截图，两种主题颜色

古典主题

黑色主题

摘要

今天介绍的有两个开源的Markdown在线编辑器。可以选择适合自己项目的。其实有很多类似的编辑器。如果有更好的推荐，可以互相沟通学习和使用。谢谢大家的支持！