ReactMarkdown编辑器：实现实时预览与编辑
ReactMarkdown 编辑器：实现实时预览与编辑
Markdown 以其简洁的语法和易读性，成为了越来越多开发者、写作者的首选文本格式。而一个优秀的 Markdown 编辑器，不仅要提供流畅的编辑体验，更重要的是能够实时预览 Markdown 渲染后的效果。本文将深入探讨如何使用 React 构建一个功能完备的 Markdown 编辑器，并实现实时预览与编辑功能。
1. 技术选型与核心依赖
构建 ReactMarkdown 编辑器，我们需要几个关键的库：
- React: 作为基础的 UI 框架，负责组件化开发和状态管理。
- react-markdown: 将 Markdown 文本解析并渲染成 React 组件，是实现实时预览的核心。
- remark-gfm: (可选) 一个
remark插件，用于支持 GitHub Flavored Markdown (GFM) 特性，如表格、任务列表、删除线等。 remark-gfm 扩展了基本的 Markdown 语法，使其更强大。 - @uiw/react-md-editor: (可选，但强烈推荐) 开源的react markdown编辑器组件，提供更丰富的功能和更便捷的API。 本文大部分内容会以使用这个库为前提进行说明。
- CodeMirror / @uiw/react-codemirror: (可选) 提供代码高亮和更高级的编辑功能，如果你的编辑器需要支持代码块的语法高亮，这是必要的。@uiw/react-codemirror 是对 CodeMirror 的 React 封装.
- unified, remark, rehype: (可选) 如果你想要更深层次地自定义 Markdown 的解析和渲染过程，可以使用这些更底层的库。
react-markdown内部也依赖于它们。
2. 项目搭建与基础结构
首先，创建一个新的 React 项目 (如果你还没有的话):
bash
npx create-react-app my-markdown-editor
cd my-markdown-editor
然后，安装必要的依赖：
bash
npm install @uiw/react-md-editor @uiw/react-codemirror @codemirror/lang-markdown @codemirror/language-data
接下来，我们可以创建一个基础的编辑器组件 (Editor.js):
```javascript
import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';
function Editor() {
const [value, setValue] = useState("Hello world!!!");
return (
{/ 如果不想使用MDEditor自带的预览，可以用这个div显示value，并配合react-markdown /}
{/
/}
);
}
export default Editor;
``useState
**代码解释**
* ****: 用于管理 Markdown 文本的状态。value存储当前的 Markdown 文本，setValue用于更新value。
* ****: @uiw/react-md-editor 提供的核心组件。value
* ****: 传递给编辑器的 Markdown 文本。onChange
* ****: 当编辑器内容发生变化时触发的回调函数，用于更新value。preview
* ****: 控制预览模式。 "live" 表示实时预览。height`**: 编辑器高度。
* **
3. 实时预览的原理 (如果不使用 @uiw/react-md-editor)
如果你选择不使用 @uiw/react-md-editor, 而是自己实现, 核心原理如下 (对应上面代码注释掉的部分)：
- 监听输入: 使用
<textarea>或其他可编辑的元素，监听用户的输入事件 (如onChange,onInput)。 - 状态更新: 每当用户输入发生变化，更新组件的状态 (如
useState中的value)。 - Markdown 解析: 使用
react-markdown将更新后的 Markdown 文本解析成 React 组件。 - 渲染: React 会自动重新渲染组件，将解析后的 Markdown 内容显示在页面上。
```javascript
import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import './Editor.css'; // Import CSS for styling
function Editor() {
const [markdown, setMarkdown] = useState('Hello, world!');
const handleChange = (event) => {
setMarkdown(event.target.value);
};
return (
);
}
export default Editor;
```
```css
/ Editor.css /
.editor-container {
display: flex;
height: 500px; / Or any desired height /
}
.editor-pane, .preview-pane {
flex: 1; / Equal width for both panes /
padding: 10px;
border: 1px solid #ccc;
overflow: auto;
}
.editor-pane textarea {
width: 100%;
height: 100%;
border: none;
outline: none;
resize: none; / Prevent textarea resizing /
font-family: monospace; / Use monospace font for Markdown /
font-size: 14px;
}
.preview-pane {
/ Add some padding to make the preview look nicer /
padding: 20px;
/ Optionally add some styling to the preview output /
/ Example: /
/ h1 { font-size: 2em; } /
}
```
代码解释（手动实现版本）:
useState: 用于存储 Markdown 文本。handleChange: 处理<textarea>的onChange事件，更新markdown状态。<textarea>: 用于用户输入 Markdown 文本。<ReactMarkdown>: 将markdown状态中的文本渲染成 HTML。remarkPlugins={[remarkGfm]}: 使用 remark-gfm 插件来支持 GFM 特性。- CSS: 将编辑器和预览区域分成两列，并为
<textarea>添加基本样式。
4. 代码高亮 (使用 @uiw/react-codemirror)
要实现代码块的语法高亮, 可以使用 @uiw/react-codemirror，@uiw/react-md-editor 已经集成了该功能。
```javascript
import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';
import 'codemirror/keymap/sublime'; // 引入sublime快捷键，可选
import { javascript } from '@codemirror/lang-javascript'; //引入js高亮，也可以引入其他语言的高亮
import { markdown } from '@codemirror/lang-markdown';
import { languages } from '@codemirror/language-data';
function Editor() {
const [value, setValue] = useState("js\nconsole.log('Hello, world!');\n");
return (
),
execute: ({ view }) => {
console.log(view)
const dom = view.dom.parentElement.parentElement
if(dom.classList.contains('wmde-fullscreen')){
dom.classList.remove('wmde-fullscreen')
}else{
dom.classList.add('wmde-fullscreen')
}
},
}
]}
previewOptions={{ //可以自定义预览区域的配置
components:{ //可以自定义markdown渲染的组件，例如把h1标签渲染成其他组件
h1:(props)=>(
{props.children}
)
}
}}
textareaProps={{ //配置textarea的属性
placeholder: 'Please enter Markdown...',
}}
hideToolbar={false} //是否隐藏工具栏
visibleDragbar={false} //是否可以拖动改变大小
//重点：配置CodeMirror
codeMirror={cm => {
//可以在这里访问到CodeMirror实例
//console.log('CodeMirror Instance:', cm);
}}
//重点：配置代码高亮
codeMirrorOptions={{
tabSize: 4,
keyMap: 'sublime',
mode: 'markdown', //设置markdown模式
theme: 'abcdef', //设置主题, 需要安装并引入对应的主题样式 @uiw/codemirror-theme-abcdef
lineNumbers: true, //显示行号
readOnly: false,
lineWrapping: true, //自动换行
autofocus: true,
styleActiveLine: true, //当前行高亮
//配置语言
extensions: [
markdown({ base: markdown, codeLanguages: languages }),
javascript(), //如果需要js高亮，则引入javascript
// 可以添加更多语言支持
],
}}
/>
);
}
export default Editor;
```
代码解释（CodeMirror 配置部分）:
codeMirrorOptions: 用于配置 CodeMirror。mode: 设置为'markdown'以启用 Markdown 模式。extensions: 传入语言扩展, 例如javascript(),markdown({ base: markdown, codeLanguages: languages })。theme: 设置 CodeMirror 的主题 (需要安装并引入对应的主题样式，例如@uiw/codemirror-theme-abcdef)。extraTools: 添加自定义工具栏按钮previewOptions: 自定义预览区域配置textareaProps: 配置textarea属性hideToolbar: 是否隐藏工具栏visibleDragbar: 是否显示拖动条
5. 更进一步的功能增强
- 工具栏: 添加工具栏以提供常用的 Markdown 格式化选项 (加粗、斜体、链接、图片等)。
@uiw/react-md-editor已经内置。 - 快捷键: 支持常用的 Markdown 快捷键 (如 Ctrl+B 加粗)。
@uiw/react-md-editor已经内置，也可以通过codeMirrorOptions中的keyMap属性配置。 - 图片上传: 实现图片上传功能，并将图片链接插入到 Markdown 文本中。
- 自定义样式: 通过 CSS 或 styled-components 等方式自定义编辑器的外观。
- 主题切换: 支持浅色和深色主题切换。
- 导出功能: 支持将 Markdown 文本导出为 HTML、PDF 等格式。
- 字数统计: 显示当前 Markdown 文本的字数统计。
- 历史记录/撤销重做: 实现编辑历史记录，支持撤销和重做操作 (可以使用
CodeMirror的history扩展)。 - 全屏模式: 提供全屏编辑模式。上面代码中已经添加了全屏按钮的示例。
- 拖拽上传: 允许用户直接将图片拖拽到编辑器中进行上传。
- 保存到本地/服务器: 将markdown内容保存到localStorage或者服务器。
6. 总结
通过 React、react-markdown、@uiw/react-md-editor 和 CodeMirror，我们可以构建一个功能强大、用户体验良好的 Markdown 编辑器，并实现实时预览和编辑功能。 本文提供了详细的实现步骤和代码示例，涵盖了基础结构、实时预览原理、代码高亮以及更进一步的功能增强。希望本文能够帮助你构建出色的 Markdown 编辑器！