Code Mirror Get Current Line Number every time content changes
I am trying to use Code Mirror to create a text editor. I want to show the current line number to the user at the bottom of the display, as text editors do.
So far I have tried this:
function updateInfo()
var lines = editor.lineCount();
document.getElementById('line-no.').innerText = lines;
editor.refresh();
editor.on("change", updateInfo());
The line-no.
is a span
where I want to display the Line Number. This works for the first Line Number but then when I go to some other line, it doesn't do anything. The console shows this error:
codemirror.js:2154 Uncaught TypeError: Cannot read property 'apply' of undefined
at codemirror.js:2154
at fireCallbacksForOps (codemirror.js:2111)
at finishOperation (codemirror.js:2125)
at endOperation (codemirror.js:3747)
at HTMLTextAreaElement.<anonymous> (codemirror.js:3884)
javascript html css codemirror
add a comment |
I am trying to use Code Mirror to create a text editor. I want to show the current line number to the user at the bottom of the display, as text editors do.
So far I have tried this:
function updateInfo()
var lines = editor.lineCount();
document.getElementById('line-no.').innerText = lines;
editor.refresh();
editor.on("change", updateInfo());
The line-no.
is a span
where I want to display the Line Number. This works for the first Line Number but then when I go to some other line, it doesn't do anything. The console shows this error:
codemirror.js:2154 Uncaught TypeError: Cannot read property 'apply' of undefined
at codemirror.js:2154
at fireCallbacksForOps (codemirror.js:2111)
at finishOperation (codemirror.js:2125)
at endOperation (codemirror.js:3747)
at HTMLTextAreaElement.<anonymous> (codemirror.js:3884)
javascript html css codemirror
add a comment |
I am trying to use Code Mirror to create a text editor. I want to show the current line number to the user at the bottom of the display, as text editors do.
So far I have tried this:
function updateInfo()
var lines = editor.lineCount();
document.getElementById('line-no.').innerText = lines;
editor.refresh();
editor.on("change", updateInfo());
The line-no.
is a span
where I want to display the Line Number. This works for the first Line Number but then when I go to some other line, it doesn't do anything. The console shows this error:
codemirror.js:2154 Uncaught TypeError: Cannot read property 'apply' of undefined
at codemirror.js:2154
at fireCallbacksForOps (codemirror.js:2111)
at finishOperation (codemirror.js:2125)
at endOperation (codemirror.js:3747)
at HTMLTextAreaElement.<anonymous> (codemirror.js:3884)
javascript html css codemirror
I am trying to use Code Mirror to create a text editor. I want to show the current line number to the user at the bottom of the display, as text editors do.
So far I have tried this:
function updateInfo()
var lines = editor.lineCount();
document.getElementById('line-no.').innerText = lines;
editor.refresh();
editor.on("change", updateInfo());
The line-no.
is a span
where I want to display the Line Number. This works for the first Line Number but then when I go to some other line, it doesn't do anything. The console shows this error:
codemirror.js:2154 Uncaught TypeError: Cannot read property 'apply' of undefined
at codemirror.js:2154
at fireCallbacksForOps (codemirror.js:2111)
at finishOperation (codemirror.js:2125)
at endOperation (codemirror.js:3747)
at HTMLTextAreaElement.<anonymous> (codemirror.js:3884)
javascript html css codemirror
javascript html css codemirror
asked Nov 16 '18 at 5:08
SidSid
4018
4018
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Update
To follow updates in the editor, register a handler on the
cursorActivity
event. This event is fired when there is a change in the cursor or selection.
The handler is called with the instance of CodeMirror; on this you can call thegetCursor
method to be the an object that contains the current line number that the cursor is active on.
Note that the line number is zero-based, so you may or may not increment it by 1.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
const onCursorActivity = (instance) =>
const cursor = cm.getCursor();
STATUS_CURRENT_LINE.textContent = cursor.line + 1;
editor.on("cursorActivity", onCursorActivity);
Setting the current line number when there is a doc change in the editor
The error happens because the updateInfo
callback is called even before you register it. So that the value registered as the callback is undefined
.
editor.on('change', updateInfo()) // -> editor.on('change', undefined)
This can be resolved by registering the function.
editor.on('change', updateInfo)
However, the signature for the callback should follow what is documented.
The change
callback is passed the instance
of CodeMirror and a changeObject
from which you can retrieve the current line.
"change" (instance: CodeMirror, changeObj: object)
Fires every time the content of the editor is changed. ThechangeObj
is afrom, too, text, removed, origin
object containing information about the changes that occurred as the second argument.from
andto
are the positions (in the pre-change coordinate system) where the change started and ended (for example, it might bech:0, line:18
if the position is at the beginning of line #19).text
is an array of strings representing the text that replaced the changed range (split by line).removed
is the text that used to be betweenfrom
andto
, which is overwritten by this change. This event is fired before the end of an operation before the DOM updates happen.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
function updateInfo(instance, changeObj)
STATUS_CURRENT_LINE.innerText = changeObj.to.line;
editor.on("change", updateInfo);
Thank You Very Much! The explanation was awesome and it works as intended!
– Sid
Nov 16 '18 at 9:59
You can listen oncursorActivity
event. I'll update my answer in a bit to show an example
– Oluwafemi Sule
Nov 16 '18 at 19:23
No need, figured it out myself. Thanks Anyways!
– Sid
Nov 16 '18 at 19:30
1
Glad that you figured that out!
– Oluwafemi Sule
Nov 16 '18 at 19:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53331776%2fcode-mirror-get-current-line-number-every-time-content-changes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Update
To follow updates in the editor, register a handler on the
cursorActivity
event. This event is fired when there is a change in the cursor or selection.
The handler is called with the instance of CodeMirror; on this you can call thegetCursor
method to be the an object that contains the current line number that the cursor is active on.
Note that the line number is zero-based, so you may or may not increment it by 1.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
const onCursorActivity = (instance) =>
const cursor = cm.getCursor();
STATUS_CURRENT_LINE.textContent = cursor.line + 1;
editor.on("cursorActivity", onCursorActivity);
Setting the current line number when there is a doc change in the editor
The error happens because the updateInfo
callback is called even before you register it. So that the value registered as the callback is undefined
.
editor.on('change', updateInfo()) // -> editor.on('change', undefined)
This can be resolved by registering the function.
editor.on('change', updateInfo)
However, the signature for the callback should follow what is documented.
The change
callback is passed the instance
of CodeMirror and a changeObject
from which you can retrieve the current line.
"change" (instance: CodeMirror, changeObj: object)
Fires every time the content of the editor is changed. ThechangeObj
is afrom, too, text, removed, origin
object containing information about the changes that occurred as the second argument.from
andto
are the positions (in the pre-change coordinate system) where the change started and ended (for example, it might bech:0, line:18
if the position is at the beginning of line #19).text
is an array of strings representing the text that replaced the changed range (split by line).removed
is the text that used to be betweenfrom
andto
, which is overwritten by this change. This event is fired before the end of an operation before the DOM updates happen.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
function updateInfo(instance, changeObj)
STATUS_CURRENT_LINE.innerText = changeObj.to.line;
editor.on("change", updateInfo);
Thank You Very Much! The explanation was awesome and it works as intended!
– Sid
Nov 16 '18 at 9:59
You can listen oncursorActivity
event. I'll update my answer in a bit to show an example
– Oluwafemi Sule
Nov 16 '18 at 19:23
No need, figured it out myself. Thanks Anyways!
– Sid
Nov 16 '18 at 19:30
1
Glad that you figured that out!
– Oluwafemi Sule
Nov 16 '18 at 19:34
add a comment |
Update
To follow updates in the editor, register a handler on the
cursorActivity
event. This event is fired when there is a change in the cursor or selection.
The handler is called with the instance of CodeMirror; on this you can call thegetCursor
method to be the an object that contains the current line number that the cursor is active on.
Note that the line number is zero-based, so you may or may not increment it by 1.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
const onCursorActivity = (instance) =>
const cursor = cm.getCursor();
STATUS_CURRENT_LINE.textContent = cursor.line + 1;
editor.on("cursorActivity", onCursorActivity);
Setting the current line number when there is a doc change in the editor
The error happens because the updateInfo
callback is called even before you register it. So that the value registered as the callback is undefined
.
editor.on('change', updateInfo()) // -> editor.on('change', undefined)
This can be resolved by registering the function.
editor.on('change', updateInfo)
However, the signature for the callback should follow what is documented.
The change
callback is passed the instance
of CodeMirror and a changeObject
from which you can retrieve the current line.
"change" (instance: CodeMirror, changeObj: object)
Fires every time the content of the editor is changed. ThechangeObj
is afrom, too, text, removed, origin
object containing information about the changes that occurred as the second argument.from
andto
are the positions (in the pre-change coordinate system) where the change started and ended (for example, it might bech:0, line:18
if the position is at the beginning of line #19).text
is an array of strings representing the text that replaced the changed range (split by line).removed
is the text that used to be betweenfrom
andto
, which is overwritten by this change. This event is fired before the end of an operation before the DOM updates happen.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
function updateInfo(instance, changeObj)
STATUS_CURRENT_LINE.innerText = changeObj.to.line;
editor.on("change", updateInfo);
Thank You Very Much! The explanation was awesome and it works as intended!
– Sid
Nov 16 '18 at 9:59
You can listen oncursorActivity
event. I'll update my answer in a bit to show an example
– Oluwafemi Sule
Nov 16 '18 at 19:23
No need, figured it out myself. Thanks Anyways!
– Sid
Nov 16 '18 at 19:30
1
Glad that you figured that out!
– Oluwafemi Sule
Nov 16 '18 at 19:34
add a comment |
Update
To follow updates in the editor, register a handler on the
cursorActivity
event. This event is fired when there is a change in the cursor or selection.
The handler is called with the instance of CodeMirror; on this you can call thegetCursor
method to be the an object that contains the current line number that the cursor is active on.
Note that the line number is zero-based, so you may or may not increment it by 1.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
const onCursorActivity = (instance) =>
const cursor = cm.getCursor();
STATUS_CURRENT_LINE.textContent = cursor.line + 1;
editor.on("cursorActivity", onCursorActivity);
Setting the current line number when there is a doc change in the editor
The error happens because the updateInfo
callback is called even before you register it. So that the value registered as the callback is undefined
.
editor.on('change', updateInfo()) // -> editor.on('change', undefined)
This can be resolved by registering the function.
editor.on('change', updateInfo)
However, the signature for the callback should follow what is documented.
The change
callback is passed the instance
of CodeMirror and a changeObject
from which you can retrieve the current line.
"change" (instance: CodeMirror, changeObj: object)
Fires every time the content of the editor is changed. ThechangeObj
is afrom, too, text, removed, origin
object containing information about the changes that occurred as the second argument.from
andto
are the positions (in the pre-change coordinate system) where the change started and ended (for example, it might bech:0, line:18
if the position is at the beginning of line #19).text
is an array of strings representing the text that replaced the changed range (split by line).removed
is the text that used to be betweenfrom
andto
, which is overwritten by this change. This event is fired before the end of an operation before the DOM updates happen.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
function updateInfo(instance, changeObj)
STATUS_CURRENT_LINE.innerText = changeObj.to.line;
editor.on("change", updateInfo);
Update
To follow updates in the editor, register a handler on the
cursorActivity
event. This event is fired when there is a change in the cursor or selection.
The handler is called with the instance of CodeMirror; on this you can call thegetCursor
method to be the an object that contains the current line number that the cursor is active on.
Note that the line number is zero-based, so you may or may not increment it by 1.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
const onCursorActivity = (instance) =>
const cursor = cm.getCursor();
STATUS_CURRENT_LINE.textContent = cursor.line + 1;
editor.on("cursorActivity", onCursorActivity);
Setting the current line number when there is a doc change in the editor
The error happens because the updateInfo
callback is called even before you register it. So that the value registered as the callback is undefined
.
editor.on('change', updateInfo()) // -> editor.on('change', undefined)
This can be resolved by registering the function.
editor.on('change', updateInfo)
However, the signature for the callback should follow what is documented.
The change
callback is passed the instance
of CodeMirror and a changeObject
from which you can retrieve the current line.
"change" (instance: CodeMirror, changeObj: object)
Fires every time the content of the editor is changed. ThechangeObj
is afrom, too, text, removed, origin
object containing information about the changes that occurred as the second argument.from
andto
are the positions (in the pre-change coordinate system) where the change started and ended (for example, it might bech:0, line:18
if the position is at the beginning of line #19).text
is an array of strings representing the text that replaced the changed range (split by line).removed
is the text that used to be betweenfrom
andto
, which is overwritten by this change. This event is fired before the end of an operation before the DOM updates happen.
const STATUS_CURRENT_LINE = document.getElementById('line-no.');
function updateInfo(instance, changeObj)
STATUS_CURRENT_LINE.innerText = changeObj.to.line;
editor.on("change", updateInfo);
edited Nov 16 '18 at 19:33
answered Nov 16 '18 at 7:02
Oluwafemi SuleOluwafemi Sule
12.6k1735
12.6k1735
Thank You Very Much! The explanation was awesome and it works as intended!
– Sid
Nov 16 '18 at 9:59
You can listen oncursorActivity
event. I'll update my answer in a bit to show an example
– Oluwafemi Sule
Nov 16 '18 at 19:23
No need, figured it out myself. Thanks Anyways!
– Sid
Nov 16 '18 at 19:30
1
Glad that you figured that out!
– Oluwafemi Sule
Nov 16 '18 at 19:34
add a comment |
Thank You Very Much! The explanation was awesome and it works as intended!
– Sid
Nov 16 '18 at 9:59
You can listen oncursorActivity
event. I'll update my answer in a bit to show an example
– Oluwafemi Sule
Nov 16 '18 at 19:23
No need, figured it out myself. Thanks Anyways!
– Sid
Nov 16 '18 at 19:30
1
Glad that you figured that out!
– Oluwafemi Sule
Nov 16 '18 at 19:34
Thank You Very Much! The explanation was awesome and it works as intended!
– Sid
Nov 16 '18 at 9:59
Thank You Very Much! The explanation was awesome and it works as intended!
– Sid
Nov 16 '18 at 9:59
You can listen on
cursorActivity
event. I'll update my answer in a bit to show an example– Oluwafemi Sule
Nov 16 '18 at 19:23
You can listen on
cursorActivity
event. I'll update my answer in a bit to show an example– Oluwafemi Sule
Nov 16 '18 at 19:23
No need, figured it out myself. Thanks Anyways!
– Sid
Nov 16 '18 at 19:30
No need, figured it out myself. Thanks Anyways!
– Sid
Nov 16 '18 at 19:30
1
1
Glad that you figured that out!
– Oluwafemi Sule
Nov 16 '18 at 19:34
Glad that you figured that out!
– Oluwafemi Sule
Nov 16 '18 at 19:34
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53331776%2fcode-mirror-get-current-line-number-every-time-content-changes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown