markdown编辑器

---

利用`markdown_js`开源库实现todolist小项目的markdown日记本功能

todolist小项目地址

之前的介绍随笔todoList

markdown-js仓库

遇到的问题：

1. 当从编辑器切换到list，然后再切换回来，之前输入的内容丢失

   解决办法：在随路由切换组件时，组件会destory，然后重新被mounted，这是导致在textarea输入的markdown字符丢失的原因。解决办法是，在编辑器组件的beforemount选项中写个函数，使得组件在渲染前检查应用state的diary属性中是否有保存的值，如果有，则复制给组件的md属性。同时设置保存按钮，在保存时将数据保存到state中，如果没有用state，则应该通过emit方法，提交给父组件的data下的属性。

2. 导入markdown_js出现问题。

   解决办法:之前我的导入方式是这样的:

import markdown from 'markdown';

htmlStr=markdown(input);

结果出错，原因在于markdown库导出的是一个对象，而不仅仅是一个函数。

解决办法:

import {markdown} from 'markdown';

htmlStr=markdown(input);

为markdown加上大括号后，就是从库中将markdown函数导出来。

意外的收获

犯了上面的错误之后，我到markdown的readme上一看，只有在CMD下的导入代码，没有在ES6下的导入方法，看来我要露一手了。

我抱着试试看的心态fork了这个项目,然后在readme中把我上面写的代码加了进去。然后给官方仓库提交了一个PR，没过几分钟，我的PR被merged了！当时看到还是挺开心的，毕竟是走出了为开源项目贡献的第一步啊，我感觉胸前的红领巾更鲜艳了。莫哈哈哈。。。

所以说，给开源项目贡献并不是想象中的那么难，如果编程功力不够，我们还可以从别的方面来出自己的一份力，比如：

• 对于国外的项目，翻译文档
• 完善他们的README
• 使用中发现了BUG,给他们提交issues

总之一句话，我为人人，人人为我嘛。