实现一个掘金Style的文章编辑器

最新推荐文章于 2025-03-24 16:52:57 发布

原创

最新推荐文章于 2025-03-24 16:52:57 发布 · 393 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用React、CodeMirror和Showdown实现一个类似掘金文章编辑器的单页应用。内容涵盖布局、顶部标题输入框、Markdown编辑器、预览区的实现，并讨论了Markdown和预览的滑动联动功能。此外，还展示了项目ArtiPub的背景和目标，提供源码链接。

前言

我是一个掘金重度用户，不仅经常在掘金上挖掘含金量高的文章，偶尔还在掘金上创作技术文章。相信读者们也对掘金非常满意，尤其是它的文章编辑器，不仅支持Markdown编辑，而且还支持代码高亮、分屏预览、自动保存等等。本文将用React＋CodeMirror＋Showdown实现一个类似于掘金编辑器的单页应用。

动图效果

先不说那么多，先上动图效果吧。

布局

下面是掘金文章编辑器的布局。

可以看到，编辑器主要由5个部分组成:

顶部栏
左侧Markdown编辑器
左侧底部
右侧预览
右侧底部

我们首先需要做的是将各个位置摆放出来。

创建一个文件叫Demo.tsx，输入以下内容。（我们先不管怎么构建一个React＋Typescript应用，这里只看逻辑）

import React from 'react';

// 引入样式
import style from './Demo.scss';

const Demo: React.FC = () => {
  return (
    <div className={style.articleEdit}>
      <div className={style.topBar}>
        顶部栏
      </div>

      <div className={style.main}>
        <div className={style.editor}>
          <div className={style.markdown}>
            左侧Markdown编辑器
          </div>
          <div className={style.footer}>
            左侧底部
          </div>
        </div>

        <div id="preview" className={style.preview}>
          <div
            id="content"
            className={style.content}
          >
            右侧预览
          </div>
          <div className={style.footer}>
            右侧底部
          </div>
        </div>
      </div>
    </div>
  );
};

export default Demo;

这里的React.FC是FunctionComponent的简写，表示一个函数型组件。在组件中返回的是jsx中的模版内容。style.xxx是React独有的引用样式的一种方式，即样式封装在className中，在React组件中直接通过className来引用，就可以将其涵盖的样式（包括伪类）“继承”过来。

然后，我们在样式文件Demo.scss中输入以下样式内容。

.articleEdit {
  height: 100vh;
  color: red;
  font-size: 24px;
}

.topBar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-bottom: 1px solid #eee;
}

.main {
  display: flex;