使用代码镜像编辑 img 的 src

Edit src of img with codemirror

本文关键字：img src 编辑 镜像 代码      更新时间：2023-09-26

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

考虑以下 HTML：

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

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

代码的简化版本是这样的：

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

获取当前行号，getCursor：

var line = editor.getCursor().line;

步骤 2

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

var lineTxt = editor.getLine(line);

步骤 3

找到<img标记。这只是一个字符串搜索，这取决于你：

var imgTagStartIdx = lineTxt.indexOf("<img");
相关文章：