React框架快速实现简易的Markdown编辑器.docx

第

React框架快速实现简易的Markdown编辑器

目录前言需要实现的功能具体实现一、布局二、markdown语法解析三、markdown主题样式四、代码块高亮五、同步滚动bug1：bug2：六、工具栏七、补充八、最后

前言

最近我在项目中需要实现一个markdown编辑器的需求，并且是以React框架为开发基础的，类似掘金这样的：

我的第一想法肯定是能用优秀的开源就一定用开源的，毕竟不能老是重复造轮子。于是我在我的前端群里问了很多群友，他们都给了甩过来一堆开源的markdown编辑器项目，但我一看全是基于Vue使用的，不符合我的预期，逛了一下github，也没看到我满意的项目，所以就想自己实现一个啦

需要实现的功能

我们自己实现的话，看看需要支持哪些功能，因为做一个初版的简易编辑器，所以功能实现得不会太多，但绝对够用：

markdown语法解析，并实时渲染markdown主题css样式代码块高亮展示「编辑区」和「展示区」的页面同步滚动编辑器工具栏中工具的实现

这里先放上我最终实现好了的效果图：

源码下载点击

同时，我也给大家提供了一个在线体验的地址(opensnewwindow)，因为做的比较仓促，欢迎大家给我提意见和pr

具体实现

具体的实现也是按照我们上述列出来的功能的顺序来一一实现的

说明：本文通过循序渐进的方式讲解，所以重复代码可能有点多。并且每一部分的注释是专门用于讲解该部分的代码的，所以在看每一部分功能代码时，只需要看注释部分就好~

一、布局

importReact,{}fromreact

exportdefaultfunctionMarkdownEdit(){

return(

divclassName=markdownEditConainer

textareaclassName=edit/

divclassName=show/

/div

css样式我就不一一列举了，整体就是左边是编辑区，右边是展示区，具体样式如下：

二、markdown语法解析

接下来就需要思考如何将「编辑区」输入的markdown语法解析成html标签并最终渲染在「展示区」

查找了一下目前比较优秀的markdown解析的开源库，常用的有三个，分别是Marked、Showdown、markdown-it，并借鉴了一下其它大佬的想法，了解了一下这三个库的优缺点，对比如下：

库名优点缺点Marked性能好，正则解析（中文支持比较好）扩展性较差Showdown扩展性好、正则解析（中文支持好）性能较差markdown-it扩展性好、性能较好逐字符解析（中文支持不好）

刚开始我选择了showdown这个库，因为这个库使用起来特别方便，而且官方已经在库中提供了很多扩展功能，只需要配置一些字段即可。

但是后来我又分析了一波，还是选用了markdown-it，因为之后可能需要做更多的语法扩展，showdown的官方文档写的比较生硬，而且markdown-it使用的人也多，生态比较好，虽然其官方没有支持很多扩展的语法，但是已经有很多基于makrdown-it的功能扩展插件了，最重要的是markdown-it的官方文档写得好啊（而且有中文文档）！

接下来写一下markdown语法解析的代码吧（其中步骤1、2、3表示的是markdown-it库的用法）

importReact,{useState}fromreact

//1.引入markdown-it库

importmarkdownItfrommarkdown-it

//2.生成实例对象

constmd=newmarkdownIt()

exportdefaultfunctionMarkdownEdit(){

const[htmlString,setHtmlString]=useState()//存储解析后的html字符串

//3.解析markdown语法

constparse=(text:string)=setHtmlString(md.render(text));

return(

divclassName=markdownEditConainer

textarea

className=edit

onChange={(e)=parse(e.target.value)}//编辑区内容每次修改就更新变量htmlStrin