Monaco编辑器 - 如何使某些区域只读

Question

我正在尝试以某种方式配置Monaco编辑器，使文本内容的某些区域只读。 更精确地说，我希望第一行和最后一行是只读的。 以下是示例：

public something(someArgument) { // This is readonly
// This is where the user can put his code
// more user code...
} // readonly again

我已经使用Ace Editor做过类似的事情，但是我无法想出如何在Monaco中实现这一点。 有一个ModelContentChangedEvent，你可以在上面注册监听器，但是它在更改发生之后触发（所以太晚了，无法阻止任何事情发生）。 有没有更多Monaco经验的人有想法如何做到这一点？

提前谢谢！

- custi

---

你找到这个问题的解决方案了吗？ - Sajith Edirisinghe

https://github.com/Microsoft/monaco-editor/issues/953 - Murat Karagöz

你找到了这个问题的解决方案吗？ - G Naga Subrahmanyam

Answer 1

我创建了一个插件，用于在Monaco编辑器中添加范围限制。这个插件是为了解决Monaco编辑器的#953问题而创建的。

该插件的详细文档和Playground可以在这里找到。

NPM包：

npm install constrained-editor-plugin@latest

依赖关系

<!-- Optional Dependency -->
<link rel="stylesheet" href="./node_modules/constrained-editor-plugin/constrained-editor-plugin.css">
<!-- Required Dependency -->
<script src="./node_modules/constrained-editor-plugin/constrainedEditorPlugin.js" ></script>

示例片段

require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
  const container = document.getElementById('container')
  const editorInstance = monaco.editor.create(container, {
    value: [
      'const utils = {};',
      'function addKeysToUtils(){',
      '',
      '}',
      'addKeysToUtils();'
    ].join('\n'),
    language: 'javascript'
  });
  const model = editorInstance.getModel();

  // - Configuration for the Constrained Editor : Starts Here
  const constrainedInstance = constrainedEditor(monaco);
  constrainedInstance.initializeIn(editorInstance);
  constrainedInstance.addRestrictionsTo(model, [{
    // range : [ startLine, startColumn, endLine, endColumn ]
    range: [1, 7, 1, 12], // Range of Util Variable name
    label: 'utilName',
    validate: function (currentlyTypedValue, newRange, info) {
      const noSpaceAndSpecialChars = /^[a-z0-9A-Z]*$/;
      return noSpaceAndSpecialChars.test(currentlyTypedValue);
    }
  }, {
    range: [3, 1, 3, 1], // Range of Function definition
    allowMultiline: true,
    label: 'funcDefinition'
  }]);
  // - Configuration for the Constrained Editor : Ends Here
});

- Vignesh Prakash

---

需要类似的东西。刚在游乐场里试了一下，看起来很棒！感谢您的努力和分享。 - burkay

你想要一个 TypeScript 实现的拉取请求吗？另外，你从哪里获取到这个类型 "Array<RangeRestrictionObject>"？它在 constrainedEditor.js 文件中提到，但我在 editor.api.d.ts 文件中找不到。 - specifically_user3827668

@specifically_user3827668 谢谢你的建议，我很乐意有一个包的TypeScript版本。随时可以创建一个pull request。 另外，你所要求的RangeRestrictionObject数据类型的文档链接在这里：链接 - Vignesh Prakash

好的，先生，您很快就会看到一个PR。我对它进行了一些小的修改，以使其更加清晰，但在功能上保持不变。哦，这是您自己的类型文档。不错。 - specifically_user3827668

Answer 2

只需在只读范围内点击光标即可更改光标位置：

// line 1 & 2 is readonly:
editor.onDidChangeCursorPosition(function (e) {
    if (e.position.lineNumber < 3) {
        this.editor.setPosition({
            lineNumber:3,
            column: 1
        });
    }
});

- Rizky Ramadhan

---

很喜欢这个答案，但你仍然可以使用Ctrl+A / Del或者通过删除第一行和第二行来回退。 - Jonny

这并不保护这些行，只是保护点击它们。你可以在它们上面进行高亮显示，对它们进行其他命令以销毁这些行。 - Jayson Minard

有其他的选择吗？ - G Naga Subrahmanyam