todolist增加markdown模块

markdown编辑器


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

todolist小项目地址

之前的介绍随笔todoList

markdown-js仓库

遇到的问题:

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

    解决办法:在随路由切换组件时,组件会destory,然后重新被mounted,这是导致在textarea输入的markdown字符丢失的原因。解决办法是,在编辑器组件的beforemount选项中写个函数,使得组件在渲染前检查应用statediary属性中是否有保存的值,如果有,则复制给组件的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

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

上一篇:Storm官方帮助手册翻译(下)


下一篇:jQuery实现用户输入自动完成功能