时间戳

首页 > 解决方案 > 第二个编辑器的摩纳哥代码编辑器自定义行号

monaco-editor - 第二个编辑器的摩纳哥代码编辑器自定义行号

问题描述

我在我的 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,
     });
    }}
   />
)

现在我希望第二个编辑器的行号从第一个编辑器的行尾开始.. 有可能.. 如果可以的话，任何人都可以帮助我....

标签： monaco-editor

解决方案

您可以使用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
};

推荐阅读