Descarga BlazorMonaco - Descargar el código fuente BlazorMonaco

BlazorMonaco

Otros recursos

v3.3.0

Descargar

Blazormonaco

Componente Blazor para el editor de Microsoft Monaco que alimenta el código de estudio Visual.

La mayoría del conjunto principal del editor de Mónaco es compatible con algunas características de menos con frecuencia que actualmente faltan. Cualquier contribución, comentarios o sugerencias es muy bienvenida. No dude en ponerse en contacto conmigo en x.com/serDarciplak o a través de GitHub.

La versión actual de Blazormonaco:

Utiliza Monaco Editor v0.52.2
Admite netstandard2.0 , net5.0 , net6.0 , net7.0 , net8.0 y net9.0

Manifestación

Puede ver una aplicación de WebAssembly de muestra de trabajo aquí.

Instalación

Agregue el paquete Nuget a su proyecto Blazor.

 dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco

Agregue las etiquetas de script a continuación al final de su etiqueta de cuerpo HTML. Tenga en cuenta que deben colocarse antes de la etiqueta de script Blazor ( blazor.webassembly.js , blazor.server.js o blazor.web.js ).

 < script src =" _content/BlazorMonaco/jsInterop.js " > </ script >
< script src =" _content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js " > </ script >
< script src =" _content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js " > </ script >

Todo reside en tres espacios de nombres. Puede agregar lo siguiente usando las directivas a su archivo root _Imports.razor o cualquier otro lugar que pueda necesitarlos.
```
 @ using BlazorMonaco
@ using BlazorMonaco . Editor
@ using BlazorMonaco . Languages
```
Agregue un componente StandaloneCodeEditor o un componente StandaloneDiffEditor en su archivo Razor y verá el editor renderizado con las opciones predeterminadas.
```
< StandaloneCodeEditor />

< StandaloneDiffEditor />
```

Nota: Si tiene algún problema como el editor que no sea visible o no se inicialice correctamente, verifique la sección de solución de problemas a continuación.

Uso

Proporcionar opciones iniciales

Para personalizar las opciones iniciales de su editor, establezca el parámetro ConstructionOptions y proporcione un método que devuelva un StandaloneEditorConstructionOptions .

< StandaloneCodeEditor Id = " my-code-editor " ConstructionOptions = " EditorConstructionOptions " />

@code {
    private StandaloneEditorConstructionOptions EditorConstructionOptions ( StandaloneCodeEditor editor )
    {
        return new StandaloneEditorConstructionOptions
        {
            AutomaticLayout = true ,
            Language = " javascript " ,
            Value = " function xyz() { n " +
                    "   console.log( " Hello world! " ); n " +
                    " } "
        };
    }
}

Eventos de escucha de editor

Puede suscribirse a los eventos del editor (por ejemplo, OnDidKeyUp o OnDidPaste ) a través de los parámetros del evento del editor.

< StandaloneCodeEditor Id = " my-code-editor " OnDidChangeCursorPosition = " EditorDidChangeCursorPosition " />

@code {
    private void EditorDidChangeCursorPosition ( CursorPositionChangedEvent eventArgs )
    {
        Console . WriteLine ( " EditorDidChangeCursorPosition " );
    }
}

Acceder a los editores y eventos internos de un editor de DIFF

StandaloneDiffEditor proporciona dos propiedades llamadas OriginalEditor y ModifiedEditor para acceder a las instancias del editor interno. Puede usarlos como cualquier otra instancia StandaloneCodeEditor .

Puede registrarse en los eventos de editores internos utilizando los parámetros del evento auxiliar de la instancia principal StandaloneDiffEditor .

< StandaloneDiffEditor @ref = " _diffEditor " Id = " my-diff-editor " OnKeyUpOriginal = " OnKeyUpOriginal " OnKeyUpModified = " OnKeyUpModified " />

@code {
    private StandaloneDiffEditor _diffEditor ;

    private void OnKeyUpOriginal ( KeyboardEvent keyboardEvent )
    {
        StandaloneCodeEditor originalEditor = _diffEditor . OriginalEditor ;
        Console . WriteLine ( " OnKeyUpOriginal : " + keyboardEvent . Code );
    }

    private void OnKeyUpModified ( KeyboardEvent keyboardEvent )
    {
        StandaloneCodeEditor modifiedEditor = _diffEditor . ModifiedEditor ;
        Console . WriteLine ( " OnKeyUpModified : " + keyboardEvent . Code );
    }
}

Estilo CSS

Hay 3 selectores CSS que puede usar para personalizar los estilos CSS para sus editores.

