Éditeur de code

Le composant éditeur de code vous permet d'héberger l'éditeur Microsoft Monaco dans vos tableaux de bord.

Créer un éditeur de code

Vous pouvez créer un nouvel éditeur de code avec l'applet de commande New-UDCodeEditor. Spécifier le paramètre -Language activera la coloration syntaxique pour ce langage. Vous devrez spécifier une hauteur en pixels.

New-UDCodeEditor -Height '500' -Language 'powershell'

Remplir du code

Utilisez le paramètre -Code pour spécifier le code qui sera rempli dans l'éditeur de code lors de son chargement.

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!'

Récupérer du code à partir d'un autre composant

Vous pouvez récupérer du code à partir d'un autre composant en utilisant l'applet de commande Get-UDElement et en accédant à la propriété code de la table de hachage retournée.

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'

New-UDButton -Text 'Get Code' -OnClick {
    Show-UDToast -Message (Get-UDElement -id 'editor').Code
}

Définir du code à partir d'un autre composant

Vous pouvez définir du code à partir d'un autre composant en utilisant l'applet de commande Set-UDElement. Spécifiez la valeur du code dans une table de hachage passée au paramètre -Properties.

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'

New-UDButton -Text 'Get Code' -OnClick {
    Set-UDElement -Id 'editor' -Properties @{
        code = "# Hello!"
    }
}

Options

L'éditeur Monaco prend en charge un large éventail d'options. Si vous souhaitez utiliser des options qui ne sont pas disponibles dans l'applet de commande New-UDCodeEditor, vous pouvez utiliser le paramètre -Options et passer une table de hachage d'options à la place.

Pour une liste complète des options, consultez l'interface IEditorConsturctionOptions.

New-UDCodeEditor -Language powershell -Height 100 -Options @{ fontSize = 10 }

API

• New-UDCodeEditor