V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
oimotis
V2EX  ›  分享发现

分享一个把 HTML 转换成印象笔记格式的库,支持代码高亮和把 ECharts、mermaid 转成印象笔记支持的图片,另外: MWeb 半价促销一周。

  •  
  •   oimotis · 2016-09-05 11:11:35 +08:00 · 2387 次点击
    这是一个创建于 3020 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先说说 html2enml 这个库, github 网址:https://github.com/cyhhao/html2enml

    这个库是由 cyhhao 特意为 MWeb 做的,但是我觉得对于有分享到印象笔记功能需求的朋友非常有用,所以分享出来。

    这个库的原理和用法在作者的 github 中有详细说明了,我这里主要说说在套进 MWeb 过程中遇到的小问题的解决方案。

    第一个问题是 SVG 问题, Mermaid 是用 SVG 而不是 Canvas 画图的,不能直接像 Canvas 这样转。解决这个问题花了不少时间,但是其实很简单。只需要在增加 inline 样式后,再用以下代码就可以搞定了:

    $('svg').each(function(){
        var ele = $(this);
        var w = ele.width();
        var serializer = new XMLSerializer();
        var source = serializer.serializeToString(this);
        $('<img src="data:image/svg+xml;charset=utf8,'+encodeURIComponent(source) +'" />').whith(w).insertAfter(ele);
        ele.parent().removeAttr('data-processed');
        ele.remove();
    });
    

    另外就是,印象笔记的 enml 格式实际上是一个 xml ,但是一般的 html 都不会严格按照 xml 格式,这就要转化为 xml 格式,测试下来,我发现以下代码的方法非常合适而且好用,代码如下:

    var html = $('body').html();
    var bodyStyle = $('body').attr('style'); if(!bodyStyle) bodyStyle = '';
    var htmlString = "<div style=\"" + bodyStyle + "\">" + html + "</div>";
    var doc = new DOMParser().parseFromString(htmlString, 'text/html');
    var result = new XMLSerializer().serializeToString(doc);
    

    最后做一下广告: MWeb 半价促销一周 (9/5~9/11),¥ 98 --> ¥ 50 !这次应该是今年最后一次促销了,需要的朋友不要错过了!

    MWeb 官网:http://zh.mweb.im/ MAS :https://itunes.apple.com/cn/app/mweb-pro-markdown-writing/id954188948?l=zh&ls=1&mt=12

    1 条回复    2016-09-13 16:12:57 +08:00
    lenzhang
        1
    lenzhang  
       2016-09-13 16:12:57 +08:00
    不小心错过促销
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2761 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:27 · PVG 21:27 · LAX 05:27 · JFK 08:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.