使用codemirror编辑img的src

时间:2014-12-01 17:29:47

标签: javascript codemirror

我正在尝试更新<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 + '"');
    }
});

所以我想以某种方式遍历令牌,但我找不到办法去做。

1 个答案:

答案 0 :(得分:0)

第1步

使用getCursor获取当前行号:

var line = editor.getCursor().line;

第2步

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

var lineTxt = editor.getLine(line);

第3步

找到<img标记。这只是一个字符串搜索,它取决于您:

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