CodeMirror api

2024-04-17 0 1
手机查看

在 CodeMirror 编辑器中,要实现光标所在行高亮,可以通过监听 cursorActivity 事件并在事件触发时设置高亮样式。以下是一个简单的示例:

var editor = CodeMirror.fromTextArea(document.getElementById('your-textarea-id'), {
  // ... 其他配置项
});

editor.on('cursorActivity', function(cm) {
  var cursor = cm.getCursor();
  cm.operation(function() { // 使用operation包裹避免多次刷新
    cm.removeLineClass(hlLine, 'background', 'CodeMirror-line-highlight'); // 移除先前高亮的行样式(如果有)
    hlLine = cm.getLineHandle(cursor.line); // 获取当前光标所在行的句柄
    cm.addLineClass(hlLine, 'background', 'CodeMirror-line-highlight'); // 给当前行添加高亮样式
  });
});

var hlLine = null; // 用于记录当前高亮行的句柄

// 定义高亮样式(通常在CSS文件中定义,这里仅作为演示)
CodeMirror.defineStyle('CodeMirror-line-highlight', {
  backgroundColor: '#FFFF00',
  backgroundAttachment: 'fixed'
});

这段代码会在每次光标活动(移动、插入、删除等)时,清除之前高亮的行,并将当前光标所在行设置为高亮状态。高亮样式通过 addLineClass 方法添加,并且要在 CSS 中预先定义好 .CodeMirror-line-highlight 的样式。如果已有对应的样式名,可以直接使用那个名称代替 'CodeMirror-line-highlight'

What do you think?
  • 点赞
    0
    点赞
  • 踩一下
    0
    踩一下
  • 酷毙了
    0
    酷毙了
  • 不屑
    0
    不屑
  • 尴尬
    0
    尴尬
  • 无聊
    0
    无聊
Comments
  • Latest
  • Oldest
  • Hottest
Powered by Waline v3.5.6