2

从表面上看，这个问题类似于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 的标签都添加了一个 CSS 类（例如，“user-img”）。

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

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

init function：

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) 考虑到 Pagedown 的结构，您认为这种方法有意义吗？

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

感谢您的时间。

4

3 回答 3

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. 我不确定那里到底在?做什么。尽管如此，这似乎有效。

于 2014-01-17T19:40:11.473 回答
0

假设这html_text是一个 HTML DOM，这应该可以工作：

var ilist = html_text.images;

for(var i = 0; i < ilist.length; i++) {
    ilist[i].className += "user-img") 
}
于 2014-01-17T16:57:47.450 回答
0

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

  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">

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

于 2015-01-03T04:02:12.763 回答