修改Ajax.org Cloud9 Editor（Ace Editor）的装订线

Question

我的网站上嵌入了一个 Ace 编辑器，我允许用户在其中输入内容。目前，内置函数会自动显示插入的每一行的行号，如下所示：

有没有办法让我手动设置装订线中的内容并稍后读取其中的值？
例如：与其将其设置为 1,2,3...，我希望它看起来像

A abc
B def

然后当我访问包含“abc”的行时，我想读取该行的装订线中的值“A”。

更新：

要为 Ace Editor 自定义装订线，您必须覆盖“更新”功能：

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) { 
            //...
        }; 
});

对于我需要的这个小改动，该函数相当长且复杂。所以，我没有同意。

我找到了另一个编辑器，CodeMirror，它提供了一种更简单的方法，并已切换到 CodeMirror。

Answer 1

您可以使用

为装订线设置自定义渲染器

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

修改Ajax.org Cloud9 Editor（Ace Editor）的装订线

Modify the gutter of Ajax.org Cloud9 Editor (Ace Editor)

javascript

code-editor

codemirror

ace-editor

更新：