markdown图片大小处理

2016-8-12 邪哥

近期在自己的一个小项目中集成了 editor.md 


折腾的差不多了,发现编辑好的 markdown 页面中,图片的尺寸怪怪的。

搜索了一圈,没有找到直接的解决方案,有人推荐什么什么js 采用 =宽*高 的方法可以控制图片大小

但是,项目都快完工了,总不能再换一套md编辑器吧


当然,也有人说,干嘛不直接在markdown中使用 html代码呢,这样更直接吧

话虽不错,不过似乎有点违背咱们使用markdown编辑器的初衷 :)


于是仔细核查了一下 editor.md 所使用的markdown 解释器  

    https://github.com/chjj/marked/blob/master/lib/marked.js


找到对应的 image 解析方法,做了一些小调整,方法源码如下:



//图片解析方法
Renderer.prototype.image = function(href, title, text) {
  var out = '<img src="' + href + '" alt="' + text + '"';
  if (title) {
    var pieces = title.split('&quot; ');
    title = pieces.shift();
    if (pieces.length == 0) {
      out += ' title="' + title + '"';
    } else {
       out += ' title="' + title + '"';
       for (var i in pieces) {
         var ele = pieces[i].split('=&quot;');
         var attr = ele.shift();
         var val = ele.join('=&quot;');
         out += ' '+attr+'="'+val+'"';
       }
    }
  }
  out += this.options.xhtml ? '/>' : '>';
  return out;
};



当然,这个方法不是特别完美,但已经足以满足我们需要控制图片样式的初衷了 :)

它需要相对固定的格式,如果你需要自定义属性,你必须写在 alt 内容后面。

 如:


[![alt](http://news.baidu.com/resource/img/logo_news_276_88.png "alt" a="b" style="width:100px;height:auto;border:1px solid #000;")](http://news.baidu.com "alt")


解析之后的html 为:


<a href="http://news.baidu.com" title="alt"><img src="http://news.baidu.com/resource/img/logo_news_276_88.png" alt="alt" title="alt" a="b" style="width:100px;height:auto;border:1px solid #000;"></a>


如果你有更简单或更好的解决方法,欢迎留言探讨 :)


前端 markdown

(0) (682)

发表评论: