react-mde 使用markdown编辑器
react-mde 是简易markdown编辑面板到一个包,在react中使用。
安装react-mde包,在运行的时候
最开始安装了版本5.8.0 由于和本项目出现冲突,所以升级版本为6.0.0,由于6.0.0中暴露的接口比较少,比如6.0.0中没有暴露出minPreviewHeight 无法通过参数去调整markdown preview面板的min-hieght,只能通过样式修改去做,比较不方便。
- 5.8.0及之前,markdownEditor中的输入值是存储在mdeState中的,mdeState中包括markdown(输入值)和state状态(write编辑状态/review预览状态),在6.0.0中,直接存在了value中,并state状态更改为了currentTag
- 从6.0.0版本直升到了7.0.0,取消了onTabChange 和 currentTag ,无法主动去干涉当前到状态
- 到了7.0.3,重新开放了currentTag,但是更名为selectedTab,以及开放了onTabChange
查看npm官网中中react-mde中的版本更新记录,并到源码中去查看对应版本到源码,在7.0.2中找到需要到暴露参数,所以打算直接将项目中到ract-mde包升级到7.0.2版本。
但是在npm install 之后,起项目的时候报错
Failed to compile.
./node_modules/react-mde/lib/js/commands/index.js
Module not found: Can't resolve './strikeThroughCommand' in '/opt/app-root/src/www/mo_prod/frontend/node_modules/react-mde/lib/js/commands'
确认操作无误,且重新安装之后还是报错,cd到项目中查看react-mde包中到lib文件,发现确实有strikeThroughCommand.js 这个文件,只是文件名出现偏差 ,变为了strikethroughCommand。
其中到through有大小写的区别,所以起项目的时候找不到lib包中的文件报错。
跟着react-mde版本更新的记录网上摸索,在7.4.1这个问题才被修复。对应的文件被重新汇总到一个文件夹中。具体代码就不展示了。
结果实际安装,发现上图的几个版本包都是坏的,安装了也无法使用。所以我这边最后安装了版本7.4.1
目前最新的react-mde版本已经更新到了11.0.0,为这里是因为项目最好不要因为版本升级造成太大到变化,所以只能尽量小版本的升级。其他情况可以尽可能用比较新的版本