获得Monaco Editor的价值
[英]Get the value of Monaco Editor
问题描述
Microsoft recently open sourced their monaco editor (similar to ace/codemirror). 
微软最近开源了他们的摩纳哥编辑器（类似于ace / codemirror）。
https://github.com/Microsoft/monaco-editor https://github.com/Microsoft/monaco-editor
I've got it up and running in the browser, but still can't figure out how to get the current text of the editor, like if I wanted to save it. 我已经在浏览器中运行并运行了，但仍然无法弄清楚如何获取编辑器的当前文本，就像我想要保存它一样。
Example: 例：
<!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>
3 个解决方案
解决方案1
20 已采纳 2016-06-29 07:01:13
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);
}
解决方案2
4 2018-02-15 22:20:47
Both the editor and the model support getting the contents: 编辑器和模型都支持获取内容：
So as long as you keep a reference to the editor or model you can query the contents: 因此，只要您保留对编辑器或模型的引用，您就可以查询内容：
var editor = monaco.editor.create(...);
var text = editor.getValue();
Or in case of the model: 或者在模型的情况下：
var model = monaco.editor.createModel(...);
var text = model.getValue();
If you have a diff-editor you cannot access the text directly on the editor but you can access them on the individual models (ie through IStandaloneDiffEditor.getModel() ): 如果您有diff编辑器，则无法直接在编辑器上访问文本，但您可以在各个模型上访问它们（即通过IStandaloneDiffEditor.getModel() ）：
var diffEditor = monaco.editor.createDiffEditor(...);
var originalText = diffEditor.getModel().original.getValue();
var modifiedText = diffEditor.getModel().modified.getValue();
Or through the different editors ( getModifiedEditor() and getOriginalEditor() ): 或者通过不同的编辑器（ getModifiedEditor()和getOriginalEditor() ）：
var originalText = diffEditor.getModifiedEditor().getValue();
var modifiedText = diffEditor.getOriginalEditor().getValue();
Just in case you're interested in a part of the text, the model also supports getValueInRange() which gives you the text in a specified range, delimited by a starting and ending column and linenumber, for example: 如果您对文本的一部分感兴趣，该模型还支持getValueInRange() ，它为您提供指定范围内的文本，由起始列和结束列以及亚麻布分隔，例如：
var editor = monaco.editor.create(...);
var model = editor.getModel();
var partOfTheText = model.getValueInRange({
startLineNumber: 1,
startColumn: 2,
endLineNumber: 3,
endColumn: 10,
})
解决方案3
2 2017-08-15 07:10:43
for me this window.editor.getValue() didn't work but below code worked. 对我来说这个window.editor.getValue()没有用，但是代码工作正常。
<div id="container" style="width:950px;height:700px;"></div>
<script src="./monaco-editor/dev/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: [
'print "Hello World!"',
'# python'
].join('\n'),
language: 'python',
theme: "vs-dark"
});
function saveI()
{
getVal = editor.getValue()
// get the value of the data
alert(getVal)
}
document.getElementById('container').onclick = saveI;
});
// Themes: vs-dark , hc-black
// language: text/html , javascript
</script>
you can change 'container' to your 'htmlButton' and then save the code by using jQuery ajax in the saveI() function. 您可以将'container'更改为'htmlButton'，然后在saveI()函数中使用jQuery ajax保存代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.