使用 codemirror 编辑 img 的 src答案

【问题标题】：Edit src of img with codemirror使用 codemirror 编辑 img 的 src
【发布时间】：2014-12-19 07:17:58
【问题描述】：

我正在尝试更新<img> 标签的 src 属性，以便用户可以将图像从我们的资产管理器插入到代码中。

考虑一下这个 HTML：

<div>
   <img src="some_image_already_defined.jpg" alt="Some Image" />
</div>

因此，如果用户将光标放在 img 标签内的任何位置，我会将“some_image_already_defined.jpg”替换为用户选择的新图像。

代码的简化版本是smt。像这样：

var image_path = 'some_new_image.jpg';
$('#insert-image').click(function() {
    var cur = codeMirrorHtml.getCursor();
    var token = codeMirrorHtml.getTokenAt(cur);
    var inner = CodeMirror.innerMode(codeMirrorHtml.getMode(), token.state);

    if (inner.state.tagName == 'img') {
        var srcPosition = findTheSrcAttributePosition(); // How do I do this?
        codeMirrorHtml.setSelection(srcPosition.anchor, srcPosition.head);
        codeMirrorHtml.replaceSelection('src="' + image_path + '"');
    }
});

所以我想以某种方式遍历令牌，但找不到方法。

【问题讨论】：

标签： javascript codemirror

【解决方案1】：

步骤 1

用getCursor获取当前行号：

var line = editor.getCursor().line;

第二步

使用getLine获取当前行的内容：

var lineTxt = editor.getLine(line);

第三步

找到<img 标签。这只是一个字符串搜索，由您决定：

var imgTagStartIdx = lineTxt.indexOf("<img");

【讨论】：