100行代码实现基于react的markdown输入+即时预览在线编辑器

最新推荐文章于 2025-09-15 01:06:28 发布

原创

最新推荐文章于 2025-09-15 01:06:28 发布 · 7.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#markdown #编辑器

本文介绍了如何使用100行代码实现一个基于React的Markdown编辑器，具备即时预览、代码高亮和跟随滚动功能。通过创建一个可编辑的元素，监听输入事件并利用marked库实时转换Markdown文本。同时引入highlight.js实现代码高亮，通过监听滚动事件实现滚动同步。文章还提到了如何通过Ace和CodeMirror进一步增强编辑器功能。

`DOM`结构

首先，先上效果图：

这里写图片描述

首先说明一下，本文的一些细节或者技巧是建立在我的另外一篇文章上的，如果你在读的过程中，有什么地方不太清楚的，可以先去看看那篇文章，或许可以找到答案。

左侧是 markdown输入框，右侧是对应的 markdown输出即时预览框，两个元素框可以相互跟随滚动。

由效果图可以基本确定，整个页面大概分为三个大块，顶部的 header标题输入框、主体左侧 markdown输入框、主体右侧 markdown即时预览框。

于是，可以很快速地写下 DOM：

render() {
  return [
    <header key='header'>
      <input type="text" placeholder="输入文章标题..." spellCheck="false"/>
    </header>,
    <div key='main'>
      <div>
        <div contentEditable="plaintext-only"></div>
      </div>