[英]Monaco Editor - How to make some areas readonly
我正在尝试以文本内容的某些区域为只读的方式配置摩纳哥编辑器。 更准确地说,我希望第一行和最后一行是只读的。 下面的例子:
public something(someArgument) { // This is readonly
// This is where the user can put his code
// more user code...
} // readonly again
我已经用 Ace Editor 做了类似的事情,但我想不出用 Monaco 做这个的方法。 有一个ModelContentChangedEvent
,您可以在其上注册一个侦听器,但它会在更改发生后被触发(为时已晚,无法阻止任何事情)。 有更多摩纳哥经验的人知道如何做到这一点吗?
提前致谢!
只要在达到只读范围时更改光标位置:
// line 1 & 2 is readonly:
editor.onDidChangeCursorPosition(function (e) {
if (e.position.lineNumber < 3) {
this.editor.setPosition({
lineNumber:3,
column: 1
});
}
});
我创建了一个插件,用于在摩纳哥编辑器中添加范围限制。 这个插件是为了解决 monaco editor #953这个问题而创建的。
此插件的详细文档和游乐场可在此处获得
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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.