CodeMirror api
在 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'
。