关于前端:手把手带你10分钟手撸一个简易的Markdown编辑器

前言

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

我的第一想法必定是能用优良的开源就肯定用开源的，毕竟不能老是反复造轮子。于是我在我的前端群里问了很多群友，他们都给了甩过去一堆开源的 markdown 编辑器我的项目，但我一看全是基于 Vue 应用的，不合乎我的预期，逛了一下github，也没看到我称心的我的项目，所以就想本人实现一个啦

须要实现的性能

咱们本人实现的话，看看须要反对哪些性能，因为做一个初版的繁难编辑器，所以性能实现得不会太多，但相对够用：

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

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

我也将本文的代码放在了 Github 仓库 (opens new window)”)上了，欢送各位点个 ⭐️ star 反对一下

同时，我也给大家提供了一个在线体验的地址 (opens new window)”)，因为做的比拟仓促，欢送大家给我提意见和 pr

具体实现

具体的实现也是依照咱们上述列出来的性能的程序来一一实现的

阐明：本文通过循序渐进的形式解说，所以反复代码可能有点多。并且每一部分的正文是专门用于解说该局部的代码的，所以在看每一部分性能代码时，只须要看正文局部就好~

一、布局

import React, { } from 'react'


export default function MarkdownEdit() {


    return (
        <div className="markdownEditConainer">
            <textarea className="edit" />
            <div className="show" />
        </div>
    )
}

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

二、markdown 语法解析

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

查找了一下目前比拟优良的 markdown 解析的开源库，罕用的有三个，别离是Marked、Showdown、markdown-it，并借鉴了一下其它大佬的想法，理解了一下这三个库的优缺点，比照如下：

刚开始我抉择了 showdown 这个库，因为这个库应用起来特地不便，而且官网曾经在库中提供了很多扩大性能，只须要配置一些字段即可。然而起初我又剖析了一波，还是选用了 markdown-it，因为之后可能须要做更多的语法扩大，showdown 的官网文档写的比拟僵硬，而且 markdown-it 应用的人也多，生态比拟好，尽管其官网没有反对很多扩大的语法，然而曾经有很多基于 makrdown-it 的性能扩大插件了，最重要的是 markdown-it 的官网文档写得好啊（而且有中文文档）！

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

import React, {useState} from 'react'
// 1. 引入 markdown-it 库
import markdownIt from 'markdown-it'

// 2. 生成实例对象
const md = new markdownIt()

export default function MarkdownEdit() {const [htmlString, setHtmlString] = useState('')  // 存储解析后的 html 字符串

    // 3. 解析 markdown 语法
    const parse = (text: string) => setHtmlString(md.render(text));

    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                onChange={(e) => parse(e.target.value)} // 编辑区内容每次批改就更新变量 htmlString 的值
            />
            <div 
                className="show" 
                dangerouslySetInnerHTML={{__html: htmlString}} // 将 html 字符串解析成真正的 html 标签
            />
        </div>
    )
}

对于将 html 字符串 转化为 真正的 html 标签 的操作，咱们借助了 React 提供的dangerouslySetInnerHTML 属性，具体的应用能够看 React 官网文档(opens new window)”)

此时一个简略的 markdown 语法解析性能就实现了，来看看成果

两边的确正在同步更新，然而 ….. 看起来如同哪里不太对！其实是没问题的，被解析好的 html 字符串 每个标签都被附带上了特定的类名，只是当初咱们引入任何的款式文件，例如下图

咱们能够打印解析进去的 html 字符串 看看是什么样的

<h1 id=""> 大题目 </h1>
<blockquote>
  <p> 本文来自公众号：前端印象 </p>
</blockquote>
<pre><code class="js language-js">let name = '零一'
</code></pre>

三、markdown 主题款式

接下来咱们能够去网上找一些 markdown 的主题款式 css 文件，例如我用一个最简略 Github 主题的 markdown 款式。另外我还是很举荐 Typora Theme (opens new window)”)，下面有很多很多的 markdown 主题

因为我这个款式主题是有一个前缀 id write（Typora 上的大部分主题前缀也是#write），所以咱们给展示区的标签加上该类 id，并引入款式文件

import React, {useState} from 'react'
import './theme/github-theme.css'  // 引入 github 的 markdown 主题款式
import markdownIt from 'markdown-it'

const md = new markdownIt()

export default function MarkdownEdit() {const [htmlString, setHtmlString] = useState('')

    const parse = (text: string) => setHtmlString(md.render(text));

    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"  // 新增 write 的 ID 名 
                dangerouslySetInnerHTML={{__html: htmlString}}
            />
        </div>
    )
}

再来看看退出款式后的渲染后果图

四、代码块高亮

markdown 语法的解析曾经实现了，并且也有对应的款式了，然而代码块如同还没有高亮款式

