Kyl*_*bel 21 javascript monaco-editor
微软最近开源了他们的摩纳哥编辑器(类似于ace/codemirror).
https://github.com/Microsoft/monaco-editor
我已经在浏览器中运行并运行了,但仍然无法弄清楚如何获取编辑器的当前文本,就像我想要保存它一样.
例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
function save() {
// how do I get the value/code inside the editor?
var value = "";
saveValueSomewhere(value);
}
</script>
</body>
</html>
小智 22
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
window.editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
function save() {
// get the value of the data
var value = window.editor.getValue()
saveValueSomewhere(value);
}
编辑器和模型都支持获取内容：
因此，只要保留对编辑器或模型的引用，就可以查询内容：
var editor = monaco.editor.create(...);
var text = editor.getValue();
或在模型的情况下：
var model = monaco.editor.createModel(...);
var text = model.getValue();
如果您有差异编辑器，则无法直接在编辑器上访问文本，但可以在各个模型上（例如，通过IStandaloneDiffEditor.getModel()）访问它们：
var diffEditor = monaco.editor.createDiffEditor(...);
var originalText = diffEditor.getModel().original.getValue();
var modifiedText = diffEditor.getModel().modified.getValue();
或通过不同的编辑器（getModifiedEditor()和getOriginalEditor()）：
var originalText = diffEditor.getModifiedEditor().getValue();
var modifiedText = diffEditor.getOriginalEditor().getValue();
以防万一您对文本的一部分感兴趣，该模型还支持getValueInRange()以文本的形式在指定范围内为您提供文本，并以开始和结束的列和行号分隔，例如：
var editor = monaco.editor.create(...);
var model = editor.getModel();
var partOfTheText = model.getValueInRange({
startLineNumber: 1,
startColumn: 2,
endLineNumber: 3,
endColumn: 10,
})