Download de BlazorMonaco - BlazorMonaco Código -fonte Download

BlazorMonaco

Outros recursos

v3.3.0

Baixar

Blazormonaco

Componente Blazor para o editor Microsoft Monaco, que alimenta o código do Visual Studio.

A maior parte do conjunto de recursos do editor principal do Mônaco é suportada com alguns recursos usados com menos frequência atualmente ausentes. Quaisquer contribuições, comentários ou sugestões são muito bem -vindos. Por favor, não hesite em entrar em contato comigo em x.com/serdarciplak ou via github.

A versão atual do Blazormonaco:

Usa Monaco Editor v0.52.2
Suporta netstandard2.0 , net5.0 , net6.0 , net7.0 , net8.0 e net9.0

Demonstração

Você pode ver um aplicativo de amostra de amostra que está funcionando aqui.

Instalação

Adicione o pacote Nuget ao seu projeto Blazor.

 dotnet add package BlazorMonaco
// or
Install-Package BlazorMonaco

Adicione as tags de script abaixo ao final da sua etiqueta corporal HTML. Observe que eles devem ser colocados antes da tag 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 >

Tudo reside em três namespaces. Você pode adicionar o seguinte usando diretivas ao seu arquivo root _Imports.razor ou qualquer outro lugar necessário.
```
 @ using BlazorMonaco
@ using BlazorMonaco . Editor
@ using BlazorMonaco . Languages
```
Adicione um componente StandaloneCodeEditor ou um componente StandaloneDiffEditor no seu arquivo de barbear e você verá o editor renderizado com as opções padrão.
```
< StandaloneCodeEditor />

< StandaloneDiffEditor />
```

Nota: Se você tiver algum problema como o editor não está sendo visível ou não inicializando corretamente, verifique a seção Solução de problemas abaixo.

Uso

Fornecendo opções iniciais

Para personalizar as opções iniciais do seu editor, defina o parâmetro ConstructionOptions e forneça um método que retorne um 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 " +
                    " } "
        };
    }
}

Ouvindo eventos do editor

Você pode se inscrever nos eventos do editor (por exemplo, OnDidKeyUp ou OnDidPaste ) através dos parâmetros do evento do editor.

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

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

Acessando os editores e eventos internos de um editor de diff

StandaloneDiffEditor fornece duas propriedades denominadas OriginalEditor e ModifiedEditor para acessar as instâncias do editor interno. Você pode usá -los como qualquer outra instância StandaloneCodeEditor .

Você pode se registrar nos eventos dos editores internos usando os parâmetros de eventos auxiliares da instância 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

Existem 3 seletores CSS que você pode usar para personalizar os estilos CSS para seus editores.

Todas as instâncias do editor estão contidas em um elemento div que possui uma classe CSS de monaco-editor-container .
O valor Id que você definiu para a instância do seu editor também é definido como o ID do seu elemento div container.
Se você definir a propriedade CssClass do seu editor, esse valor será adicionado ao atributo de classe do seu elemento div container.

Isso significa que o componente Razor abaixo;

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

é renderizado com o HTML abaixo;

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

Portanto, você pode usar seletores CSS, como abaixo, para selecionar qualquer elemento em um editor e personalizar seu 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 globais

O editor de Mônaco JavaScript Library define alguns métodos no escopo global. Como C# não permite métodos globais, Blazormonaco agrupa esses métodos em duas classes estáticas denominadas BlazorMonaco.Editor.Global e BlazorMonaco.Language.Global . Se você precisar usar um método de editor de Mônaco no escopo global, verifique onde na biblioteca JavaScript é esse método e procure -o na classe Global correspondente.

Por exemplo, você pode usar o método SetTheme , como abaixo.

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

Usando uma instalação personalizada do editor de Mônaco

Se você fez alterações na Biblioteca JS do Editor de Mônaco e precisa usar esta versão editada em vez da versão não modificada incorporada no Blazormonaco, você pode modificar as tags de script como abaixo.

 < 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 >

Solução de problemas

P: Eu adicionei um StandaloneCodeEditor , conforme descrito acima, mas não está carregando.
R: Mais possivelmente, o editor está realmente carregando, mas você não pode vê -lo porque tem uma altura de 0. Como a altura de um elemento DOM pode ser definida depende de seus elementos pais e seu estilo. Portanto, o Blazormonaco não pode gerenciar internamente a altura das instâncias do editor. Se você não definir a altura de um editor, pode ser invisível, pois possui uma altura de 0px . Por favor, adicione um estilo CSS para definir a altura do seu editor de acordo com onde está colocado.
```
 # my-editor-id {
    height : 100 px ;
}
```
P: O editor não inicializa corretamente no meu aplicativo Web Blazor.
R: Para poder trabalhar com a biblioteca Monacoeditor interativa JS, Blazormonaco requer um modo de renderização interativo. Se você colocar a instância do editor em uma página que usa a renderização estática do lado do servidor (SSR estático), a instância do editor não poderá inicializar e funcionar.
Você pode definir um modo de renderização interativo globalmente no nível do aplicativo,
```
 
< Routes @rendermode = " InteractiveServer " />
```
apenas para uma página específica,
```
 
@page " /editor-page "
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
ou apenas para um componente que envolve a instância do editor.
```
 
@rendermode InteractiveServer

< StandaloneCodeEditor />
```
P: O editor funciona bem na primeira vez que é exibido. Mas está quebrado (como se o seu estilo CSS estivesse incorreto), se o usuário navegar para outra página e retornar à página do editor.
R: Por favor, verifique se a página que contém a instância do editor não foi aberta com a navegação aprimorada do Blazor. Navegação aprimorada UNDOS Alterações dinâmicas feitas no DOM pela biblioteca JS Monacoeditor e quebra o editor. Você precisa desativar a navegação aprimorada para páginas que contêm um editor.
Você pode definir o atributo data-enhance-nav de seus links para false ,
```
 < a href =" editor-page " data-enhance-nav =" false " > Editor Page </ a >
```
Defina o parâmetro forceLoad em suas chamadas NavigateTo() para True,
```
 Navigation . NavigateTo ( "editor-page" , true ) ;
```
Ou use os documentos blaziais aqui para ver todos os métodos para desativar a navegação aprimorada.

Documentação

Como Blazormonaco é apenas uma ponte entre JavaScript e Blazor, você pode usar a documentação do editor de Mônaco.

Guia de migração

Após uma atualização de versão importante (como v2.x para v3.x ), pode ser necessário fazer algumas alterações em sua integração. Consulte o arquivo migrate.md para obter detalhes.