如何在Monaco Editor中冻结部分行？Create React App无需eject方案

没问题！我来帮你搞定这个需求——不用 eject React Scripts，就能轻松在Monaco Editor里指定可编辑的行范围，冻结你不想让用户修改的内容。下面是具体的实现步骤和代码示例：

1. 安装依赖 #

首先，我们用@monaco-editor/react这个封装好的库，它完美适配Create React App，不需要 eject 就能集成Monaco Editor。在项目根目录运行：

npm install @monaco-editor/react
# 或者用yarn
yarn add @monaco-editor/react

2. 核心实现代码 #

创建一个自定义编辑器组件，通过Monaco的API设置可编辑范围，同时给冻结行添加视觉提示：

import React, { useRef } from 'react';
import Editor from '@monaco-editor/react';

const FrozenLineEditor = () => {
  const editorRef = useRef(null);

  // 模拟100行JavaScript代码（你可以替换成自己的文件内容）
  const initialCode = Array.from({ length: 100 }, (_, index) => {
    const lineNum = index + 1; // Monaco行号是1-based
    if (lineNum <= 10 || lineNum >= 91) {
      return `// 冻结行 ${lineNum}: 不可编辑`;
    }
    return `// 可编辑行 ${lineNum}: 可以修改我哦`;
  }).join('\n');

  const handleEditorMount = (editor, monaco) => {
    editorRef.current = editor;
    const model = editor.getModel();

    // 关键：设置可编辑范围——仅允许第10到90行（1-based）
    // 这样第1-9行和91-100行会被冻结，无法编辑
    model.setEditableRanges([
      { startLineNumber: 10, endLineNumber: 90 }
    ]);

    // 可选：给冻结行添加灰色背景，让用户一眼就能区分
    monaco.editor.defineTheme('frozenLineTheme', {
      base: 'vs', // 基于默认的VS主题
      inherit: true,
      rules: [
        {
          background: '#f0f0f0',
          token: '',
          lineNumbers: [1,2,3,4,5,6,7,8,9,91,92,93,94,95,96,97,98,99,100]
        }
      ]
    });
    editor.setTheme('frozenLineTheme');
  };

  return (
    <div style={{ height: '80vh', width: '100%' }}>
      <Editor
        language="javascript"
        value={initialCode}
        onMount={handleEditorMount}
        options={{
          lineNumbers: 'on',
          minimap: { enabled: false },
          readOnly: false, // 整体不设只读，靠editableRanges控制
        }}
      />
    </div>
  );
};

export default FrozenLineEditor;

3. 关键细节说明 #

• 行号对应关系：Monaco Editor的行号是1-based的，如果你说的“第0-10行”是0-based索引，记得把setEditableRanges的范围调整为{ startLineNumber: 11, endLineNumber: 90 }，这样就能冻结索引0-10（对应Monaco的1-11行）和90-99（对应Monaco的91-100行）。
• setEditableRanges的作用：这个API是Monaco原生提供的，直接指定允许编辑的行范围，比监听编辑事件再回滚要更可靠，用户根本无法在冻结区域输入内容。
• 无需eject的原因：@monaco-editor/react已经帮我们处理了CRA的webpack配置问题，不需要修改react-scripts的内部设置，开箱即用。

4. 测试效果 #

把这个组件导入到你的App.js里，运行项目后就能看到：

• 第1-9行和91-100行是灰色背景，无法编辑
• 第10-90行可以正常输入、修改内容

内容的提问来源于stack exchange，提问作者Lukas Liesis