前言
我是一个掘金重度用户,不仅经常在掘金上挖掘含金量高的文章,偶尔还在掘金上创作技术文章。相信读者们也对掘金非常满意,尤其是它的文章编辑器,不仅支持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;