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 编辑器。
后台模板为什么需要内置编辑器
后台系统里的运营公告、产品帮助、知识库条目都需要一个文本编辑入口，而这在模板里往往是留白项，得等开工时自己找组件拼装。该模板把两类编辑器封装成了独立组件：一个面向“排版优先”的可视化编辑场景，一个面向“语法优先”的写作场景。两个示例页面放在 src/views/components-demo/ 目录下，接入前可以先翻源码确认能力边界。
react-draft-wysiwyg 富文本编辑器能做什么
富文本编辑器基于 react-draft-wysiwyg（底层依赖 draft-js），组件源码在 src/components/RichTextEditor/index.jsx。工具栏使用中文，覆盖加粗、斜体、下划线、字号与颜色、列表、链接、图片、表格等操作。示例页还会用两张卡片实时把当前内容同步转换成 HTML 和 Markdown，对接后端提交时可以直接看到即将发送的数据格式。
tui.editor 的 Markdown 编辑器与实时预览怎么用
Markdown 编辑器采用 tui.editor 的 React 版（package.json 中的 @toast-ui/react-editor 依赖），源码在 src/components/Markdown/index.jsx。组件把 previewStyle 设为 vertical，即上方编辑、下方渲染预览，输入时同步更新；同时开启 useCommandShortcut，常用格式化快捷键可用，编辑器高度固定为 600px。
如何运行项目并找到两个编辑器示例页
先克隆仓库：
git clone https://gitcode.com/gh_mirrors/re/react-antd-admin-template然后在项目目录安装依赖并启动开发服务（npm install、npm start 脚本），浏览器会自动打开本地 3000 端口的页面。登录后，左侧“组件”菜单下有“富文本”（路由 /components/richTextEditor）和“Markdown”（路由 /components/Markdown）两项，仅 admin、editor 角色可见；页面文件即 src/views/components-demo/ 下的 richTextEditor.jsx 与 Markdown.jsx。
两类内容该选哪种编辑器
面向不会写代码的运营人员、内容以图文为主、需要插表格调字号颜色时，选富文本编辑器，产出是 HTML，适合运营公告和产品帮助；内容属于 changelog、接口说明等技术文档、希望边写边看渲染效果时，选 tui.editor 的 Markdown 编辑器。跑起来之后想改行为，先看 src/components/RichTextEditor 与 src/components/Markdown 两个组件，再改 src/views/components-demo/ 下对应页面即可。
【免费下载链接】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），仅供参考
