I have an Ace Editor embedded on my website in which I allow the users to type in it. Currently, the built in function automatically shows the line number for every line inserted like this:

Is there a way for me to set the content in the gutter manually and read the value in it later?
Eg: instead of setting it to 1,2,3... I would want it to look like

A abc
B def

And then later when I access the line containg "abc", I would want to read the value in the gutter of that line which is "A".

Update:

To customize the gutter for Ace Editor, you'll have to override the "update" function:

ace.require("ace/layer/my_gutter")
//...

define('ace/layer/my_gutter', ['require', 'exports', 'ace/lib/dom'], function(require, exports, module) {

    var dom = require("ace/lib/dom"); 
    require("ace/layer/gutter").Gutter.prototype.update = update = 
        function(config) { 
            //...
        }; 
});

The function is pretty long and plicated for this small change that I need. So, I didn't go with it.

I found another editor, CodeMirror which provides an easier way to do this and have switched over to CodeMirror.

I have an Ace Editor embedded on my website in which I allow the users to type in it. Currently, the built in function automatically shows the line number for every line inserted like this:

Is there a way for me to set the content in the gutter manually and read the value in it later?
Eg: instead of setting it to 1,2,3... I would want it to look like

A abc
B def

And then later when I access the line containg "abc", I would want to read the value in the gutter of that line which is "A".

Update:

To customize the gutter for Ace Editor, you'll have to override the "update" function:

ace.require("ace/layer/my_gutter")
//...

define('ace/layer/my_gutter', ['require', 'exports', 'ace/lib/dom'], function(require, exports, module) {

    var dom = require("ace/lib/dom"); 
    require("ace/layer/gutter").Gutter.prototype.update = update = 
        function(config) { 
            //...
        }; 
});

The function is pretty long and plicated for this small change that I need. So, I didn't go with it.

I found another editor, CodeMirror which provides an easier way to do this and have switched over to CodeMirror.

• javascript
• codemirror
• ace-editor
• code-editor

1 Answer 1

You can set a custom renderer for the gutter with

editor.session.gutterRenderer =  {
    getWidth: function(session, lastLineNumber, config) {
        return lastLineNumber.toString().length * config.characterWidth;
    },
    getText: function(session, row) {
        return String.fromCharCode(row + 65);
    }
};