第二个编辑器的摩纳哥代码编辑器自定义行号答案

【问题标题】：Monaco code editor custom line number for the second editor第二个编辑器的摩纳哥代码编辑器自定义行号
【发布时间】：2019-08-18 12:19:59
【问题描述】：

我在我的 IDE 网页中使用 monaco 代码编辑器。

我正在为我的 Web 应用程序使用 react

我需要使用部分代码只读并保持可编辑状态。不幸的是，我在monaco 编辑器中找不到 lineRange 只读选项。因此我选择将 2 个 monaco 编辑器放在同一个页面中。

this.state.DEFAULT_CODE.map((item, key) => {return(                                                                 
    <MonacoEditor key={key}                                                                        
     height='400'                                                         
     className="codemirror1"
     language="C"
      options={options}                                                                       
       value={item.value}
      editorDidMount={(editor, monaco) => {
      this.editor = editor;
      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_C, () 
       => null);
     }}
    onChange={(value) => {
     this.setState({
       DEFAULT_CODE: value,
     });
    }}
   />
)

现在我希望第二个编辑器的行号从第一个编辑器的行尾开始.. 是否可以.... 如果可以的话，谁能帮帮我....

【问题讨论】：

您能否更清楚地解释问题和期望的结果？更好的是，请提供minimal-reproducible-example。谢谢
谢谢你的提问...........我想手动更改摩纳哥编辑器的起始行号......我知道ACE编辑器中有一个选项editor.setOption("firstLineNumber", 10); ...摩纳哥编辑器中是否有任何选项.....

标签： monaco-editor

【解决方案1】：

您可以使用lineNumbers 选项。这是一个使行号从零开始的示例：

options = {
  lineNumbers: num => num - 1,
  lineNumbersMinChars: 2,
  glyphMargin: false,
};

这是另一个将数字映射到罗马数字的示例：

const useRomanNums = (num) => {
    const map = [ 'O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
    return (num < map.length) ? map[num] : num;
}

const options = {
  lineNumbers: useRomanNums
};

【讨论】：

【解决方案2】：

您可以很好地使用lineNumbers 选项。

options = {
  lineNumbers: 5,
  lineNumbersMinChars: 6,
  glyphMargin: false,
};

【讨论】：