Menu
Microsoft recently open sourced their monaco editor (similar to ace/codemirror).
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> 
412
The easiest way to use the react-monaco-editor with create-react-app is to use the react-app-rewired project. For setting it up, the following steps are required: Install react-app-rewired : npm install -D react-app-rewired. Replace react-scripts by react-app-rewired in the scripts section of your packages.
The Monaco Editor is the code editor that powers VS Code. A good page describing the code editor's features is here. It is licensed under the MIT License and supports Edge, Chrome, Firefox, Safari and Opera. The Monaco editor is not supported in mobile browsers or mobile web frameworks.
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); } Both the editor and the model support getting the contents:
monaco.editor.IModel.getValue()monaco.editor.IStandaloneCodeEditor.getValue()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 (i.e. through 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()):
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:
var editor = monaco.editor.create(...); var model = editor.getModel(); var partOfTheText = model.getValueInRange({ startLineNumber: 1, startColumn: 2, endLineNumber: 3, endColumn: 10, }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
