摩纳哥编辑 - 如何使一些领域只读

Question

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

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

我已经用Ace编辑器做了类似的事情,但我无法想办法用摩纳哥做到这一点.有一个ModelContentChangedEvent你可以注册一个监听器,但它发生了变化后被触发(所以为时已晚,以防止任何事情).有更多摩纳哥经验的人是否知道如何做到这一点？

提前致谢!

Answer 1

我创建了一个插件，用于在摩纳哥编辑器中添加范围限制。创建这个插件是为了解决摩纳哥编辑器的#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
});

Answer 2

只需在光标到达只读范围时更改光标位置即可：

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