【看后必会】一步步教你用React写一个markdown实时编辑器！

本文链接：https://blog.youkuaiyun.com/Jack_lzx/article/details/118495763

1. 实现效果

最近在用React写一个博客管理系统，有一个功能是添加新文章。在新建文章的页面，我希望做到像优快云这样，左边是编辑区（markdown格式），右边是预览区。实时更新，编辑文本的同时，在预览区就能看到效果。

就自己动手实现了一个这样的组件，markdown实时预览编辑器！

具体效果如下：

2. 实现过程

使用React实现，做成单独的一个组件。

首先HTML结构如下：

<header>基于React的markdown实时编辑器</header>
<div className="marked">
    {/* 编辑区 */}
    <div className="input-region markdownStyle"></div>
    {/* 预览区 */}
    <div className="show-region markdownStyle"></div>
</div>

稍微写一点样式，让编辑区和预览区左右布局。

定义一个hook，存储输入的内容：

const [text, setText] = useState('');

左边编辑区，让一个div可编辑，给其加上contentEditable属性，并让值为plaintext-only，表示编辑区域只能输入纯文本。

<div className="input-region markdownStyle" contentEditable="plaintext-only">