---
title: "Integración de editor Visual Studio (Monaco Editor)"
canonical: "https://onesaitplatform-es.refined.site/space/DOC/2216105397/Integraci%C3%B3n%20de%20editor%20Visual%20Studio%20(Monaco%20Editor)"
format: markdown
---
Para la incorporación de nuevas funcionalidades o actualización de las existentes se ha incluido en los recursos de la plataforma el potente editor web Visual Studio, creado por Microsoft.

![image](media://d3621f3b-3c89-4e45-9be7-fc49ddac786e)

Está librería, se encuentra disponible como recurso en el controlpanel en su versión minimizada (**/static/vendor/vs**). Se está usando actualmente en el editor de las gadgets templates. Es una librería bastante más pesada que la anterior de codemirror, pero que ofrece por defecto una interfaz similar a la del Visual Studio desktop. Algunas características importantes:

- Formateo de documentos automático, autocompletado de HTML, JS, CSS (con colorpicker integrado),… aunque sólo un modo posible a la vez, marcado de sintaxis en muchos lenguajes incluido JSON puro.
- Buscar/Reemplazar, selector por columnas, formateo de código,… con el F1 se pueden ver todos los comandos.
- Enable/Disable de código nativo.
- Múltiples temas por defecto.
- Capacidad de hacer diffs de texto en doble pantalla.
- Minimapa del código con scroll.
- Se permite probar diferentes configuraciones así como código, desde la web oficial: [https://microsoft.github.io/monaco-editor/playground.html#creating-the-editor-editor-basic-options](https://microsoft.github.io/monaco-editor/playground.html#creating-the-editor-editor-basic-options)
- Lanzamiento de comandos mediante acciones, un ejemplo sería recuperar los resultados de una query en string y formatearlos directamente en formato json.

![image](media://6d244f58-38a2-4dc4-ab9e-e171137e3bd8)

Su integración es sencilla, basta con añadir una variable de configuración del loader (ruta base de la carpeta de recursos que podría ser otra o una absoluta) y después los recursos por defecto.

```xml
<script>

	var require = { paths: { 'vs': '../../../static/vendor/vs' } };

</script>

<script th:src="@{/static/vendor/vs/loader.js}"></script>

<script th:src="@{/static/vendor/vs/editor/editor.main.nls.js}"></script>

<script th:src="@{/static/vendor/vs/editor/editor.main.js}"></script>
```


Existe una incompatibilidad con el plugin de jquery “jquery.validate.min.js” y el loader pero se solventa cargando después el vs

```xml
<script th:src="@{/static/vendor/jquery-validation/jquery.validate.min.js}" type="text/javascript"></script>

<script th:src="@{/static/vendor/jquery-validation/additional-methods.min.js}" type="text/javascript"></script>

<script th:if="${lang} == 'es'" th:src="@{/static/vendor/jquery-validation/localization/messages_es.min.js}" type="text/javascript"></script>

<script>

	var require = { paths: { 'vs': '../../../static/vendor/vs' } };

</script>

<script th:src="@{/static/vendor/vs/loader.js}"></script>

<script th:src="@{/static/vendor/vs/editor/editor.main.nls.js}"></script>

<script th:src="@{/static/vendor/vs/editor/editor.main.js}"></script>
```


Para la creación del editor basta con un div con altura:

```xml
<div style="height:400px" id="htmlcode"></div>
```


Y una instanciación del editor en ese div:

```javascript
var htmlelement = document.getElementById('htmlcode');

myVSHTML = monaco.editor.create(htmlelement, {

       value: myTextArea.value,

       language: 'html',

       readOnly: myTextArea.disabled,

       scrollBeyondLastLine: false,

       theme: "vs-dark",

       automaticLayout: true

});
```


Se pueden definir comandos custom para el editor. Por ejemplo un full-screen (con una clase definida para ello) podría ser así:

```javascript
myVSHTML.addCommand(monaco.KeyCode.F11, function() {
	if(!myVSHTML_isfullscreen){
		document.getElementById("htmlcode").classList.add(“fullscreen”);
		myVSHTML_isfullscreen=true;
	}
	else{
		document.getElementById("htmlcode").classList.remove(“fullscreen”);
		myVSHTML_isfullscreen=false;
	}
});

myVSHTML.addCommand(monaco.KeyCode.Escape, function() {
	document.getElementById("htmlcode").classList.remove(“fullscreen”);
	myVSHTML_isfullscreen=false;
});
```


Para recuperar el value se puede hacer puntualmente o por cada cambio:

```javascript
var newtextvalue = myVSHTML.getValue());

myVSHTML.onDidChangeModelContent(function() {
	var newtextvalue = myVSHTML.getValue());
})
```


También se puede gestionar drag&drop con destino el editor y hacer reemplazos sobre rangos, por ejemplo:

```javascript
var allowDrop = function(ev) {
	ev.preventDefault();
}

var dropParam = function(e,vsinstance){
	e.preventDefault();
	var data = e.dataTransfer.getData("content");  
	var line = vsinstance.getPosition();
	var range = new monaco.Range(line.lineNumber, line.column, line.lineNumber, line.column);
	var id = { major: 1, minor: 1 };            
	var text = dataFromId(data);
	var op = {identifier: id, range: range, text: text, forceMoveMarkers: true};
	vsinstance.executeEdits("my-source", [op]);
}

htmlelement.ondragover = function(e){allowDrop(e)};
htmlelement.ondrop = function(e){dropParam(e,myVSHTML)};
```