给你的网页加上Markdown编辑器功能

以前我们想在页面上加富文本编辑器,总是需要引入某个RichEditor框架,格式并不通用,所以后期处理还是很麻烦的。现在随着Markdown格式的普及,用简单的ASCII组合就可以实现各种格式

首先我们要引入showdown这个js脚本,它支持npm安装,但用cdn是最简单的,一行搞定


给你的网页加上Markdown编辑器功能_第1张图片
1.png

然后通过Converter函数初始化后,再把输入的字符串转为html即可。


给你的网页加上Markdown编辑器功能_第2张图片
2.png

我们需要提供一个textarea去输入,还有一个div去显示转化为html的效果,textarea的id为txt, 在它的keypress里检查是不是回车键,如果是,就调用makeHtml 转化textarea的值就好了

效果如下


给你的网页加上Markdown编辑器功能_第3张图片
3.png

扫码关注公众号,获取最新文章


qrcode_for_gh_49497593f54f_258 (2).jpg

你可能感兴趣的:(给你的网页加上Markdown编辑器功能)