如何在代码镜像中显示行数
How to show line count in codemirror
我在我的应用程序中使用codemirror API,我试图显示总行数,当键入时计算新行,但它给了我另一个东西
我使用这个脚本来获取数字的最后一个子项,但当我有29行时,它会显示这个123467891011121314151617181920212223242526272829,这不是我想要做的,我希望它只显示29并且onkeydown根本不起作用
<script>
$(document).ready(function(){
var tolalline = $('.CodeMirror-linenumber:last-child').text();
$('#hcunter').text(tolalline);
$('#inputTextToSave').keydown(function(){
var tolalline = $('.CodeMirror-linenumber:last-child').text();
$('#hcunter').text(tolalline);
}
);
$("#alterTool").click(function(){
$("#EditTool").toggle(1000);
});
});
</script>
CodeMirror
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("inputTextToSave"),
{
lineNumbers: true,
viewportMargin: Infinity,
//Theme
styleActiveLine: true,
matchBrackets: true,
gutter: true
});
</script>
要获得行数,必须使用css选择器:
.CodeMirror-code > div:last-child div.CodeMirror-gutter-elt
因此,如果您想计算行数,您将覆盖CodeMirror配置的extraKeys属性中的Enter键。应该是:
extraKeys:
{
Enter: function(){
setTimeout(function() {
var tolalline = $('.CodeMirror-code > div:last-child div.CodeMirror-gutter-elt').text();
$('#hcunter').text(tolalline);
}, 0);
return CodeMirror.Pass;
}
}
我设置了一个setTimeout来创建必要的最小延迟。您现在不需要设置onKeyDown事件。
所有代码:
var editor = CodeMirror.fromTextArea(document.getElementById("inputTextToSave"),
{
lineNumbers: true,
viewportMargin: Infinity,
//Theme
styleActiveLine: true,
matchBrackets: true,
gutter: true,
extraKeys:
{
Enter: function(){
setTimeout(function() {
var tolalline = $('.CodeMirror-code > div:last-child div.CodeMirror-gutter-elt').text();
$('#hcunter').text(tolalline);
}, 0);
return CodeMirror.Pass;
}
}
}
);
$(document).ready(function(){
var tolalline = $('.CodeMirror-code > div:last-child div.CodeMirror-gutter-elt').text();
$('#hcunter').text(tolalline);
$("#alterTool").click(function(){
$("#EditTool").toggle(1000);
});
});
我希望这是你想要的!:-)
相关文章:
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- Markdown模式代码镜像正在创建
- 更改代码镜像中TextArea的高度和宽度
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- 什么CSS/JS技巧驱动镜像反转http://com.google愚人节页面
- jquery使2组单选按钮相互镜像
- Nodejs使用httpdispatcher提供静态镜像
- HTML5相机缓冲和延迟(延迟镜像)
- jQuery插件在本地主机上运行良好,但在web服务器上却与bg镜像混淆
- 镜像滚动效果打开.在两个容器之间单击
- 代码镜像批量更改
- 如何在代码镜像编辑器中设置隐藏值
- Selenium-使用换行符将文件写入代码镜像
- 如何根据子字符串位置在代码镜像中突出显示子字符串
- 如何在使用代码镜像单击按钮时撤消选定/突出显示的文本
- 从文本区域获取选定/高亮显示的文本,代码镜像不起作用
- 代码镜像显示HTMLLint错误内联(. addlinewidget)
- 在使用代码镜像时显示警报中的文本区域内容
- 如何在同一页面上使用代码镜像突出显示多种语言源代码
- 如何在代码镜像中显示行数