md-editor-rt是前段时间学习vue3时开发的与vue3版编辑器md-editor-v3同系列的项目。这是一个反应版本。因为vue3版本也是使用tsx完成的，所以react版本的代码差别不大。作者博客前端内容使用nextjs开发，内容管理使用vue开发。文章的提取和编辑以及内容渲染的功能构成了这个项目。一、预览1.1功能预览快速插入内容工具栏、编辑器浏览器全屏、页面全屏等；内置白色主题和深色主题，支持绑定切换；支持快捷键插入内容；支持使用prettier格式化内容（使用CDN方式引入，只支持格式化md内容，可在代码中设置关闭）；支持多种语言，支持自扩展语言；支持上传图片的复制粘贴、图片裁剪上传；支持渲染模式（不显示编辑器，只显示md预览内容，无额外监听）；支持ssr，支持在nextjs中使用；1.2在线预览文档及在线预览：传送门1.3图片预览默认模式暗黑模式2.基本使用react版本目前不导出umd版本。2.1常规单页应用importReact,{useState}from'react';从'md-editor-rt'导入编辑器；导入“./index.less”；exportdefault()=>{const[md,setMd]=useState('');returnsetMd(v)}/>;};2.2服务端渲染服务端渲染一般提供markdown文本渲染内容，而不是加载整个编辑器，以下示例是使用仅预览模式时的情况。从“反应”中导入反应，{useState}；从'md-editor-rt'导入编辑器；导入“./index.less”；exportdefault()=>{const[md]=useState('#title');//preview-only模式只需要提供md文本，不改变文本return;};写法上没有区别，值得注意的是在服务端渲染时最好提供editorId属性。由于编辑器默认会随机生成editorId，会导致服务端的html内容和客户端渲染的html内容不一致，会提示错误（这个问题在nextjs基础环境下可以转载）。2.3Header导航实现React版本最初提供了onGetCatalog属性，编辑器每次render后都会调用该属性，将markdown内容中的title作为列表传回。结构如下：interfaceHeadList{text:string;级别：1|2|3|4|5|6;}//egconst[heads,setHeads]=useState([{text:'Preview',level:'2'}]);作者博客开源blog-template-nextjs中已经基于antd封装了导航菜单，使用起来相当简单：importTopicfyfrom'@/Topicfy';//赋值`onGetCatalog`获取的标题列表直接到`Topicfy`组件。3.编辑器功能演示3.1扩展库链接编辑器的扩展内容大部分使用CDN，考虑到没有外网的情况，支持扩展内网链接。演示（假设外部库都在根目录下）：importReact,{useState}from'react';importMdEditorfrom'md-editor-rt';import'md-editor-rt/lib/style.css';exportdefault()=>{const[text]=useState('');返回("cropperJs="/cropper.min.js"cropperCss="/cropper.min.css"iconfontJs="/iconfont.js"/>);};3.2工具栏自定义所有默认工具栏，每个功能都绑定一个快捷键。如果需要选择性显示工具栏，提供了两个API：toolbars和toolbarsExclude，前者显示数组中的所有，后者屏蔽数组中的所有，后者权重更大这里参考一下：案例不显示github按钮importReact,{useState}from'react';importMdEditorfrom'md-editor-rt';import'md-editor-rt/lib/style.css';exportdefault()=>{const[data]=useState({text:'',toobars:['bold','underline','italic','strikeThrough','sub','sup','quote','unorderedList','orderedList','codeRow','code','link','image','table','revoke','next','save','pageFullscreen','fullscreen','preview','htmlPreview'],toolbarsExclude:['github']});return(<>);};3.3扩展语言编辑器默认内置中文和英文，可通过扩展api覆盖。该函数主要用于设置内容Tips，比如弹窗中的标题等。为了扩展一种语言，我们将其命名为zh-NBimportReact,{useState}from'react';importMdEditor,{StaticTextDefaultValue}from'md-editor-rt';import'md-editor-rt/lib/style.css';constlanguageUserDefined:{'zh-NB':StaticTextDefaultValue}={'zh-NB':{toolbarTips:{bold:'Bold',underline:'Underline',italic:'Italic',strikeThrough:'删除线',title:'title',sub:'subscript',sup:'superscript',quote:'reference',unorderedList:'unorderedlist',orderedList:'orderedlist',codeRow:'inlinecode',code:'block-levelcode',link:'link',image:'image',table:'table',revoke:'back',next:'forward',save:'save',prettier:'美化',pageFullscreen:'浏览器全屏screen',fullscreen:'screen全屏',preview:'预览',htmlPreview:'html代码预览',github:'源地址'},titleItem:{h1:'一级标题',h2:'二级标题',h3:'三级标题',h4:'四级标题',h5:'五级标题',h6:'六级标题'},linkModalTips:{title:'Add',descLable:'Linkdescription:',descLablePlaceHolder:'请输入描述...',urlLable:'链接地址：',UrlLablePlaceHolder:'请输入链接...',buttonOK:'确定',buttonUpload:'上传'},clipModalTips:{title:'裁剪图片上传',buttonUpload:'上传'},copyCode:{text:'复制代码',tips:'复制'}}};exportdefault()=>{const[data]=useState({text:'',language:'zh-NB',languageUserDefined});返回();};ifkey='zh-CN'，可以实现中文覆盖，以此类推。3.4主题切换比较简单。内置深色主题和默认主题可以通过themeapi切换。演示如下：importReact,{useState}from'react';从'md-editor-rt'导入MdEditor；导入“md-editor-rt/lib/style.css”；exportdefault()=>{const[data]=useState({text:'',theme:'dark'});返回;};更多文末更新请关注：md-editor-rt
