react-antd-admin-template 后台引入富文本与 Markdown 双编辑器只需两步【免费下载链接】react-antd-admin-template一个基于ReactAntd的后台管理模版在线预览https://nlrx-wjc.github.io/react-antd-admin-template/项目地址: https://gitcode.com/gh_mirrors/re/react-antd-admin-template做后台管理页面绕不开一个需求内容录入。运营要所见即所得的富文本技术同学要能写 Markdown。自己引入的话要挑组件库、调样式、接预览成本不低。react-antd-admin-template 把两类编辑组件都封装好了demo 页面开箱可见落到自己项目里只需要拷贝src/components/下的现成组件。一句话定位这是一个基于 React 16 antd 3 Redux 的后台管理模版覆盖登录权限、菜单配置、表格、图表、Excel 导入导出等后台常见页面编辑器能力是其中一组现成组件适合需要快速交付内部内容管理页面的团队。富文本编辑器同步输出 HTML 与 Markdown它解决的问题图文混排的所见即所得编辑以及后端存储格式往往不固定——文章正文可能存 HTML博客可能存 Markdown。项目里的做法src/components/RichTextEditor/index.jsx基于 draft-js 封装 react-draft-wysiwyg工具栏通过localization配成中文。值得注意的是它用convertToRaw配合draftToHtml/draftToMarkdown做了同步转换在两张卡片里并排展示当前内容的两种输出格式开发时能直接确认交给后端的是什么格式。使用方式示例页src/views/components-demo/richTextEditor.jsx只引入了一个组件菜单入口在「组件 → 富文本」。Markdown 编辑器竖屏分栏左边写右边预览 ⚡它解决的问题用 Markdown 写技术文档、文章正文时边写边看渲染效果不用先保存再刷新看预览。项目里的做法src/components/Markdown/index.jsx基于 toast-ui/react-editor关键配置两处——previewStylevertical左右分栏右侧实时预览useCommandShortcut开启常用 Markdown 命令快捷键。Editor initialValuehello 难凉热血! previewStylevertical height600px initialEditTypemarkdown useCommandShortcut{true} /接入只需引入这个组件示例页为src/views/components-demo/Markdown.jsx菜单入口在「组件 → Markdown」。从克隆到看到编辑器效果的 4 步克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/re/react-antd-admin-template cd react-antd-admin-template npm install执行npm start启动构建走 react-app-rewired可通过config-overrides.js覆盖默认配置。用演示账号登录admin 账号密码任意填写。点左侧菜单「组件」即可看到富文本、Markdown 两个示例页。登录页背景是一张全屏图默认为src/assets/images/bg.jpg替换这张图就能切换登录页风格这套编辑能力适合谁适合用 antd 3 / React 16 技术栈、需要给现成后台快速补内容录入的团队两个组件彼此独立、无业务耦合拷走即用。不适合对多人协同编辑、块级编辑有重需求的场景——draft-js 与 toastui.editor 都是客户端单人编辑方案。相比自己接编辑器它省掉的是组件选型、样式调整和中文本地化环节输出格式已经接好demo 页本身就是一份文档。对后台模版来说把内容编辑做成现成的一环就够了组件拷走即可开工效果有出入时对着对应示例页改就行。【免费下载链接】react-antd-admin-template一个基于ReactAntd的后台管理模版在线预览https://nlrx-wjc.github.io/react-antd-admin-template/项目地址: https://gitcode.com/gh_mirrors/re/react-antd-admin-template创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考