Todas las instancias del editor están contenidas en un elemento div que tiene una clase CSS de monaco-editor-container .
El valor Id que estableció para su instancia de editor también se establece como la ID de su elemento div Container.
Si establece la propiedad CssClass de su editor, ese valor se agrega al atributo de clase de su elemento Div Container.

Eso significa, el componente de afeitar a continuación;

< StandaloneCodeEditor Id = " my-editor-id " CssClass = " my-editor-class " />

se representa con el HTML a continuación;

 < div id =" my-editor-id " class =" monaco-editor-container my-editor-class " >
    ...
</ div >

Por lo tanto, puede usar selectores CSS como a continuación para seleccionar cualquier elemento en un editor y personalizar su estilo.

 # my-editor-id { /* applies to a specific editor instance */
    height : 100 px ;
}

. my-editor-class { /* applies to all editor instances with this class */
    height : 100 px ;
}

. monaco-editor-container { /* applies to all editor instances */
    height : 100 px ;
}

Métodos globales

El editor de Mónaco JavaScript Library define algunos métodos en el alcance global. Como C# no permite métodos globales, Blazormonaco agrupa esos métodos en dos clases estáticas llamadas BlazorMonaco.Editor.Global y BlazorMonaco.Language.Global . Si necesita usar un método de editor de Monaco en el alcance global, verifique en qué parte de la biblioteca JavaScript ese método está, y busquelo en la clase Global correspondiente.

Por ejemplo, puede usar el método SetTheme como a continuación.

 await BlazorMonaco . Editor . Global . SetTheme ( jsRuntime , "my-custom-theme" ) ;

Uso de una instalación de editor de Mónaco personalizado

Si ha realizado cambios en la biblioteca JS de Monaco Editor y necesita usar esta versión editada en lugar de la versión no modificada incrustada en Blazormonaco, puede modificar las etiquetas de script como a continuación.

 < script src =" _content/BlazorMonaco/jsInterop.js " > </ script >
< script > var require = { paths : { vs : 'my-path/monaco-editor/min/vs' } } ; </ script >
< script src =" my-path/monaco-editor/min/vs/loader.js " > </ script >
< script src =" my-path/monaco-editor/min/vs/editor/editor.main.js " > </ script >

Solución de problemas

P: He agregado un StandaloneCodeEditor como se describió anteriormente, pero no se está cargando.
R: Lo más posiblemente, el editor realmente se está cargando, pero no puede verlo porque tiene una altura de 0. Cómo se puede establecer la altura de un elemento dom depende de sus elementos principales y su estilo. Entonces, Blazormonaco no puede administrar internamente la altura de las instancias del editor. Si no establece la altura de un editor, puede ser invisible ya que tiene una altura de 0px . Agregue un estilo CSS para establecer la altura de su editor de acuerdo con donde se coloca.
```
 # my-editor-id {
    height : 100 px ;
}
```
P: El editor no se inicializa correctamente en mi aplicación web Blazor.
R: Para poder trabajar con la Biblioteca JS Monacoeditor JS interactiva, Blazormonaco requiere un modo de renderizado interactivo. Si coloca la instancia del editor en una página que utiliza la representación del lado del servidor estática (SSR estática), la instancia del editor no puede inicializarse y funcionar.
Puede establecer un modo de renderizado interactivo a nivel mundial en el nivel de la aplicación,
```
 
< Routes @rendermode = " InteractiveServer " />
```
solo para una página específica,
```
 
@page " /editor-page "
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
o solo para un componente que envuelve la instancia del editor.
```
 
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
P: El editor funciona bien la primera vez que se muestra. Pero está roto (como si su estilo CSS fuera incorrecto), si el usuario navega a otra página y regresa a la página del editor.
R: Verifique que la página que contiene la instancia del editor no se abre con navegación mejorada de Blazor. Navegación mejorada Desvocir cambios dinámicos realizados en el DOM por la Biblioteca Monacoeditor JS y rompe el editor. Debe deshabilitar la navegación mejorada para páginas que contienen un editor.
Puede establecer el atributo data-enhance-nav de sus enlaces a false ,
```
 < a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a >
```
Establezca el parámetro forceLoad en sus llamadas NavigateTo() a verdadero,
```
 Navigation . NavigateTo ( "editor-page" , true ) ;
```
O use los documentos Blazor aquí para ver todos los métodos para deshabilitar la navegación mejorada.

Documentación

Como Blazormonaco es solo un puente entre JavaScript y Blazor, puede usar la documentación del editor de Mónaco.

Guía de migración

Después de una actualización de la versión importante (como de v2.x a v3.x ), es posible que deba hacer algunos cambios en su integración. Consulte el archivo migrate.md para más detalles.