BlazorMonaco
v3.3.0
Composant de Blazor pour l'éditeur Microsoft Monaco qui alimente le code Visual Studio.
La majeure partie de l'ensemble de fonctionnalités de l'éditeur Monaco principal est prise en charge avec des fonctionnalités moins utilisées actuellement manquantes. Toutes les contributions, commentaires ou suggestions sont grandement les bienvenues. N'hésitez pas à me contacter à x.com/serdarciplak ou via github.
La version actuelle de Blazormonaco:
Monaco Editor v0.52.2netstandard2.0 , net5.0 , net6.0 , net7.0 , net8.0 et net9.0 Vous pouvez voir un exemple de travail WebAssembly qui fonctionne ici.
Ajoutez le package NuGet à votre projet Blazor.
dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco
Ajoutez les balises de script ci-dessous à la fin de votre balise corporelle HTML. Notez qu'ils doivent être placés devant la balise de script Blazor ( blazor.webassembly.js , blazor.server.js ou 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 > Tout réside dans trois espaces de noms. Vous pouvez ajouter les directives suivantes à l'aide de directives à votre fichier root _Imports.razor , ou tout autre endroit dont vous pourriez avoir besoin.
@ using BlazorMonaco
@ using BlazorMonaco . Editor
@ using BlazorMonaco . Languages Ajoutez un composant StandaloneCodeEditor ou un composant StandaloneDiffEditor dans votre fichier de rasoir et vous verrez l'éditeur rendu avec les options par défaut.
< StandaloneCodeEditor />
<!-- or -->
< StandaloneDiffEditor />Remarque: Si vous avez des problèmes comme l'éditeur qui n'est pas visible ou ne vous initialise pas correctement, veuillez vérifier la section de dépannage ci-dessous.
Pour personnaliser les options initiales de votre éditeur, définissez le paramètre ConstructionOptions et fournissez une méthode qui renvoie une 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 " +
" } "
};
}
} Vous pouvez vous abonner aux événements de l'éditeur (par exemple, OnDidKeyUp ou OnDidPaste ) via les paramètres de l'événement de l'éditeur.
< StandaloneCodeEditor Id = " my-code-editor " OnDidChangeCursorPosition = " EditorDidChangeCursorPosition " />
@code {
private void EditorDidChangeCursorPosition ( CursorPositionChangedEvent eventArgs )
{
Console . WriteLine ( " EditorDidChangeCursorPosition " );
}
} StandaloneDiffEditor fournit deux propriétés nommées OriginalEditor et ModifiedEditor pour accéder aux instances de l'éditeur intérieur. Vous pouvez les utiliser comme n'importe quelle autre instance StandaloneCodeEditor .
Vous pouvez vous inscrire aux événements des éditeurs intérieurs à l'aide des paramètres d'événements d'assistance de l'instance principale 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 );
}
}
Il existe 3 sélecteurs CSS que vous pouvez utiliser pour personnaliser les styles CSS pour vos éditeurs.
div qui a une classe CSS de monaco-editor-container .Id que vous définissez pour votre instance d'éditeur est également définie comme l'ID de son élément div Container.CssClass de votre éditeur, cette valeur est ajoutée à l'attribut de classe de son élément DIV Container.Cela signifie, la composante du rasoir ci-dessous;
< StandaloneCodeEditor Id = " my-editor-id " CssClass = " my-editor-class " />est rendu avec le HTML ci-dessous;
< div id =" my-editor-id " class =" monaco-editor-container my-editor-class " >
...
</ div >Ainsi, vous pouvez utiliser des sélecteurs CSS comme ci-dessous pour sélectionner n'importe quel élément d'un éditeur et personnaliser son style.
# 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 ;
} La bibliothèque JavaScript de l'éditeur de Monaco définit certaines méthodes dans la portée globale. Comme C # n'autorise pas les méthodes globales, Blazormonaco regroupe ces méthodes dans deux classes statiques nommées BlazorMonaco.Editor.Global et BlazorMonaco.Language.Global . Si vous avez besoin d'utiliser une méthode d'éditeur Monaco dans la portée globale, vérifiez où est dans la bibliothèque JavaScript, cette méthode est et recherchez-la dans la classe Global correspondante.
Par exemple, vous pouvez utiliser la méthode SetTheme comme ci-dessous.
await BlazorMonaco . Editor . Global . SetTheme ( jsRuntime , "my-custom-theme" ) ;Si vous avez apporté des modifications à la bibliothèque de monaco éditeur JS et que vous devez utiliser cette version éditée au lieu de la version non modifiée intégrée dans Blazormonaco, vous pouvez modifier les balises de script comme ci-dessous.
< 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 > Q: J'ai ajouté un StandaloneCodeEditor comme décrit ci-dessus, mais il ne se charge pas.
R: Plus probablement, l'éditeur se charge réellement, mais vous ne pouvez pas le voir car il a une hauteur de 0. La façon dont la hauteur d'un élément DOM peut être définie dépend de ses éléments parents et de leur style. Ainsi, Blazormonaco ne peut pas gérer en interne la hauteur des instances de l'éditeur. Si vous ne définissez pas la hauteur d'un éditeur, il peut être invisible car il a une hauteur de 0px . Veuillez ajouter un style CSS pour définir la hauteur de votre éditeur en fonction de l'endroit où il est placé.
# my-editor-id {
height : 100 px ;
}Q: L'éditeur n'initialise pas correctement dans mon application Web Blazor.
R: Pour pouvoir travailler avec la bibliothèque interactive MonacoEditor JS, Blazormonaco nécessite un mode de rendu interactif. Si vous placez l'instance de l'éditeur dans une page qui utilise le rendu statique du serveur (SSR statique), l'instance de l'éditeur ne peut pas initialiser et fonctionner.
Vous pouvez définir un mode de rendu interactif à l'échelle mondiale au niveau de l'application,
<!-- In your App.razor file -->
< Routes @rendermode = " InteractiveServer " />Seulement pour une page spécifique,
<!-- In the razor file of your page that contains the editor -->
@page " /editor-page "
@rendermode InteractiveServer
< StandaloneCodeEditor />ou seulement pour un composant qui enveloppe l'instance de l'éditeur.
<!-- In the razor file of your interactive wrapper component -->
@rendermode InteractiveServer
< StandaloneCodeEditor />Q: L'éditeur fonctionne bien la première fois qu'il est affiché. Mais il est cassé (comme si son style CSS était incorrect), si l'utilisateur se rend à une autre page et revient à la page de l'éditeur.
R: Veuillez vérifier que la page qui contient l'instance de l'éditeur n'est pas ouverte avec une navigation améliorée par Blazor. La navigation améliorée annule les modifications dynamiques apportées au DOM par la bibliothèque de MonacoEditor JS et brise l'éditeur. Vous devez désactiver la navigation améliorée pour les pages contenant un éditeur.
Vous pouvez définir l'attribut data-enhance-nav de vos liens vers false ,
< a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a > Définissez le paramètre forceLoad dans vos appels NavigateTo() à true,
Navigation . NavigateTo ( "editor-page" , true ) ;ou utilisez les documents de Blazor ici pour voir toutes les méthodes de désactivation de la navigation améliorée.
Comme Blazormonaco n'est qu'un pont entre JavaScript et Blazor, vous pouvez utiliser la documentation de l'éditeur Monaco.
Après une mise à jour de version majeure (comme de v2.x à v3.x ), vous devrez peut-être apporter des modifications à votre intégration. Veuillez consulter le fichier migrate.md pour plus de détails.
Vous pouvez afficher l'historique et les modifications du fichier ChangeLog.md.
MIT, voir le fichier de licence pour plus de détails.
