0x01 Markdown编辑器
可以给大家安利一波Markdown 编辑器 storywriter 。功能如下:
0x1 语法丰富
不仅提供了常用的commanmarkdown语法,还提供了许多有用的扩展语法,比如Latex公式,表格, 目录, 脚注, 视频, 音频, 附件, checklist, 流程图等。 样图如下:
![f2a9c69fa5f73b2556cdf859b2ef5305.png](https://i-blog.csdnimg.cn/blog_migrate/1803f132de0734bca6c55e1eef7471ed.png)
![32ebca5cd06b83f9b117965a8af808bb.png](https://i-blog.csdnimg.cn/blog_migrate/75640e4ed6b97d3656f6818bcb889c38.png)
![c1cff559b36e8f2d08359a221af8b5a2.png](https://i-blog.csdnimg.cn/blog_migrate/c6c896bbe91f1a5bb992e154eae617d1.png)
![dec50d83a128e57c681d31ce3a076de3.png](https://i-blog.csdnimg.cn/blog_migrate/59fccb667bd1106c58803460571a04b0.jpeg)
![d403462890d7851963a6098d34d0fd75.png](https://i-blog.csdnimg.cn/blog_migrate/995e3fbdd215e81f82a77fe68fdcf685.png)
![805cba5c699d793326b061a9fb404e79.png](https://i-blog.csdnimg.cn/blog_migrate/eadca5514efe6133beb62a9af12bb68d.png)
![3938837be163e9956b3ab63380fad97d.png](https://i-blog.csdnimg.cn/blog_migrate/29f54e40fa3c4acc628648f05b58063b.png)
0x2 平台多样
![05fba22fea49039fe4a04c61583022af.png](https://i-blog.csdnimg.cn/blog_migrate/565ec791941a2998a05f0a01c63e1de4.png)
支持多种平台绑定,缺陷是不能喝博客系统进行绑定,但是支持多种图床和自定义图床这就方便了很多下面会介绍怎么一文多发到博客上。
同时支持多种操作系统
![5f0b77514053726507bfddca6df309b0.png](https://i-blog.csdnimg.cn/blog_migrate/aedacedd3347b7fd9bbea2941f68ebf4.jpeg)
0x3 配置灵活
支持各种配置包括主题模式、渲染模式、代码模式、编辑模式、键盘模式、预览模式、语法扩展等等
![819fb03cdfb278ae0ab889cc256ed834.png](https://i-blog.csdnimg.cn/blog_migrate/e326bc6ea28b71f7eb93f7be8bb0b06e.png)
![23d01d5eb3abe8b465cd8e45bc6151f1.png](https://i-blog.csdnimg.cn/blog_migrate/39df00bb35be40c42d008b6b70d771ff.png)
0x4 渲染好看
最最最最重点的是渲染很好看,可以导出各种格式,包括网页版,所以很方面。下面截几个图
![db89437f9f60af01709f6de37ad60e0c.png](https://i-blog.csdnimg.cn/blog_migrate/460f9371e9f58a61a01d65c001a5609d.jpeg)
![6d1dce22912114a02f87b070102397c6.png](https://i-blog.csdnimg.cn/blog_migrate/dd2b7ababa2b9fe8bf509db2cdeda106.jpeg)
![fd0b817c15df16afe965d4c6e04d6766.png](https://i-blog.csdnimg.cn/blog_migrate/4f26b321f662f2d761a7daf4ad7d4262.jpeg)
同时还支持PPT 和 pdf预览模式
![efa73693d56ca963c6f4e962624551a6.png](https://i-blog.csdnimg.cn/blog_migrate/9ce58651c4c7172271efd793b4d63fd1.png)
0x5 导出种类多
![ee2f23c6a4a00de2fc89fc631bf4db97.png](https://i-blog.csdnimg.cn/blog_migrate/f7a86559433bbe6ad8e8d198818208cc.jpeg)
目前支持很多导出方式,足够满足你的需求
0x02 问题描述
多么好的玉也会有瑕疵,就像这小书匠一样,它存在一些小问题
- 支持的图床种类不多,并且与微信公众号支持的图床没有交集
- 不支持一文多发
作为一个很好的markdown编辑器,不能让这些缺点成为放弃他的理由
0x03 解决问题
0x1 一文多发
可以采用目前比较成熟的一文多发工具 https://my.openwrite.cn/ https://github.com/crawlab-team/artipub
openwrite
![43e90a1dc82c610b1df175331dd244db.png](https://i-blog.csdnimg.cn/blog_migrate/5275ff580d490b2477f8df07ce3dcfc4.png)
付费的会员模式和普通模式对比
![06721bc4fcb17dcedd585e81107eec5b.png](https://i-blog.csdnimg.cn/blog_migrate/222d75d108904b12ef1bb919573a0111.png)
ArtiPub
![2c3295aadae4b62cce7b35f0b98cfbc0.png](https://i-blog.csdnimg.cn/blog_migrate/3d60a23ad1a0c364a90cf88e8a5172e4.png)
开源工具利用docker可以快速搭建,有些功能在本地运行会报错,兼容性有待加强。
0x2 图床问题
目前公众号支持的图床种类不多,经过测试可以使用百度图片搜索时的图床。代码如下,我会详细介绍怎么个分析流程。
1 百度识图
![ac23d49150d6404eceb8ae8a94412573.png](https://i-blog.csdnimg.cn/blog_migrate/6c26435af58bbdc399f968521c629f43.png)
通过百度识图的上传接口将图片存在百度服务器
2 抓取上传流量包
![203c82a8f040f48bb45993743d723ad8.png](https://i-blog.csdnimg.cn/blog_migrate/33e01935f9b694f52cf523b65fd4e772.jpeg)
分析获取的流量包和图片url规律
{"status":0,"msg":"Success","data":{"url":"https://graph.baidu.com/s?sign=1211bcbb3907707c50c0001588934534&f=all&tn=pc&srcp=&tn=pc&idctag=tc&sids=10006_10061_10090_10190_10291_10391_10802_10705_10301_10709_10019_10912_11006_10905_10015_10901_10907_11013_11032_11120_11160_11170_12115_12132_13007_12201_13203_12302_12402_12410_14001_14011_14021_15001_9999&logid=2534197937&entrance=general&pageFrom=graph_upload_pcshitu&extUiData%5BisLogoShow%5D=1&tpl_from=pc","sign":"1211bcbb3907707c50c0001588934534"},"cost_nirs":89,"cost_pfc":190}
利用sign参数进行url拼接,拼接处类似于 https://graph.baidu.com/resource/221c5c71270917082d20a01589109454.jpg
这样的url
3 编写图床代码
![aa094cac2864d4a6705badb20d1e2337.png](https://i-blog.csdnimg.cn/blog_migrate/97cbda06cef5fd75b1d86e95994d98f6.jpeg)
图床代码
const fd = new FormData();
fd.append('image', new File([fileData], filename));
$.ajax({
type: 'POST',
url: 'https://graph.baidu.com/upload',
data: fd,
processData: false,
contentType: false
}).done(function(data){
try{
data = JSON.parse(data);
} catch(e){}
if (data.status != 0) {//判断上传的状态
callback('上传失败' + data.msg);
} else {
callback(null, filename, "https://graph.baidu.com/resource/"+data.data.sign+".jpg", data);//利用callback函数给小书匠图片的url地址
}
}).fail(function(res, status, message){
callback('上传资源失败:' + message);//小书匠错误提示
});
0x04 效果
目前效果非常棒,可以很轻松的将文章发送到各个平台不局限于本地(可以直接把markdown格式笔记复制到一文多发平台发送到CSDN和简书、知乎之类的平台)。storywriter可以绑定私人笔记,将笔记存在服务端。比如我是将小书匠笔记和为知笔记绑定在一起,可以利用二者实现文件高效阅读。
更多分享在
![efab37759656cd3d8d13e62a8c83760e.png](https://i-blog.csdnimg.cn/blog_migrate/7aae4ab96c50bf4f586fb3e225c09f2c.jpeg)
本篇文章由一文多发平台ArtiPub自动发布