[英]How to show line count in codemirror
我在我的應用程序中使用了Codemirror API,我試圖顯示總行數以及鍵入新行時的類型,但這給了我另一件事
我使用此腳本獲取數字的最后一個子項,但是當我有29行時,它顯示此1234567891011121314151617181920212223242526272829829 ,這不是我要執行的操作,我希望它僅顯示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>
代碼鏡像
<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);
});
});
我希望這就是你想要的! :-)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.