Question

从表面上看，这个问题与How to add custom image tag to pagedown?类似。但是，在实践中，我认为解决方案的形式会有所不同。

使用PageDown，您可以通过两种不同方式向文本块添加<img>标记：

![MY IMAGE](http://myurl.com/myimage.png)
<img src='myimage.png'>

查看代码时，第一种方法在_DoImages中的Markdown.Converter.js处理，创建一个<img>标记，其中包含相应的信息。第二种方法在sanitizeHtml中处理sanitizeTag（在img_white中调用Markdown.Sanitizer.js并使用<img>）。

我要添加的是，成功通过Markdown的每个<img src='myimg.png' width='100' height'100'>标记都添加了一个CSS类（例如，“user-img”）。

因此，例如，<img src='myimg.png' width='100' height='100' class='user-img'>将成为init function

检查Pagedown的结构，我认为在我自己的代码中将这个功能添加为“postConversion”阶段的“插件钩子”是最有意义的（即，我不需要改变Pagedown中的任何内容）。在伪代码中，我认为代码更改为我的代码看起来像这样：

this.converter = Markdown.getSanitizingConverter(); this.converter.hooks.chain("postConversion", userifyImages);：

userifyImages(html_text)

// note: `html_text` is just a plain string for every <img> tag that still exists (i.e., is valid) in html_text: add "class='user-img'" to the tag：

{{1}}

我猜测基于该规则构建一个相对简单的正则表达式，但我担心我没有推断出一个。

所以我有两个问题：

（1）考虑到Pagedown的结构如何，你认为这种方法有意义吗？

（2）你知道我如何创建一个正在进行我需要的操作的正则表达式吗？（或者，当然，不使用正则表达式来解决问题。）

感谢您的时间。

Answer 1

好的，基于Pagedown现有代码的方法，这似乎工作正常。

function identifyImages(html) {

    function sanitizeImageTag(tag) {
        // chops off the last char in the string ('>') and replaces it
        // with the class name we want to add
        if ( tag.match(/^<img.*>$/i) ) {
            return tag.slice(0,tag.length-1) + " class=\"user-img\">";
        }
        else {
            return tag;
        }
    }

    return html.replace(/<[^>]*>?/gi, sanitizeImageTag);
}

this.converter = Markdown.getSanitizingConverter();
this.converterhooks.chain("postConversion",identifyImages);

但是，我对正则表达式不太满意：/<[^>]*>?/gi。我不确定?到底在做什么。不过，这似乎有效。

Answer 2

假设html_text是一个HTML DOM，这应该可行：

var ilist = html_text.images;

for(var i = 0; i < ilist.length; i++) {
    ilist[i].className += "user-img") 
}

Answer 3

我想为单个图像添加一个类。我就这样做了：

  var converter = new Markdown.Converter();

  converter.hooks.chain('postSpanGamut', function (text) {
    var matches = text.match(/\{(\S*)\}/);
    if (matches) {
      text = text.replace(matches[0], '');
      text = text.replace(/\/>/, 'class="' + matches[1] + '" />');
    }
    return text;
  });

这允许此语法起作用：

![{my-class}cute kitties!](http://placekitten.com/g/200/200)

吐出

<img src="http://placekitten.com/g/200/200" alt="cute kittes!" class="my-class">

你可能会使{}的正则表达式更准确。

PageDown：使用javascript为每个<img/>标记添加一个CSS类

3 个答案: