vue - codemirror 点击对应标签查找结束标签位置

最新推荐文章于 2024-08-09 10:11:03 发布

原创最新推荐文章于 2024-08-09 10:11:03 发布 · 890 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

JAVASCRIPT 同时被 2 个专栏收录

83 篇文章

订阅专栏

VUE.JS

62 篇文章

订阅专栏

本文介绍如何使用CodeMirror库监听文档中光标或选择的变化，并实现获取当前光标所在位置的标签信息。通过`cursorActivity`事件可以实时追踪代码编辑状态，适用于IDE或在线编辑器等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template ：

<codemirror :value="code" @cursorActivity="cursorActivity"></codemirror>

"cursorActivity" (doc: CodeMirror.Doc) 每当此文档中的光标或选择更改时触发。

import：（必须引入）

import CodeMirror from 'codemirror/lib/codemirror'

methods：

    cursorActivity (cm) {
      let cur = cm.getCursor()
      this.getPositionTag(cm, cur)
    },
    getPositionTag (cm, cur) {
      let range = cm.getViewport()
      range.from = Math.min(range.from, cur.line)
      range.to = Math.max(cur.line + 1, range.to)
      this.CodeMirror = CodeMirror
      // 获取开始-结束标签位置
      let match = CodeMirror.findMatchingTag(cm, cur, range)
      if (match) {
        let {open, close} = match
        // 获取开始 结束标签的文本
        console.log(cm.getRange(open.from, close ? close.to : open.to))
      }
    }

Console：