摩納哥編輯器 - 如何使某些區域只讀

Question

我正在嘗試以文本內容的某些區域為只讀的方式配置摩納哥編輯器。 更准確地說，我希望第一行和最后一行是只讀的。 下面的例子：

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

我已經用 Ace Editor 做了類似的事情，但我想不出用 Monaco 做這個的方法。 有一個ModelContentChangedEvent ，您可以在其上注冊一個偵聽器，但它會在更改發生后被觸發（為時已晚，無法阻止任何事情）。 有更多摩納哥經驗的人知道如何做到這一點嗎？

提前致謝！

Answer 1

只要在達到只讀范圍時更改光標位置：

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

Answer 2

我創建了一個插件，用於在摩納哥編輯器中添加范圍限制。 這個插件是為了解決 monaco editor #953這個問題而創建的。

此插件的詳細文檔和游樂場可在此處獲得

NPM Package

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
});