CodeMirror Markdown插入图像URL

时间:2014-07-14 19:34:19

标签: javascript regex image markdown codemirror

我正在尝试将图像URL插入到CodeMirror中的正确位置(降价模式)。当我输入![]()时,会出现一个块,允许我上传图片并检索网址。我会将此网址放入( )的{​​{1}},因为我知道无论文本![]()中的![]()数量是多少,它都应该有效(每次![]()都有自己的块定义)。

您可以在Ghost CMS中看到一个示例。

我尝试了两件事:

  • 检索每个![]()听取keyup事件的位置并制作replaceRange - >不起作用,因为用户可以删除一些文本并更改发生的位置
  • 直接修改DOM(不要更改编辑器实例中的文本值)

没有什么是确凿的,我花了几个小时在文档中搜索是否有方法来获取正则表达式的每个出现的范围(即getRanges(正则表达式) - >数组),以便计算出现次数和更改次数使用replaceRange的好(用图像块索引找到)。

如果有人知道该怎么做...谢谢!

修改

我在图像块索引处使用正则表达式替换解决了我的问题:

var nth = 0;
txt = txt.replace(/\!\[(.*)\]\((.*)\)/g, function(match, alt, original) {
    nth++;
    // i = image block index
    return (nth === i+1) ? '![' + alt + '](' + href + ')' : match;
});

editor.setValue(txt);

0 个答案:

没有答案