这块儿咱们本人来从 0 到 1 的实现是不可能的，能够用现成的开源库 highlight.js，highlight.js 官网文档 (opens new window)”)，这个库能帮你做的就是检测 代码块标签元素，并为其加上特定的类名。这里放上这个库的 API 文档(opens new window)”)

highlight.js 默认是检测它所反对的所有语言的语法的，咱们就不须要关怀了，并且其提供了很多的代码高亮主题，咱们能够在官网进行预览，如下图所示：

更大的好消息来了！markdown-it曾经将 highlight.js 集成进去了，间接设定一些配置即可，并且咱们须要先将该库下载下来。具体的能够看 markdown-it 中武官网 – 高亮语法配置(opens new window)”)

同时在目录 highlight.js/styles/ 下有很多很多的主题，能够自行导入

接下来就来实现一下代码高亮的性能吧

import React, {useState, useEffect} from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'
import hljs from 'highlight.js'  // 引入 highlight.js 库
import 'highlight.js/styles/github.css'  // 引入 github 格调的代码高亮款式

const md = new markdownIt({
    // 设置代码高亮的配置
    highlight: function (code, language) {if (language && hljs.getLanguage(language)) {
          try {return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language}).value +
                   '</code></pre>';
          } catch (__) {}}
    
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})

export default function MarkdownEdit() {const [htmlString, setHtmlString] = useState('')

    const parse = (text: string) => setHtmlString(md.render(text));

    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"
                dangerouslySetInnerHTML={{__html: htmlString}}
            />
        </div>
    )
}

来看一下代码高亮的效果图：

五、同步滚动

markdown 编辑器还有一个重要的性能就是在咱们滚动一个区域的内容时，另一块区域也跟着同步的滚动，这样才不便查看

接下来咱们来实现一下，我会将我实现时踩的坑也一并列进去，让大家也印象粗浅点，省得当前也犯同样的谬误

刚开始次要实现思路就是当滚动其中一块区域时，计算滚动比例（scrollTop / scrollHeight），而后使另一块区域以后的滚动间隔占总滚动高度的比例等于该滚动比例

import React, {useState, useRef, useEffect} from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'  
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css' 

const md = new markdownIt({highlight: function (code, language) {if (language && hljs.getLanguage(language)) {
          try {return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language}).value +
                   '</code></pre>';
          } catch (__) {}}
    
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})

export default function MarkdownEdit() {const [htmlString, setHtmlString] = useState('')
    const edit = useRef(null)  // 编辑区元素
    const show = useRef(null)  // 展示区元素

    const parse = (text: string) => setHtmlString(md.render(text));

    // 解决区域的滚动事件
    const handleScroll = (block: number, event) => {let { scrollHeight, scrollTop} = event.target
        let scale = scrollTop / scrollHeight  // 滚动比例

        // 以后滚动的是编辑区
        if(block === 1) {
            // 扭转展示区的滚动间隔
            let {scrollHeight} = show.current
            show.current.scrollTop = scrollHeight * scale
        } else if(block === 2) {  // 以后滚动的是展示区
            // 扭转编辑区的滚动间隔
            let {scrollHeight} = edit.current
            edit.current.scrollTop = scrollHeight * scale
        }
    }

    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                ref={edit}
                onScroll={(e) => handleScroll(1, e)}
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"
                ref={show}
                onScroll={(e) => handleScroll(2, e)}
                dangerouslySetInnerHTML={{__html: htmlString}}
            />
        </div>
    )
}

这是我做的时候的第一版，的确是实现了两块区域的同步滚动，然而存在两个 bug，来看看是哪两个

bug1：

这是一个很致命的 bug，先埋个伏笔，先来看成果：

同步滚动的成果实现了，但能很显著得看到，当我手动滚动完当前进行了任何操作，然而两个区域依然在不停的滚动，这是为什么呢？

排查了一下代码，发现 handleScroll 这个办法会有限触发，假如当咱们手动滚动一次编辑区后会触发其 scroll办法，即会调用 handleScroll 办法，而后会去扭转「展示区」的滚动间隔，此时又会触发展示区的 scroll办法，即调用 handleScroll 办法，而后会去扭转「编辑区」的滚动间隔 …. 就这样始终周而复始，才会呈现图中的 bug

起初我想了个比较简单的解决办法，就是用一个变量记住你以后手动触发的是哪个区域的滚动，这样就能够在 handleScroll 办法里辨别此次滚动是被动触发的还是被动触发的了

import React, {useState, useRef, useEffect} from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'  
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

const md = new markdownIt({highlight: function (code, language) {if (language && hljs.getLanguage(language)) {
          try {return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language}).value +
                   '</code></pre>';
          } catch (__) {}}
    
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})

