無羈

近期在自己的一个小项目中集成了 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>

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