React-antd-admin-template 编辑器完整指南：从 Markdown 到富文本
React-antd-admin-template 编辑器完整指南：从 Markdown 到富文本
【免费下载链接】react-antd-admin-template一个基于React+Antd的后台管理模版，在线预览https://nlrx-wjc.github.io/react-antd-admin-template/项目地址: https://gitcode.com/gh_mirrors/re/react-antd-admin-template
后台里要改图文内容、要写技术文档时，编辑功能绕不开。React-antd-admin-template 这个 React + Ant Design 后台模板，内置了 Markdown 和富文本两个编辑器，引入组件就能用。
🚀 3 步跑通编辑器演示页
先看细节不如先跑起来：
- 克隆仓库：
git clone https://gitcode.com/gh_mirrors/re/react-antd-admin-template- 进入项目执行
npm install，再跑npm start，开发服务器起来后自动打开页面。 - 用账号 admin 登录（密码随便填），左侧菜单「组件」下能看到「富文本」和「Markdown」两项，这就是今天的两个演示页。
动图里录的就是这套登录流程，你第一次进去的样子和它一样。
📝 React 后台 Markdown 编辑器：左边写、右边渲染
写技术文档的人多半用 Markdown，但最烦的是边写边切出去看渲染效果。这个模板用 tui.editor 的 React 版做了这件事，界面按纵向一分为二：
- 左写右看：左边输入 Markdown 语法，另一栏实时显示渲染后的效果，不用开第二个标签页验证
- 键盘友好：常用格式快捷键可以直接敲，手不用离开键盘
- 拿来即用：高度固定 600px，丢进任意页面就是完整可用的编辑器
它整体封装在 src/components/Markdown/index.jsx 里，演示页放在 src/views/components-demo/Markdown.jsx，点进去感受一下「左边敲、右边变」的节奏。
🖌️ Antd 富文本编辑器：格式工具栏给你备齐了
图文混排是另一类场景：产品简介、系统公告，操作的人不一定是开发，得点一下就能排版。
- 格式工具栏全：字号、颜色、加粗、斜体这些常用操作都在工具栏里，按钮是中文的
- 能插各类元素：图片、链接、表格都能插入，后台图文混排最常要的就是这个
- 两种格式同步输出：演示页在编辑器下方把编辑内容同步成 HTML 和 Markdown 两栏，后台接哪种格式就取哪种
组件封装在 src/components/RichTextEditor/index.jsx 中，演示页是 src/views/components-demo/richTextEditor.jsx，引入后可以先试试切换字号和颜色，看下同步栏的变化。
🧭 两个编辑器怎么选
别纠结，看三个维度：
| 对比项 | Markdown 编辑器 | 富文本编辑器 |
|---|---|---|
| 适用场景 | 技术文档、更新日志、接口说明 | 产品文案、公告、图文混排 |
| 预览方式 | 左编辑右渲染，所见即所得 | 无预览区，下方两栏同步输出 HTML / Markdown |
| 上手成本 | 需要熟悉 Markdown 语法 | 零门槛，点工具栏按钮即可 |
React-antd-admin-template 是一套开箱即用的 React + Ant Design 后台模板，这两个编辑器只是它里现成组件之一，新项目里引进来就能开工。
【免费下载链接】react-antd-admin-template一个基于React+Antd的后台管理模版，在线预览https://nlrx-wjc.github.io/react-antd-admin-template/项目地址: https://gitcode.com/gh_mirrors/re/react-antd-admin-template
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考