let scrolling: 0 | 1 | 2 = 0  // 0: none; 1: 编辑区被动触发滚动; 2: 展示区被动触发滚动
let scrollTimer;  // 完结滚动的定时器

export default function MarkdownEdit() {const [htmlString, setHtmlString] = useState('')
    const edit = useRef(null) 
    const show = useRef(null)  

    const parse = (text: string) => setHtmlString(md.render(text));

    const handleScroll = (block: number, event) => {let { scrollHeight, scrollTop} = event.target
        let scale = scrollTop / scrollHeight  

        if(block === 1) {if(scrolling === 0) scrolling = 1;  // 记录被动触发滚动的区域
            if(scrolling === 2) return;    // 以后是「展示区」被动触发的滚动，因而不须要再驱动展示区去滚动

            driveScroll(scale, showRef.current)  // 驱动「展示区」的滚动
        } else if(block === 2) {if(scrolling === 0) scrolling = 2;
            if(scrolling === 1) return;    // 以后是「编辑区」被动触发的滚动，因而不须要再驱动编辑区去滚动

            driveScroll(scale, editRef.current)
        }
    }

    // 驱动一个元素进行滚动
    const driveScroll = (scale: number, el: HTMLElement) => {let { scrollHeight} = el
        el.scrollTop = scrollHeight * scale

        if(scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            scrolling = 0    // 在滚动完结后，将 scrolling 设为 0，示意滚动完结
            clearTimeout(scrollTimer)
        }, 200)
    }

    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                ref={edit}
                onScroll={(e) => handleScroll(1, e)}
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"
                ref={show}
                onScroll={(e) => handleScroll(2, e)}
                dangerouslySetInnerHTML={{__html: htmlString}}
            />
        </div>
    )
}

这样就解决了上述的 bug 了，同步滚动也算很不错得实现了，当初的成果就跟文章结尾展现的图片里成果一样了

bug2：

这里还存在一个很小的问题，也不算是 bug，应该算是设计上的思路问题，那就是两个区域其实还没完完全全实现同步滚动。先来看看原先的设计思维

编辑区和展示区的可视高度是一样的，但个别编辑区的内容通过 markdown 渲染后，总的滚动高度是会高于编辑区总的滚动高度的，所以咱们无奈仅凭 scrollTop 和scrollHeight使得两个区域同步滚动，比拟艰涩，用具体的数据来看一下

假如咱们当初滚动编辑区到最底部，那么此时「编辑区」的 scrollTop 应为 scrollHeight - clientHeight = 500 - 300 = 200，依照咱们本来计算滚动比例的形式得出 scale = scrollTop / scrollHeight = 200 / 500 = 0.4，那么「展示区」同步滚动后，scrollTop = scale * scrollHeight = 0.4 * 600 = 240 < 600 - 300 = 300。但事实就是编辑区滚动到最底部了，而展示区还没有，显然不是咱们要的成果

换一种思路，咱们在计算滚动比例时，应计算的是以后的 scrollTop 占 scrollTop最大值的比例，这样就能实现同步滚动了，依然用方才那个例子来看：此时编辑区滚动到最底部，那么 scale 应为 scrollTop / (scrollHeight - clientHeight) = 200 / (500 - 300) = 100%，示意编辑区滚动到最底部了，那么在展示区同步滚动时，他的 scrollTop 就变成了 scale * (scrollHeight - clientHeight) = 100% * (600 - 300) = 300，此时的展示区也同步滚动到了最底部，这样就实现了真正的同步滚动了

来看一下改良后的代码

import React, {useState, useRef, useEffect} from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'  
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

const md = new markdownIt({highlight: function (code, language) {if (language && hljs.getLanguage(language)) {
          try {return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language}).value +
                   '</code></pre>';
          } catch (__) {}}
    
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})

let scrolling: 0 | 1 | 2 = 0  
let scrollTimer;  

export default function MarkdownEdit() {const [htmlString, setHtmlString] = useState('')
    const edit = useRef(null) 
    const show = useRef(null)  

    const parse = (text: string) => setHtmlString(md.render(text));

    const handleScroll = (block: number, event) => {let { scrollHeight, scrollTop, clientHeight} = event.target
        let scale = scrollTop / (scrollHeight - clientHeight)  // 改良后的计算滚动比例的办法

        if(block === 1) {if(scrolling === 0) scrolling = 1;  
            if(scrolling === 2) return;    

            driveScroll(scale, showRef.current)  
        } else if(block === 2) {if(scrolling === 0) scrolling = 2;
            if(scrolling === 1) return;    

            driveScroll(scale, editRef.current)
        }
    }

    // 驱动一个元素进行滚动
    const driveScroll = (scale: number, el: HTMLElement) => {let { scrollHeight, clientHeight} = el
        el.scrollTop = (scrollHeight - clientHeight) * scale  // scrollTop 的同比例滚动

        if(scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            scrolling = 0   
            clearTimeout(scrollTimer)
        }, 200)
    }

    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                ref={edit}
                onScroll={(e) => handleScroll(1, e)}
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"
                ref={show}
                onScroll={(e) => handleScroll(2, e)}
                dangerouslySetInnerHTML={{__html: htmlString}}
            />
        </div>
    )
}

两个 bug 都曾经解决了，同步滚动的性能也算完满实现啦。但对于同步滚动这个性能，其实有两种概念，一种是两个区域在滚动高度上放弃同步滚动；另一种就是右侧的展现区域对应左侧的编辑区的内容进行滚动。咱们当初实现的是前者，后者能够后续作为新性能实现一下~

六、工具栏

最初咱们就再实现一下编辑器的工具栏局部的工具（加粗、斜体、有序列表等等），因为这几个工具的实现思路都统一，咱们就拿 「加粗」 这个工具举例子，其余的就能够模拟着写进去了

加粗工具的实现思路：

• 光标是否选中文字？

  • 是。将选中文字的两侧加上**
  • 否。在光标所在处增加文字** 加粗文字 **

动图成果演示：

import React, {useState, useRef, useEffect} from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'  
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

const md = new markdownIt({highlight: function (code, language) {if (language && hljs.getLanguage(language)) {
          try {return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language}).value +
                   '</code></pre>';
          } catch (__) {}}
    
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})

let scrolling: 0 | 1 | 2 = 0  
let scrollTimer;  

export default function MarkdownEdit() {const [htmlString, setHtmlString] = useState('')
    const [value, setValue] = useState('')   // 编辑区的文字内容
    const edit = useRef(null) 
    const show = useRef(null)  

    const handleScroll = (block: number, event) => {let { scrollHeight, scrollTop, clientHeight} = event.target
        let scale = scrollTop / (scrollHeight - clientHeight)  

        if(block === 1) {if(scrolling === 0) scrolling = 1;  
            if(scrolling === 2) return;    

            driveScroll(scale, showRef.current)  
        } else if(block === 2) {if(scrolling === 0) scrolling = 2;
            if(scrolling === 1) return;    

            driveScroll(scale, editRef.current)
        }
    }

    // 驱动一个元素进行滚动
    const driveScroll = (scale: number, el: HTMLElement) => {let { scrollHeight, clientHeight} = el
        el.scrollTop = (scrollHeight - clientHeight) * scale  

        if(scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            scrolling = 0   
            clearTimeout(scrollTimer)
        }, 200)
    }

    // 加粗工具
    const addBlod = () => {
        // 获取编辑区光标的地位。未选中文字时：selectionStart === selectionEnd；选中文字时：selectionStart < selectionEnd
        let {selectionStart, selectionEnd} = edit.current
        let newValue = selectionStart === selectionEnd
                        ? value.slice(0, start) + '** 加粗文字 **' + value.slice(end)
                        : value.slice(0, start) + '**' + value.slice(start, end) + '**' + value.slice(end)
        setValue(newValue)
    }

    useEffect(() => {
        // 编辑区内容扭转，更新 value 的值，并同步渲染
        setHtmlString(md.render(value))
    }, [value])

    return (
        <div className="markdownEditConainer">
            <button onClick={addBlod}> 加粗 </button>   {/* 假如一个加粗的按钮 */}
            <textarea 
                className="edit" 
                ref={edit}
                onScroll={(e) => handleScroll(1, e)}
                onChange={(e) => setValue(e.target.value)}   // 间接批改 value 的值，useEffect 会同步渲染展示区的内容
                value={value}
            />
            <div 
                className="show"
                id="write"
                ref={show}
                onScroll={(e) => handleScroll(2, e)}
                dangerouslySetInnerHTML={{__html: htmlString}}
            />
        </div>
    )
}

借助这样的思路，就能够实现其它各种工具的实现了。

在我曾经公布的 markdown-editor-reactjs (opens new window)”)中，曾经实现了其它工具的实现，想要看代码的能够去源码里看

七、补充

为了保障包的体积足够小，我将 第三方依赖库 、markdown 主题、 代码高亮主题 都通过外链的模式导入了

八、最初

一个简易版的 markdown 编辑器就实现了，大家能够手动尝试实现一下。后续我也会持续发一些教程，对这个编辑器的性能进行扩大

我将代码都上传到了 Github 仓库 (opens new window)”)（心愿大家点个⭐️ star），后续扩大一下性能，并作为一个残缺的组件公布到 npm 给大家应用，心愿大家多多反对~（其实我曾经轻轻公布，但因性能还不是太欠缺，就不先拿进去给大家应用了，这里简略放个 npm 包的地址 (opens new window)”)）